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

package/es/control/drbar/drbar.controller.mjs

@@ -468,6 +468,8 @@ class DRBarController extends ControlController {
    */
   async openNavPosView(drBarItem, isRoutePushed = false) {
     var _a;
+    if (!drBarItem.appViewId)
+      return;
     const { context, params } = this.prepareParams(drBarItem);
     context.currentSrfNav = drBarItem.id;
     this.state.srfnav = drBarItem.id;

package/es/control/drbar/drbar.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, onUnmounted, watch, createVNode, resolveComponent } from 'vue';
+import { reactive, onUnmounted, watch, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { DRBarController } from './drbar.controller.mjs';

package/es/control/drbar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DRBarControl } from './drbar.mjs';
 import { DRBarProvider } from './drbar.provider.mjs';

package/es/control/drtab/drtab-control.util.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, watchEffect, onUnmounted } from 'vue';
-import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.38-alpha.43_axios@1.7.7_lodash-es@4.17.21_qs@6.13.0_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
+import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.39_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/es/control/drtab/drtab.controller.mjs

@@ -439,6 +439,8 @@ class DRTabController extends ControlController {
   async openNavPosView(drTabPages, isRoutePushed = false, navViewKey) {
     var _a;
     const { context, params } = this.prepareParams(drTabPages);
+    if (!drTabPages.appViewId)
+      return;
     (_a = this.navPos) == null ? void 0 : _a.openView({
       key: navViewKey || drTabPages.id,
       context,

package/es/control/drtab/drtab.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, computed, onUnmounted, watch, createVNode, resolveComponent, createTextVNode } from 'vue';
+import { ref, reactive, computed, onUnmounted, watch, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace, getNestedRoutePath, route2routePath } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { hasSubRoute } from '@ibiz-template/runtime';

package/es/control/drtab/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DRTabControl } from './drtab.mjs';
 import { DRTabProvider } from './drtab.provider.mjs';

package/es/control/exp-bar/calendar-exp-bar/calendar-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './calendar-exp-bar.css';
 import { CalendarExpBarController } from '@ibiz-template/runtime';

package/es/control/exp-bar/calendar-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { CalendarExpBarControl } from './calendar-exp-bar.mjs';
 import { CalendarExpBarProvider } from './calendar-exp-bar.provider.mjs';

package/es/control/exp-bar/chart-exp-bar/chart-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './chart-exp-bar.css';
 import { ChartExpBarController } from '@ibiz-template/runtime';

package/es/control/exp-bar/chart-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { ChartExpBarControl } from './chart-exp-bar.mjs';
 import { ChartExpBarProvider } from './chart-exp-bar.provider.mjs';

package/es/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './data-view-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/data-view-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { DataViewExpBarControl } from './data-view-view-exp-bar.mjs';
 import { DataViewExpBarProvider } from './data-view-exp-bar.provider.mjs';

package/es/control/exp-bar/grid-exp-bar/grid-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './grid-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/grid-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { GridExpBarControl } from './grid-exp-bar.mjs';
 import { GridExpBarProvider } from './grid-exp-bar.provider.mjs';

package/es/control/exp-bar/list-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { ListExpBarControl } from './list-exp-bar.mjs';
 import { ListExpBarProvider } from './list-exp-bar.provider.mjs';

package/es/control/exp-bar/list-exp-bar/list-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './list-exp-bar.css';
 import { ExpBarControlController } from '@ibiz-template/runtime';

package/es/control/exp-bar/render-util.mjs

@@ -1,7 +1,7 @@
-import { createVNode, resolveComponent, h } from 'vue';
+import { resolveComponent, createVNode, h } from 'vue';
 import { debounce } from 'lodash-es';
 import { useRoute } from 'vue-router';
-import { useNamespace, onRouteChange, route2routePath } from '@ibiz-template/vue3-util';
+import { useNamespace, route2routePath, onRouteChange } from '@ibiz-template/vue3-util';
 import './render-util.css';
 
 "use strict";

package/es/control/exp-bar/tree-exp-bar/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { TreeExpBarControl } from './tree-exp-bar.mjs';
 import { TreeExpBarProvider } from './tree-exp-bar.provider.mjs';

package/es/control/exp-bar/tree-exp-bar/tree-exp-bar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import './tree-exp-bar.css';
 import { TreeExpBarController } from '@ibiz-template/runtime';

package/es/control/form/edit-form/edit-form.css

@@ -0,0 +1 @@
+.ibiz-control-edit-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}.ibiz-control-edit-form.is-item-filter .ibiz-control-form{overflow-y:auto;height:calc(100% - 32px)}

package/es/control/form/edit-form/edit-form.d.ts

@@ -1,76 +1,3 @@
-import { EditFormController, IControlProvider } from '@ibiz-template/runtime';
-import { IDEEditForm } from '@ibiz/model-core';
-import { PropType, Ref } from 'vue';
-export declare const EditFormControl: import("vue").DefineComponent<{
-    modelData: {
-        type: PropType<IDEEditForm>;
-        required: true;
-    };
-    context: {
-        type: PropType<IContext>;
-        required: true;
-    };
-    params: {
-        type: PropType<IParams>;
-        default: () => {};
-    };
-    provider: {
-        type: PropType<IControlProvider>;
-    };
-    isSimple: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    data: {
-        type: PropType<IData>;
-        required: false;
-    };
-    loadDefault: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    c: EditFormController;
-    ns: import("@ibiz-template/core").Namespace;
-    anchorList: Ref<IData[]>;
-    anchorTargetRef: Ref<IData | undefined>;
-    calcNavBarConfig: () => {
-        navBarPos: string | undefined;
-        navBarSysCss: import("@ibiz/model-core").ISysCss | undefined;
-        navBarWidth: number | undefined;
-        navBarStyle: string | undefined;
-        navbarHeight: number | undefined;
-    };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelData: {
-        type: PropType<IDEEditForm>;
-        required: true;
-    };
-    context: {
-        type: PropType<IContext>;
-        required: true;
-    };
-    params: {
-        type: PropType<IParams>;
-        default: () => {};
-    };
-    provider: {
-        type: PropType<IControlProvider>;
-    };
-    isSimple: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    data: {
-        type: PropType<IData>;
-        required: false;
-    };
-    loadDefault: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    params: IParams;
-    isSimple: boolean;
-    loadDefault: boolean;
-}, {}>;
+import { defineComponent } from 'vue';
+import './edit-form.scss';
+export declare const EditFormControl: ReturnType<typeof defineComponent>;

package/es/control/form/edit-form/edit-form.mjs

@@ -1,6 +1,8 @@
-import { isVNode, defineComponent, ref, watch, reactive, createVNode, resolveComponent } from 'vue';
+import { isVNode, ref, watch, reactive, resolveComponent, createVNode, defineComponent } from 'vue';
 import { EditFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { debounce } from 'lodash-es';
+import './edit-form.css';
 
 "use strict";
 function _isSlot(s) {
@@ -41,6 +43,8 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new EditFormController(...args), {
       excludePropsKeys: ["data"]
     });
+    const ns = useNamespace("control-edit-form");
+    const filter = ref("");
     const anchorList = ref([]);
     const anchorTargetRef = ref();
     if (props.isSimple) {
@@ -59,7 +63,6 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
         deep: true
       });
     }
