@ibiz-template/vue3-components 0.7.38-alpha.56 → 0.7.39

package/lib/control/form/form-detail/form-item/form-item-container/form-item-container.css

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--tooltip{max-width:150px}.ibiz-form-item-container__label--tooltip:has(ion-icon){padding-right:var(--ibiz-width-icon-large)}.ibiz-form-item-container__label--tooltip a{padding:0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-link)}.ibiz-form-item-container__label--tooltip ion-icon{position:absolute;font-size:var(--ibiz-width-icon-large);color:var(--ibiz-color-fill-2)}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-tight)}.ibiz-form-item-container__popper.el-popper.is-light{padding:0 var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-text-0);border-radius:0}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height);text-align:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height);text-align:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}
+.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--content{display:flex;max-width:100%;align-items:center}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{border-radius:0;padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{border:1px solid var(--ibiz-color-border);padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:100%;width:100%;position:absolute;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}

package/lib/control/form/form-detail/form-item/form-item.cjs

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./form-item.css');
-var runtime = require('@ibiz-template/runtime');
 var compositeFormItem = require('./composite-form-item/composite-form-item.cjs');
+require('./form-item.css');
 
 "use strict";
 function _isSlot(s) {
@@ -20,7 +19,7 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
       required: true
     },
     controller: {
-      type: runtime.FormItemController,
+      type: Object,
       required: true
     },
     attrs: {
@@ -60,17 +59,17 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
   },
   render() {
     var _a, _b, _c, _d, _e;
-    if (!this.c.state.visible || ((_a = this.controller.model.editor) == null ? void 0 : _a.editorType) === "HIDDEN") {
+    if (!this.c.state.visible || ((_a = this.c.model.editor) == null ? void 0 : _a.editorType) === "HIDDEN") {
       return null;
     }
     let editor = null;
-    const compositeItem = this.controller.model.compositeItem;
+    const compositeItem = this.c.model.compositeItem;
     if (compositeItem) {
       const {
         editorItems = []
-      } = this.controller.model.editor || {};
+      } = this.c.model.editor || {};
       editor = editorItems.map((item) => {
-        const controller = this.controller.form.details[item.id];
+        const controller = this.c.form.details[item.id];
         return vue.createVNode(compositeFormItem.CompositeFormItem, {
           "modelData": controller.model,
           "controller": controller,
@@ -78,56 +77,45 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
         }, null);
       });
     } else {
-      const editMode = (_d = (_c = (_b = this.controller.editor) == null ? void 0 : _b.model) == null ? void 0 : _c.editorParams) == null ? void 0 : _d.editMode;
+      const editMode = (_d = (_c = (_b = this.c.editor) == null ? void 0 : _b.model) == null ? void 0 : _c.editorParams) == null ? void 0 : _d.editMode;
       const editorProps = {
-        style: (_e = this.controller.editor) == null ? void 0 : _e.style,
-        value: this.controller.value,
-        data: this.controller.data,
-        controller: this.controller.editor,
-        disabled: this.controller.state.disabled,
-        readonly: this.controller.state.readonly,
+        style: (_e = this.c.editor) == null ? void 0 : _e.style,
+        value: this.c.value,
+        data: this.c.data,
+        controller: this.c.editor,
+        disabled: this.c.state.disabled,
+        readonly: this.c.state.readonly,
         onChange: this.onValueChange,
         extraParams: this.extraParams,
         controlParams: editMode ? {
-          ...this.controller.form.controlParams,
+          ...this.c.form.controlParams,
           editmode: editMode
-        } : this.controller.form.controlParams,
+        } : this.c.form.controlParams,
         onFocus: (event) => this.c.onFocus(event),
         onBlur: (event) => this.c.onBlur(event),
-        onEnter: (event) => this.controller.onEnter(event),
-        onClick: (event, params) => this.controller.onClick(event, params),
+        onEnter: (event) => this.c.onEnter(event),
+        onClick: (event, params) => this.c.onClick(event, params),
         ...this.attrs
       };
-      if (this.c.form.state.isLoaded) {
-        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);
-        }
+      if (this.$slots.default) {
+        editor = this.$slots.default(editorProps);
+      } else if (this.c.editorProvider) {
+        const component = vue.resolveComponent(this.c.editorProvider.formEditor);
+        editor = vue.h(component, {
+          ...editorProps
+        });
+      } else {
+        editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+          "modelData": this.modelData.editor,
+          "context": this.c.context
+        }, null);
       }
     }
     return vue.createVNode(vue.resolveComponent("iBizFormItemContainer"), {
-      "id": "".concat(this.controller.form.view.model.codeName, "_").concat(this.controller.form.model.codeName, "_").concat(this.modelData.codeName),
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.controller.containerClass],
+      "id": "".concat(this.c.form.view.model.codeName, "_").concat(this.c.form.model.codeName, "_").concat(this.modelData.codeName),
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
       "style": this.modelData.cssStyle,
-      "required": this.c.state.required,
-      "error": this.c.state.error,
-      "label": this.c.labelCaption,
-      "labelSysImg": this.modelData.sysImage,
-      "labelClass": this.controller.labelClass,
-      "label-pos": this.c.model.labelPos,
-      "label-width": this.c.model.labelWidth,
-      "enableInputTip": this.modelData.enableInputTip,
-      "inputTip": this.modelData.inputTip,
-      "inputTipUrl": this.modelData.inputTipUrl,
-      "inputTipClosable": this.modelData.inputTipClosable,
+      "controller": this.c,
       "onClick": (event) => this.c.onClick(event)
     }, _isSlot(editor) ? editor : {
       default: () => [editor]

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.cjs

@@ -43,22 +43,19 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
       mdProvider,
       model
     } = this.controller;