-    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     c.evt.on("onCreated", () => {
       const keys = Object.keys(c.details);
       keys.forEach((key) => {
@@ -84,23 +87,42 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
         navbarHeight
       };
     };
+    const handleInput = debounce((val) => {
+      c.filterDetail(val);
+    }, 300, {
+      leading: true
+    });
     return {
       c,
       ns,
+      filter,
       anchorList,
       anchorTargetRef,
+      handleInput,
       calcNavBarConfig
     };
   },
   render() {
-    const content = createVNode(resolveComponent("iBizFormControl"), {
+    const {
+      showFormNavBar,
+      enableItemFilter
+    } = this.c.model;
+    const content = createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("item-filter", enableItemFilter)]
+    }, [enableItemFilter && createVNode(resolveComponent("el-input"), {
+      "clearable": true,
+      "modelValue": this.filter,
+      "onUpdate:modelValue": ($event) => this.filter = $event,
+      "onInput": this.handleInput,
+      "class": this.ns.e("quick-search"),
+      "placeholder": ibiz.i18n.t("app.search")
+    }, null), createVNode(resolveComponent("iBizFormControl"), {
       "ref": "anchorTargetRef",
-      "class": this.ns.b(),
       "controller": this.c
     }, {
       ...this.$slots
-    });
-    if (this.c.model.showFormNavBar) {
+    })]);
+    if (showFormNavBar) {
       return createVNode(resolveComponent("iBizAnchorContainer"), {
         "anchorList": this.anchorList.filter((item) => item.pageId === this.c.state.activeTab),
         "anchorTargetEle": this.anchorTargetRef,

package/es/control/form/edit-form/index.d.ts

@@ -1,74 +1,3 @@
-export declare const IBizEditFormControl: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
-    modelData: {
-        type: import("vue").PropType<import("@ibiz/model-core").IDEEditForm>;
-        required: true;
-    };
-    context: {
-        type: import("vue").PropType<IContext>;
-        required: true;
-    };
-    params: {
-        type: import("vue").PropType<IParams>;
-        default: () => {};
-    };
-    provider: {
-        type: import("vue").PropType<import("@ibiz-template/runtime").IControlProvider>;
-    };
-    isSimple: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    data: {
-        type: import("vue").PropType<IData>;
-        required: false;
-    };
-    loadDefault: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    c: import("@ibiz-template/runtime").EditFormController;
-    ns: import("@ibiz-template/core").Namespace;
-    anchorList: import("vue").Ref<IData[]>;
-    anchorTargetRef: import("vue").Ref<IData | undefined>;
-    calcNavBarConfig: () => {
-        navBarPos: string | undefined;
-        navBarSysCss: import("@ibiz/model-core").ISysCss | undefined;
-        navBarWidth: number | undefined;
-        navBarStyle: string | undefined;
-        navbarHeight: number | undefined;
-    };
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelData: {
-        type: import("vue").PropType<import("@ibiz/model-core").IDEEditForm>;
-        required: true;
-    };
-    context: {
-        type: import("vue").PropType<IContext>;
-        required: true;
-    };
-    params: {
-        type: import("vue").PropType<IParams>;
-        default: () => {};
-    };
-    provider: {
-        type: import("vue").PropType<import("@ibiz-template/runtime").IControlProvider>;
-    };
-    isSimple: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    data: {
-        type: import("vue").PropType<IData>;
-        required: false;
-    };
-    loadDefault: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    params: IParams;
-    isSimple: boolean;
-    loadDefault: boolean;
-}, {}>>;
+import { withInstall } from '@ibiz-template/vue3-util';
+export declare const IBizEditFormControl: ReturnType<typeof withInstall>;
 export default IBizEditFormControl;

package/es/control/form/edit-form/index.mjs

@@ -1,4 +1,4 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { EditFormProvider } from './edit-form.provider.mjs';
 import { EditFormControl } from './edit-form.mjs';

package/es/control/form/form/form.css

@@ -1 +1 @@
-.ibiz-control-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}
+.ibiz-control-form{width:100%;height:100%}

package/es/control/form/form/form.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, renderSlot, createVNode, resolveComponent, h } from 'vue';
+import { isVNode, renderSlot, createVNode, resolveComponent, h, defineComponent } from 'vue';
 import { ScriptFactory, findChildFormDetails, ControlType } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form.css';
@@ -129,7 +129,7 @@ const FormControl = /* @__PURE__ */ defineComponent({
       }
     }
     return createVNode(resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b()],
+      "class": this.ns.b(),
       "controller": this.c
     }, _isSlot(slots) ? slots : {
       default: () => [slots]

package/es/control/form/form-detail/form-button/form-button.mjs

@@ -1,8 +1,10 @@
-import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
 import { FormButtonController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './form-button.css';
 import { showTitle } from '@ibiz-template/core';
+import '../../../../util/index.mjs';
+import './form-button.css';
+import { convertBtnType } from '../../../../util/button-util/button-util.mjs';
 
 "use strict";
 const FormButton = /* @__PURE__ */ defineComponent({
@@ -43,6 +45,7 @@ const FormButton = /* @__PURE__ */ defineComponent({
     }, [createVNode(resolveComponent("el-button"), {
       "sime": "small",
       "onClick": this.controller.onClick.bind(this.controller),
+      "type": convertBtnType(this.modelData.buttonStyle),
       "loading": this.controller.state.loading,
       "disabled": this.controller.state.disabled,
       "title": showTitle(this.modelData.tooltip)

package/es/control/form/form-detail/form-button-list/form-button-list.d.ts

@@ -13,7 +13,7 @@ export declare const FormButtonList: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
-    handleClick: (e: MouseEvent, actionId: string) => Promise<void>;
+    handleClick: (id: string, e?: MouseEvent) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEFormButtonList>;

package/es/control/form/form-detail/form-button-list/form-button-list.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { resolveComponent, createVNode, defineComponent } from 'vue';
 import { FormButtonListController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-button-list.css';
@@ -17,11 +17,15 @@ const FormButtonList = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = useNamespace("form-button-list");
     const c = props.controller;
-    const handleClick = async (e, actionId) => {
-      e.stopPropagation();
-      c.doUIAction(actionId, e);
+    const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
+    const handleClick = async (id, e) => {
+      e == null ? void 0 : e.stopPropagation();
+      if (isDesignPreview)
+        return;
+      c.handleClick(id, e);
     };
     return {
       ns,

package/es/control/form/form-detail/form-button-list/index.d.ts

@@ -9,7 +9,7 @@ export declare const IBizFormButtonList: import("@ibiz-template/vue3-util").Type
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
-    handleClick: (e: MouseEvent, actionId: string) => Promise<void>;
+    handleClick: (id: string, e?: MouseEvent | undefined) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDEFormButtonList>;

package/es/control/form/form-detail/form-druipart/form-druipart.css

@@ -1 +1 @@
-.ibiz-form-druipart{position:relative;width:100%;height:100%}.ibiz-form-druipart__mask{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;color:var(--ibiz-color-primary-text);background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.ibiz-form-druipart>.el-loading-parent--relative{min-height:100px}
+.ibiz-form-druipart{position:relative;width:100%;height:100%}.ibiz-form-druipart__mask{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;color:var(--ibiz-color-primary-text);background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.ibiz-form-druipart>.el-loading-parent--relative{min-height:100px}.ibiz-form-druipart-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/es/control/form/form-detail/form-druipart/form-druipart.d.ts

@@ -13,6 +13,7 @@ export declare const FormDRUIPart: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
+    isDesignPreview: boolean;
     onCreated: (event: EventBase) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {

package/es/control/form/form-detail/form-druipart/form-druipart.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, createVNode, h } from 'vue';
+import { createVNode, resolveComponent, h, defineComponent } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import { FormDRUIPartController } from '@ibiz-template/runtime';
 import './form-druipart.css';
@@ -17,13 +17,16 @@ const FormDRUIPart = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = useNamespace("form-druipart");
     useController(props.controller);
+    const isDesignPreview = ((_a = props.controller.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onCreated = (event) => {
       props.controller.setEmbedView(event.view);
     };
     return {
       ns,
+      isDesignPreview,
       onCreated
     };
   },
@@ -31,6 +34,13 @@ const FormDRUIPart = /* @__PURE__ */ defineComponent({
     if (!this.controller.state.visible && !this.controller.state.keepAlive || !this.controller.state.viewComponentKey) {
       return null;
     }
+    if (this.isDesignPreview) {
+      return createVNode("div", {
+        "class": this.ns.b()
+      }, [createVNode("div", {
+        "class": this.ns.b("preview-content")
+      }, [ibiz.i18n.t("control.form.formDruipart.defaultText")])]);
+    }
     const viewShell = resolveComponent("IBizViewShell");
     return createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],

package/es/control/form/form-detail/form-druipart/index.d.ts

@@ -9,6 +9,7 @@ export declare const IBizFormDRUIPart: import("@ibiz-template/vue3-util").TypeWi
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
+    isDesignPreview: boolean;
     onCreated: (event: import("@ibiz-template/runtime").EventBase) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {

package/es/control/form/form-detail/form-group-panel/form-group-panel.css

@@ -1 +1 @@
-.ibiz-form-group{--ibiz-form-group-bg-color:transparent;--ibiz-form-group-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-show-more-color:var(--ibiz-color-primary);--ibiz-form-group-footer-height:35px;--ibiz-form-group-header-bg-color:transparent;--ibiz-form-group-header-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-form-group-header-margin:0 var(--ibiz-spacing-base-tight);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-header-height:49px;--ibiz-form-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-group-content-bg-color:transparent;--ibiz-form-group-content-padding:var(--ibiz-spacing-tight)}.ibiz-form-group{height:100%;background-color:var(--ibiz-form-group-bg-color);border-radius:var(--ibiz-border-radius-base)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-size);font-weight:var(--ibiz-form-group-caption-font-weight);color:var(--ibiz-form-group-caption-text-color)}.ibiz-form-group__toolbar{text-align:right}.ibiz-form-group-collapse>.ibiz-form-group-content{display:block}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group-content{display:none}.ibiz-form-group-header{display:flex;height:var(--ibiz-form-group-header-height);padding:var(--ibiz-form-group-header-padding);margin:var(--ibiz-form-group-header-margin);border-bottom:1px solid var(--ibiz-form-group-header-border-color)}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block;width:50%}.ibiz-form-group-header__right{text-align:right;display:flex;align-items:center;justify-content:flex-end}.ibiz-form-group-header__icon{cursor:pointer}.ibiz-form-group-content{width:100%;height:100%}.ibiz-form-group-content__row{width:100%;height:100%}.ibiz-form-group--show-header>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height));padding:var(--ibiz-form-group-content-padding);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-footer-height))}.ibiz-form-group--show-header.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height) - var(--ibiz-form-group-footer-height))}.ibiz-form-group-footer{height:var(--ibiz-form-group-footer-height);padding:var(--ibiz-form-group-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-show-more-color);cursor:pointer}
+.ibiz-form-group{--ibiz-form-group-bg-color:transparent;--ibiz-form-group-footer-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-form-group-show-more-color:var(--ibiz-color-primary);--ibiz-form-group-footer-height:35px;--ibiz-form-group-header-bg-color:transparent;--ibiz-form-group-header-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-form-group-header-margin:0 var(--ibiz-spacing-base-tight);--ibiz-form-group-header-border-color:var(--ibiz-color-border);--ibiz-form-group-header-height:49px;--ibiz-form-group-caption-text-color:var(--ibiz-color-text-0);--ibiz-form-group-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-form-group-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-group-content-bg-color:transparent;--ibiz-form-group-content-padding:var(--ibiz-spacing-tight)}.ibiz-form-group{height:100%;background-color:var(--ibiz-form-group-bg-color);border-radius:var(--ibiz-border-radius-base)}.ibiz-form-group__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-form-group-caption-font-size);font-weight:var(--ibiz-form-group-caption-font-weight);color:var(--ibiz-form-group-caption-text-color)}.ibiz-form-group__caption--icon{padding-right:var(--ibiz-spacing-tight)}.ibiz-form-group__toolbar{text-align:right}.ibiz-form-group-collapse>.ibiz-form-group-content{display:block}.ibiz-form-group-collapse.is-collapse>.ibiz-form-group-content{display:none}.ibiz-form-group-header{display:flex;justify-content:space-between;height:var(--ibiz-form-group-header-height);padding:var(--ibiz-form-group-header-padding);margin:var(--ibiz-form-group-header-margin);border-bottom:1px solid var(--ibiz-form-group-header-border-color)}.ibiz-form-group-header__left{overflow:hidden}.ibiz-form-group-header__left,.ibiz-form-group-header__right{display:inline-block}.ibiz-form-group-header__right{flex-shrink:0;max-width:100%;text-align:right;display:flex;align-items:center;justify-content:flex-end}.ibiz-form-group-header__icon{cursor:pointer}.ibiz-form-group-content{width:100%;height:100%}.ibiz-form-group-content__row{width:100%;height:100%}.ibiz-form-group--show-header>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height));padding:var(--ibiz-form-group-content-padding);background-color:var(--ibiz-form-group-content-bg-color)}.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-footer-height))}.ibiz-form-group--show-header.ibiz-form-group--show-more>.ibiz-form-group-content{height:calc(100% - var(--ibiz-form-group-header-height) - var(--ibiz-form-group-footer-height))}.ibiz-form-group-footer{height:var(--ibiz-form-group-footer-height);padding:var(--ibiz-form-group-footer-padding)}.ibiz-form-group-footer__show-more-button{display:inline-block;color:var(--ibiz-form-group-show-more-color);cursor:pointer}