-    const isLoaded = this.controller.form.state.isLoaded;
     let controlComponent = null;
-    if (isLoaded) {
-      const controlProps = {
-        class: this.ns.b("content"),
-        modelData: model.contentControl,
-        context: this.controller.form.context,
-        params: this.controller.form.params,
-        onCreated: this.onCreated,
-        onSelectionChange: this.onSelectionChange
-      };
-      if (model.contentType === "GRID") {
-        controlProps.rowEditOpen = true;
-      }
-      controlComponent = vue.h(vue.resolveComponent(mdProvider.component), controlProps);
+    const controlProps = {
+      class: this.ns.b("content"),
+      modelData: model.contentControl,
+      context: this.controller.form.context,
+      params: this.controller.form.params,
+      onCreated: this.onCreated,
+      onSelectionChange: this.onSelectionChange
+    };
+    if (model.contentType === "GRID") {
+      controlProps.rowEditOpen = true;
     }
+    controlComponent = vue.h(vue.resolveComponent(mdProvider.component), controlProps);
     return vue.createVNode("div", {
       "class": this.ns.b()
     }, [controlComponent, this.showActions && vue.createVNode("div", {

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.cjs

@@ -21,11 +21,13 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = vue3Util.useNamespace("form-mdctrl");
     vue3Util.useController(props.controller);
     const c = props.controller;
     const hasCaption = c.model.showCaption && !!c.model.caption;
     const hasHeader = hasCaption || c.model.uiactionGroup;
+    const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onActionClick = async (detail, event) => {
       await props.controller.onActionClick(detail, event);
     };
@@ -34,10 +36,18 @@ const FormMDCtrl = /* @__PURE__ */ vue.defineComponent({
       ns,
       hasCaption,
       hasHeader,
+      isDesignPreview,
       onActionClick
     };
   },
   render() {
+    if (this.isDesignPreview) {
+      return vue.createVNode("div", {
+        "class": this.ns.b()
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("preview-content")
+      }, [ibiz.i18n.t("control.form.formMDctrl.defaultText")])]);
+    }
     const {
       model
     } = this.c;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl.css

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:49px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl-header{display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-spacing-base-tight) 0;margin:calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-tight);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-color-border)}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:49px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl-header{display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-spacing-base-tight) 0;margin:calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-tight);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-form-mdctrl-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}

package/lib/control/form/form-detail/form-rawitem/form-rawitem.cjs

@@ -8,6 +8,9 @@ var runtime = require('@ibiz-template/runtime');
 require('./form-rawitem.css');
 
 "use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
 const FormRawItem = /* @__PURE__ */ vue.defineComponent({
   name: "IBizFormRawItem",
   props: {
@@ -21,6 +24,7 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = vue3Util.useNamespace("form-raw-item");
     const c = props.controller;
     const content = vue.ref("");
@@ -30,6 +34,125 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
       }
       return false;
     });