package/es/control/form/form-detail/form-group-panel/form-group-panel.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
 import { FormGroupPanelController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-group-panel.css';
@@ -74,7 +74,7 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
     })) ? _slot : {
       default: () => [_slot]
     });
-    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass];
     if (this.modelData.showCaption === true) {
       classArr.push(this.ns.m("show-header"));
       classArr.push(this.ns.b("collapse"));
@@ -95,7 +95,10 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
         "class": [this.ns.be("header", "left")]
       }, [createVNode("div", {
         "class": [this.ns.e("caption"), ...this.controller.labelClass]
-      }, [this.captionText])]), createVNode("div", {
+      }, [this.modelData.sysImage && createVNode(resolveComponent("iBizIcon"), {
+        "class": this.ns.em("caption", "icon"),
+        "icon": this.modelData.sysImage
+      }, null), this.captionText])]), createVNode("div", {
         "class": [this.ns.be("header", "right")]
       }, [this.modelData.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
         "class": this.ns.e("toolbar"),
@@ -104,15 +107,25 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
         "onActionClick": this.onActionClick,
         "caption": this.modelData.uiactionGroup.name,
         "mode": this.modelData.actionGroupExtractMode === "ITEMS" ? "dropdown" : "buttons"
-      }, null), this.modelData.titleBarCloseMode !== void 0 && this.modelData.titleBarCloseMode !== 0 && (this.controller.state.collapse ? createVNode("ion-icon", {
-        "name": "caret-forward-sharp",
-        "class": this.ns.be("header", "icon"),
-        "title": ibiz.i18n.t("control.form.formGroup.unfold")
-      }, null) : createVNode("ion-icon", {
-        "name": "caret-down-sharp",
-        "class": this.ns.be("header", "icon"),
-        "title": ibiz.i18n.t("control.form.formGroup.fold")
-      }, null))])]);
+      }, null), this.modelData.titleBarCloseMode !== void 0 && this.modelData.titleBarCloseMode !== 0 && (this.controller.state.collapse ? createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 1024 1024",
+        "width": "1em",
+        "height": "1em",
+        "class": this.ns.be("header", "icon")
+      }, [createVNode("title", null, [ibiz.i18n.t("control.form.formGroup.unfold")]), createVNode("path", {
+        "fill": "currentColor",
+        "d": "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+      }, null)]) : createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 1024 1024",
+        "width": "1em",
+        "height": "1em",
+        "class": this.ns.be("header", "icon")
+      }, [createVNode("title", null, [ibiz.i18n.t("control.form.formGroup.fold")]), createVNode("path", {
+        "fill": "currentColor",
+        "d": "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+      }, null)]))])]);
     }
     let footer = null;
     if (this.modelData.showMoreMode === 2) {