+    const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
+    const renderPreviewContent = () => {
+      var _a2;
+      let _slot;
+      const contentType = (_a2 = props.modelData.rawItem) == null ? void 0 : _a2.contentType;
+      switch (contentType) {
+        case "RAW": {
+          const caption = props.modelData.rawItem.caption || "";
+          return vue.createVNode("div", {
+            "class": ns.be("preview-content", "raw")
+          }, [caption]);
+        }
+        case "HTML": {
+          const rawItemContent = props.modelData.rawItem.content || "";
+          return vue.createVNode("div", {
+            "class": ns.be("preview-content", "html"),
+            "innerHTML": rawItemContent
+          }, null);
+        }
+        case "IMAGE":
+          return vue.createVNode("div", {
+            "class": ns.be("preview-content", "image")
+          }, [vue.createVNode("svg", {
+            "width": "56px",
+            "height": "56px",
+            "viewBox": "0 0 56 56",
+            "version": "1.1",
+            "xmlns": "http://www.w3.org/2000/svg"
+          }, [vue.createVNode("g", {
+            "stroke": "none",
+            "stroke-width": "1",
+            "fill": "none",
+            "fill-rule": "evenodd"
+          }, [vue.createVNode("g", {
+            "transform": "translate(4.000000, 0.000000)",
+            "fill": "#8c8c8c",
+            "fill-rule": "nonzero"
+          }, [vue.createVNode("rect", {
+            "opacity": "0",
+            "x": "0",
+            "y": "0",
+            "width": "48",
+            "height": "48"
+          }, null), vue.createVNode("path", {
+            "d": "M43.5,7.5 L4.5,7.5 C3.6703125,7.5 3,8.1703125 3,9 L3,39 C3,39.8296875 3.6703125,40.5 4.5,40.5 L43.5,40.5 C44.3296875,40.5 45,39.8296875 45,39 L45,9 C45,8.1703125 44.3296875,7.5 43.5,7.5 Z M15.84375,14.25 C17.4984375,14.25 18.84375,15.5953125 18.84375,17.25 C18.84375,18.9046875 17.4984375,20.25 15.84375,20.25 C14.1890625,20.25 12.84375,18.9046875 12.84375,17.25 C12.84375,15.5953125 14.1890625,14.25 15.84375,14.25 Z M39.9328125,34.7390625 C39.8671875,34.7953125 39.778125,34.828125 39.6890625,34.828125 L8.30625,34.828125 C8.1,34.828125 7.93125,34.659375 7.93125,34.453125 C7.93125,34.3640625 7.9640625,34.2796875 8.0203125,34.209375 L16.003125,24.740625 C16.134375,24.58125 16.3734375,24.5625 16.5328125,24.69375 C16.546875,24.7078125 16.565625,24.721875 16.5796875,24.740625 L21.2390625,30.271875 L28.65,21.4828125 C28.78125,21.3234375 29.0203125,21.3046875 29.1796875,21.4359375 C29.19375,21.45 29.2125,21.4640625 29.2265625,21.4828125 L39.9890625,34.2140625 C40.1109375,34.36875 40.0921875,34.6078125 39.9328125,34.7390625 Z"
+          }, null)])])])]);
+        case "VIDEO":
+          return vue.createVNode("div", {
+            "class": ns.be("preview-content", "video")
+          }, [vue.createVNode("svg", {
+            "width": "56px",
+            "height": "56px",
+            "viewBox": "0 0 56 56",
+            "version": "1.1",
+            "xmlns": "http://www.w3.org/2000/svg"
+          }, [vue.createVNode("g", {
+            "stroke": "none",
+            "stroke-width": "1",
+            "fill": "none",
+            "fill-rule": "evenodd"
+          }, [vue.createVNode("g", {
+            "transform": "translate(4.000000, 4.000000)",
+            "fill-rule": "nonzero"
+          }, [vue.createVNode("rect", {
+            "opacity": "0",
+            "x": "0",
+            "y": "0",
+            "width": "48",
+            "height": "48"
+          }, null), vue.createVNode("rect", {
+            "stroke-width": "2",
+            "x": "5",
+            "y": "5",
+            "width": "38",
+            "height": "38",
+            "rx": "2",
+            "stroke": "#1890FF"
+          }, null), vue.createVNode("path", {
+            "d": "M19.842,16.7706563 L30.3061875,22.4005313 C31.4090625,22.993875 31.822125,24.369 31.2287812,25.4717812 C30.9959833,25.9045408 30.6289074,26.2499678 30.1828125,26.4560625 L19.7187188,31.290375 C18.5818125,31.8156563 17.2343438,31.3198125 16.7090625,30.1828125 C16.571335,29.8846905 16.5,29.560211 16.5,29.2318125 L16.5,18.767625 C16.5,17.5153125 17.5153125,16.5 18.767625,16.5 C19.142625,16.5 19.5118125,16.593 19.842,16.7706563 Z",
+            "fill": "#1890FF"
+          }, null)])])])]);
+        case "PLACEHOLDER":
+          return null;
+        case "DIVIDER":
+          return vue.createVNode(vue.resolveComponent("el-divider"), {
+            "class": ns.be("preview-content", "divider")
+          }, _isSlot(_slot = ibiz.i18n.t("control.form.formRawItem.dividerText")) ? _slot : {
+            default: () => [_slot]
+          });
+        case "INFO":
+          return vue.createVNode(vue.resolveComponent("el-alert"), {
+            "class": ns.be("preview-content", "info"),
+            "title": ibiz.i18n.t("control.form.formRawItem.infoText"),
+            "type": "info",
+            "closable": false,
+            "show-icon": true
+          }, null);
+        case "WARNING":
+          return vue.createVNode(vue.resolveComponent("el-alert"), {
+            "class": ns.be("preview-content", "warning"),
+            "title": ibiz.i18n.t("control.form.formRawItem.warningText"),
+            "type": "warning",
+            "closable": false,
+            "show-icon": true
+          }, null);
+        case "ERROR":
+          return vue.createVNode(vue.resolveComponent("el-alert"), {
+            "class": ns.be("preview-content", "error"),
+            "title": ibiz.i18n.t("control.form.formRawItem.errorText"),
+            "type": "error",
+            "closable": false,
+            "show-icon": true
+          }, null);
+        default:
+          return vue.createVNode("div", {
+            "class": ns.be("preview-content", "default")
+          }, [ibiz.i18n.t("control.form.formRawItem.defaultText")]);
+      }
+    };
     vue.watch(() => c.data, async (newVal) => {
       if (newVal) {
         const rawItemModel = c.model.rawItem;
@@ -60,7 +183,9 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       content,
-      showFormDefaultContent
+      showFormDefaultContent,
+      isDesignPreview,
+      renderPreviewContent
     };
   },
   render() {
@@ -68,6 +193,13 @@ const FormRawItem = /* @__PURE__ */ vue.defineComponent({
     if (!this.controller.state.visible) {
       return null;
     }
+    if (this.isDesignPreview) {
+      return vue.createVNode("div", {
+        "class": this.ns.b()
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("preview-content")
+      }, [this.renderPreviewContent()])]);
+    }
     return vue.createVNode(vue.resolveComponent("iBizRawItem"), {
       "class": [
         this.ns.b(),

package/lib/control/form/form-detail/form-rawitem/form-rawitem.css

@@ -1 +1 @@
-.ibiz-form-raw-item{--ibiz-form-rawitem-line-height:var(--ibiz-height-control-default);--ibiz-form-rawitem-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-rawitem-font-size:var(--ibiz-font-size-regular);width:100%;height:100%}.ibiz-form-raw-item.is-form-text{padding:var(--ibiz-form-rawitem-padding);font-size:var(--ibiz-form-rawitem-font-size);line-height:var(--ibiz-form-rawitem-line-height)}.ibiz-form-raw-item.is-show-default{padding:var(--ibiz-spacing-none) 11px}
+.ibiz-form-raw-item{--ibiz-form-rawitem-line-height:var(--ibiz-height-control-default);--ibiz-form-rawitem-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-rawitem-font-size:var(--ibiz-font-size-regular);width:100%;height:100%}.ibiz-form-raw-item.is-form-text{padding:var(--ibiz-form-rawitem-padding);font-size:var(--ibiz-form-rawitem-font-size);line-height:var(--ibiz-form-rawitem-line-height)}.ibiz-form-raw-item.is-show-default{padding:var(--ibiz-spacing-none) 11px}.ibiz-form-raw-item-preview-content{display:flex;align-items:center}.ibiz-form-raw-item-preview-content__image{display:flex}.ibiz-form-raw-item-preview-content__video{display:flex}

package/lib/control/form/search-form/search-form.cjs

@@ -28,14 +28,34 @@ const SearchFormControl = /* @__PURE__ */ vue.defineComponent({
       type: Boolean,
       required: false
     },
+    data: {
+      type: Object,
+      required: false
+    },
     loadDefault: {
       type: Boolean,
       default: true
     }
   },
-  setup() {
+  setup(props) {
     const c = vue3Util.useControlController((...args) => new runtime.SearchFormController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    if (props.isSimple) {
+      c.evt.on("onMounted", () => {
+        c.setSimpleData(props.data || {});
+      });
+      vue.watch(() => props.data, (newVal) => {
+        const changeVal = newVal || {};
+        const find = Object.keys(c.data).find((key) => {
+          return changeVal[key] !== c.data[key];
+        });
+        if (find) {
+          c.setSimpleData(changeVal);
+        }
+      }, {
+        deep: true
+      });
+    }
     c.evt.on("onCreated", () => {
       const keys = Object.keys(c.details);
       keys.forEach((key) => {

package/lib/control/grid/grid/grid-control.util.cjs

@@ -59,9 +59,8 @@ function useITableEvent(c) {
         if (classList.includes("el-popper") || classList.includes("el-scrollbar") || classList.includes("el-table__row"))
           return;
         const editingRow = c.state.rows.find((item) => item.showRowEdit);
-        if (editingRow) {
+        if (editingRow)
           await c.switchRowEdit(editingRow);
-        }
       });
     }
     const timer = setInterval(() => {
@@ -77,9 +76,8 @@ function useITableEvent(c) {
         const callback = async () => {
           if (c.editShowMode === "row") {
             const editingRow = c.state.rows.find((item) => item.showRowEdit);
-            if (editingRow) {
+            if (editingRow)
               await c.switchRowEdit(editingRow);
-            }
           }
         };
         const { cleanup } = keydownUtil.useFocusByEnter(tableEl, querySelect, callback);
@@ -106,9 +104,8 @@ function useITableEvent(c) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
       if (c.editShowMode === "row") {
         const row = c.findRowState(data);
-        if (row) {
+        if (row)
           await c.switchRowEdit(row);
-        }
       }
       return;
     }
@@ -277,16 +274,23 @@ function useITableEvent(c) {
   vue.watch(
     () => c.state.sortQuery,
     (newVal) => {
+      var _a, _b;
       if (newVal) {
         const prop = c.state.sortQuery.split(",")[0];
         const sortDir = c.state.sortQuery.split(",")[1];
-        if (prop && sortDir) {
+        const column = (_a = c.model.degridColumns) == null ? void 0 : _a.find((_column) => {
+          var _a2;
+          return ((_a2 = _column.codeName) == null ? void 0 : _a2.toLowerCase()) === prop.toLowerCase();
+        });
+        if (column && sortDir) {
           const order = sortDir === "desc" ? "descending" : "ascending";
           const sortTable = () => {
             if (tableRef.value) {
               vue.nextTick(() => {
+                if (newVal !== c.state.sortQuery)
+                  return;
                 isGridUISort = true;
-                tableRef.value.sort(prop, order);
+                tableRef.value.sort(column.codeName, order);
               });
             } else {
               setTimeout(sortTable, 500);
@@ -294,6 +298,8 @@ function useITableEvent(c) {
           };
           sortTable();
         }
+      } else {
+        (_b = tableRef.value) == null ? void 0 : _b.clearSort();
       }
     }
   );

package/lib/control/grid/grid-column/grid-field-column/grid-field-column.css

@@ -1 +1 @@
-.ibiz-grid-field-column{--ibiz-grid-field-column-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-grid-field-column-clickable-text-color:var(--ibiz-color-link);--ibiz-grid-field-column-clickable-hover-text-color:var(--ibiz-color-link-hover);--ibiz-grid-field-column-color:var(--ibiz-color-text-2);display:inline-flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);width:100%;height:100%;padding:var(--ibiz-grid-field-column-cell-padding)}.ibiz-grid-field-column__text{font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-grid-field-column-color)}.ibiz-grid-field-column--clickable{cursor:pointer}.ibiz-grid-field-column--clickable .ibiz-grid-field-column__text{color:var(--ibiz-grid-field-column-clickable-text-color)}.ibiz-grid-field-column--clickable .ibiz-grid-field-column__text:hover{color:var(--ibiz-grid-field-column-clickable-hover-text-color)}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column-text-container{min-width:0}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column-toolbar-container{flex-shrink:0}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column__script{max-height:calc(var(--ibiz-control-grid-content-row-height) - 2 * var(--ibiz-grid-field-column-cell-padding));line-height:calc(var(--ibiz-control-grid-content-row-height) - 2 * var(--ibiz-grid-field-column-cell-padding))}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column__script *{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-field-column--ellipsis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-field-column--wrap{word-break:break-word;white-space:pre-wrap}.ibiz-grid-field-column.is-has-action{justify-content:space-between}.ibiz-grid-field-column-text-container{display:inline-flex;flex-grow:1;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);height:100%}.ibiz-grid-field-column-toolbar-container .ibiz-action-toolbar__item:not(.ibiz-action-toolbar__item--level-250){display:none}.ibiz-grid-field-column-toolbar-container .ibiz-action-toolbar__separator{display:none}.el-table .el-table__body-wrapper tr:hover .ibiz-action-toolbar__item{display:inline-flex}.el-table .el-table__body-wrapper tr:hover .ibiz-action-toolbar__separator{display:inline-flex}.el-table .el-table__body-wrapper tr .ibiz-action-toolbar__item.is-expand{display:inline-flex}
+.ibiz-grid-field-column{--ibiz-grid-field-column-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-grid-field-column-clickable-text-color:var(--ibiz-color-link);--ibiz-grid-field-column-clickable-hover-text-color:var(--ibiz-color-link-hover);--ibiz-grid-field-column-color:var(--ibiz-color-text-2);display:inline-flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);width:100%;height:100%;padding:var(--ibiz-grid-field-column-cell-padding)}.ibiz-grid-field-column__text{font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-grid-field-column-color)}.ibiz-grid-field-column--clickable{cursor:pointer}.ibiz-grid-field-column--clickable .ibiz-grid-field-column__text{color:var(--ibiz-grid-field-column-clickable-text-color)}.ibiz-grid-field-column--clickable .ibiz-grid-field-column__text:hover{color:var(--ibiz-grid-field-column-clickable-hover-text-color)}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column-text-container{min-width:0}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column-toolbar-container{flex-shrink:0}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column__script{max-height:calc(var(--ibiz-control-grid-content-row-height) - 2 * var(--ibiz-grid-field-column-cell-padding));line-height:calc(var(--ibiz-control-grid-content-row-height) - 2 * var(--ibiz-grid-field-column-cell-padding))}.ibiz-grid-field-column--ellipsis .ibiz-grid-field-column__script *{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-field-column--ellipsis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-field-column--wrap{word-break:break-word;white-space:pre-wrap}.ibiz-grid-field-column.is-has-action{justify-content:space-between}.ibiz-grid-field-column-text-container{display:inline-flex;flex-grow:1;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);height:100%}.ibiz-grid-field-column-toolbar-container .ibiz-action-toolbar__item:not(.ibiz-action-toolbar__item--level-250){display:none}.ibiz-grid-field-column-toolbar-container .ibiz-action-toolbar__separator{display:none}.ibiz-grid-field-column-toolbar-container .ibiz-action-toolbar__item.is-group{display:inline-flex;opacity:0}.el-table .el-table__body-wrapper tr:hover .ibiz-action-toolbar__item{display:inline-flex;opacity:1}.el-table .el-table__body-wrapper tr:hover .ibiz-action-toolbar__separator{display:inline-flex;opacity:1}.el-table .el-table__body-wrapper tr .ibiz-action-toolbar__item.is-expand{display:inline-flex;opacity:1}