@ibiz-template/vue3-components 0.7.1 → 0.7.2

package/es/common/data-import/data-import.d.ts

@@ -25,10 +25,8 @@ export declare const DataImport: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     onLinkClick: () => Promise<void>;
-    selectFile: () => void;
+    selectFile: () => Promise<void>;
     onCancelButtonClick: () => void;
-    onFileChange: ($event: Event) => Promise<void>;
-    inputUpLoad: import("vue").Ref<any>;
     isLoading: import("vue").Ref<boolean>;
     message: import("vue").Ref<{
         state: 'ready' | 'over' | 'error';

package/es/common/data-import/data-import.mjs

@@ -1,7 +1,7 @@
 import { isVNode, ref, createVNode, resolveComponent, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './data-import.css';
-import { asyncImportData, importData } from '@ibiz-template/runtime';
+import { downloadImportTemplate, selectAndImport } from '@ibiz-template/runtime';
 
 "use strict";
 function _isSlot(s) {
@@ -33,7 +33,6 @@ const DataImport = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("data-import");
-    const inputUpLoad = ref();
     const message = ref({
       state: "ready",
       message: ""
@@ -43,86 +42,50 @@ const DataImport = /* @__PURE__ */ defineComponent({
     const onCancelButtonClick = () => {
       props.dismiss();
     };
-    const onFileChange = async ($event) => {
-      const obj = $event.target;
-      if (!obj.files) {
+    const onLinkClick = async () => {
+      downloadImportTemplate(props.appDataEntity, props.dataImport);
+    };
+    const selectFile = async () => {
+      isLoading.value = true;
+      const result = await selectAndImport({
+        appDataEntity: props.appDataEntity,
+        dataImport: props.dataImport,
+        context: props.context
+      });
+      if (result.cancel) {
+        isLoading.value = false;
         return;
       }
-      errorMessage.value = "";
-      const selectedFile = obj.files[0];
-      obj.value = null;
-      let result;
-      isLoading.value = true;
-      try {
-        if (ibiz.env.enableMqtt) {
-          asyncImportData(selectedFile, props.appDataEntity, props.dataImport, props.context);
-          ibiz.notification.info({
-            desc: ibiz.i18n.t("component.dataImport.startImport")
+      if (!result.isAsync) {
+        if (result.errorMessage) {
+          errorMessage.value = result.errorMessage;
+        } else {
+          const {
+            success,
+            total,
+            message: _message
+          } = result;
+          const totalNum = total ? Number(total) : 0;
+          const successNum = success ? Number(success) : 0;
+          const errorNum = total - success;
+          message.value.state = _message ? "error" : "over";
+          message.value.message = _message || ibiz.i18n.t("component.dataImport.importSuccess", {
+            totalNum,
+            successNum,
+            errorNum
           });
-          onCancelButtonClick();
-          return;
-        }
-        result = await importData(selectedFile, props.appDataEntity, props.dataImport, props.context);
-        ibiz.mc.command.send({
-          srfdecodename: props.appDataEntity.codeName
-        }, "OBJECTCREATED", "DATAIMPORT");
-        const {
-          success,
-          total,
-          message: _message
-        } = result;
-        const totalNum = total ? Number(total) : 0;
-        const successNum = success ? Number(success) : 0;
-        const errorNum = total - success;
-        message.value.state = _message ? "error" : "over";
-        message.value.message = _message || ibiz.i18n.t("component.dataImport.importSuccess", {
-          totalNum,
-          successNum,
-          errorNum
-        });
-      } catch (error) {
-        if (error instanceof Error) {
-          errorMessage.value = error.message;
         }
-      } finally {
-        isLoading.value = false;
       }
-    };
-    const onLinkClick = async () => {
-      var _a, _b;
-      let templateUrl = "".concat(props.appDataEntity.codeName2.toLowerCase(), "/importtemplate");
-      if ((_a = props.dataImport) == null ? void 0 : _a.codeName) {
-        templateUrl += "?srfimporttag=".concat(props.dataImport.codeName);
+      isLoading.value = false;
+      if (result.isAsync) {
+        onCancelButtonClick();
       }
-      const res = await ibiz.net.request(templateUrl, {
-        responseType: "blob"
-      });
-      if (res.status === 200) {
-        let fileName = ((_b = res.headers["content-disposition"].split(";").find((str) => str.indexOf("filename=") !== -1)) == null ? void 0 : _b.slice(9)) || "";
-        fileName = decodeURIComponent(fileName);
-        const blob = new Blob([res.data], {
-          type: "application/vnd.ms-excel"
-        });
-        const elink = document.createElement("a");
-        elink.download = fileName;
-        elink.style.display = "none";
-        elink.href = URL.createObjectURL(blob);
-        document.body.appendChild(elink);
-        elink.click();
-        URL.revokeObjectURL(elink.href);
-        document.body.removeChild(elink);
-      }
-    };
-    const selectFile = () => {
-      inputUpLoad.value.click();
     };
     return {
       ns,
       onLinkClick,
       selectFile,
       onCancelButtonClick,
-      onFileChange,
-      inputUpLoad,
       isLoading,
       message,
       errorMessage
@@ -132,13 +95,7 @@ const DataImport = /* @__PURE__ */ defineComponent({
     let _slot, _slot2;
     return withDirectives(createVNode("div", {
       "class": this.ns.b()
-    }, [createVNode("input", {
-      "ref": "inputUpLoad",
-      "type": "file",
-      "style": "display: none",
-      "accept": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-      "onChange": this.onFileChange
-    }, null), createVNode("div", {
+    }, [createVNode("div", {
       "class": this.ns.e("caption")
     }, [ibiz.i18n.t("component.dataImport.importData")]), this.message.state === "ready" ? createVNode("div", {
       "class": this.ns.b("upload"),

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

@@ -41,16 +41,11 @@ const FormControl = /* @__PURE__ */ defineComponent({
         return;
       }
       const detailId = detail.id;
-      const detailProps = {
-        modelData: detail,
-        controller: c.details[detailId],
-        key: detail.id,
-        attrs: renderAttrs(detail)
-      };
       if (slots[detailId]) {
         return renderSlot(slots, detailId, {
-          ...slotProps,
-          ...detailProps
+          model: detail,
+          data: c.state.data,
+          value: c.state.data[detailId]
         });
       }
       const childSlots = {};
@@ -73,7 +68,10 @@ const FormControl = /* @__PURE__ */ defineComponent({
       }
       const component = resolveComponent(provider.component);
       return h(component, {
-        ...detailProps
+        modelData: detail,
+        controller: c.details[detailId],
+        key: detail.id,
+        attrs: renderAttrs(detail)
       }, childSlots);
     };
     const FormDetail = (_props) => {

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.d.ts

@@ -244,6 +244,14 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                     isCreated: boolean;
                     isMounted: boolean;
                     isDestroyed: boolean;
+                    context: {
+                        [x: string]: any;
+                        [x: symbol]: any;
+                        srfsessionid: string;
+                        srfappid: string;
+                        srfsimple?: boolean | undefined;
+                        srfpaginationviewid?: string | undefined;
+                    };
                 };
                 readonly model: {
                     layoutBodyOnly?: boolean | undefined;
@@ -3102,6 +3110,14 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                 isCreated: boolean;
                 isMounted: boolean;
                 isDestroyed: boolean;
+                context: {
+                    [x: string]: any;
+                    [x: symbol]: any;
+                    srfsessionid: string;
+                    srfappid: string;
+                    srfsimple?: boolean | undefined;
+                    srfpaginationviewid?: string | undefined;
+                };
                 srfactiveviewdata: IData | null;
             };
             readonly model: {
@@ -7269,6 +7285,14 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                     isCreated: boolean;
                     isMounted: boolean;
                     isDestroyed: boolean;
+                    context: {
+                        [x: string]: any;
+                        [x: symbol]: any;
+                        srfsessionid: string;
+                        srfappid: string;
+                        srfsimple?: boolean | undefined;
+                        srfpaginationviewid?: string | undefined;
+                    };
                     srfactiveviewdata: IData | null;
                 };
                 readonly model: {
@@ -11345,6 +11369,14 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                 isCreated: boolean;
                 isMounted: boolean;
                 isDestroyed: boolean;
+                context: {
+                    [x: string]: any;
+                    [x: symbol]: any;
+                    srfsessionid: string;
+                    srfappid: string;
+                    srfsimple?: boolean | undefined;
+                    srfpaginationviewid?: string | undefined;
+                };
             };
             readonly model: {
                 layoutBodyOnly?: boolean | undefined;
@@ -14292,6 +14324,14 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
             isCreated: boolean;
             isMounted: boolean;
             isDestroyed: boolean;
+            context: {
+                [x: string]: any;
+                [x: symbol]: any;
+                srfsessionid: string;
+                srfappid: string;
+                srfsimple?: boolean | undefined;
+                srfpaginationviewid?: string | undefined;
+            };
         };
         readonly model: {
             autoSaveMode?: number | undefined;

package/es/control/grid/grid/grid.d.ts

@@ -71,6 +71,7 @@ export declare const GridControl: import("vue").DefineComponent<{
     tableRef: import("vue").Ref<IData | undefined>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<IDEGridColumn[]>;
+    renderTableColumn: (model: IDEGridColumn, index: number) => VNode | null;
     onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
     onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;

package/es/control/grid/grid/grid.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, mergeProps, h, createVNode, createTextVNode, onUnmounted, defineComponent } from 'vue';
+import { resolveComponent, mergeProps, h, createVNode, createTextVNode, renderSlot, onUnmounted, defineComponent } from 'vue';
 import { useControlController, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
 import { ScriptFactory, GridController } from '@ibiz-template/runtime';
 import { useITableEvent, useGridHeaderStyle, useAppGridBase } from './grid-control.util.mjs';
@@ -138,7 +138,9 @@ const GridControl = /* @__PURE__ */ defineComponent({
       default: true
     }
   },
-  setup(props) {
+  setup(props, {
+    slots
+  }) {
     const c = useControlController((...args) => new GridController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const {
@@ -216,6 +218,15 @@ const GridControl = /* @__PURE__ */ defineComponent({
         "class": ns.b("batch-toolbar-items")
       }, null)])]);
     };
+    const renderTableColumn = (model, index) => {
+      if (slots[model.id]) {
+        return renderSlot(slots, model.id, {
+          model,
+          data: c.state.items
+        });
+      }
+      return renderChildColumn(c, model, renderColumns.value, index);
+    };
     onUnmounted(() => {
       zIndex.decrement();
     });
@@ -225,6 +236,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
       tableRef,
       tableData,
       renderColumns,
+      renderTableColumn,
       onDbRowClick,
       onRowClick,
       onSelectionChange,
@@ -282,7 +294,7 @@ const GridControl = /* @__PURE__ */ defineComponent({
             "type": "selection",
             "width": "55"
           }, null), this.renderColumns.map((model, index) => {
-            return renderChildColumn(this.c, model, this.renderColumns, index);
+            return this.renderTableColumn(model, index);
           })];
         },
         append: () => {

package/es/control/grid/grid/index.d.ts

@@ -58,6 +58,9 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     tableRef: import("vue").Ref<IData | undefined>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
+    renderTableColumn: (model: import("@ibiz/model-core").IDEGridColumn, index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null;
     onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
     onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;

package/es/control/tree-grid/index.d.ts

@@ -59,6 +59,9 @@ export declare const IBizTreeGridControl: import("@ibiz-template/vue3-util").Typ
     treeGirdData: import("vue").ComputedRef<IData[]>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
+    renderColumn: (model: import("@ibiz/model-core").IDEGridColumn, index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | null;
     defaultSort: import("vue").Ref<IData>;
     onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;

package/es/control/tree-grid/tree-grid.d.ts

@@ -1,4 +1,5 @@
 import { PropType, VNode } from 'vue';
+import { IDEGridColumn } from '@ibiz/model-core';
 import { ControlVO, IControlProvider, TreeGridController } from '@ibiz-template/runtime';
 export declare const TreeGridControl: import("vue").DefineComponent<{
     modelData: {
@@ -68,7 +69,8 @@ export declare const TreeGridControl: import("vue").DefineComponent<{
     tableRef: import("vue").Ref<IData | undefined>;
     treeGirdData: import("vue").ComputedRef<IData[]>;
     tableData: import("vue").Ref<IData>;
-    renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
+    renderColumns: import("vue").Ref<IDEGridColumn[]>;
+    renderColumn: (model: IDEGridColumn, index: number) => VNode | null;
     defaultSort: import("vue").Ref<IData>;
     onDbRowClick: (data: ControlVO) => void;
     onRowClick: (data: ControlVO, _column: IData, event: MouseEvent) => Promise<void>;

package/es/control/tree-grid/tree-grid.mjs

@@ -1,4 +1,4 @@
-import { computed, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
+import { computed, resolveComponent, createVNode, createTextVNode, renderSlot, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { TreeGridController } from '@ibiz-template/runtime';
 import { useRowEditPopover } from '../grid/row-edit-popover/use-row-edit-popover.mjs';
@@ -58,7 +58,9 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       default: true
     }
   },
-  setup(props) {
+  setup(props, {
+    slots
+  }) {
     const c = useControlController((...args) => new TreeGridController(...args));
     const ns = useNamespace("control-grid");
     const ns2 = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
@@ -160,6 +162,15 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
         "class": ns.b("batch-toolbar-items")
       }, null)])]);
     };
+    const renderColumn = (model, index) => {
+      if (slots[model.id]) {
+        return renderSlot(slots, model.id, {
+          model,
+          data: c.state.items
+        });
+      }
+      return renderChildColumn(c, model, renderColumns.value, index);
+    };
     return {
       c,
       ns,
@@ -168,6 +179,7 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       treeGirdData,
       tableData,
       renderColumns,
+      renderColumn,
       defaultSort,
       onDbRowClick,
       onRowClick,
@@ -227,7 +239,7 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
             "type": "selection",
             "width": "55"
           }, null), state.isCreated && this.renderColumns.map((model, index) => {
-            return renderChildColumn(this.c, model, this.renderColumns, index);
+            return this.renderColumn(model, index);
           })];
         },
         append: () => {

package/es/control/tree-grid-ex/tree-grid-ex.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, createVNode, computed, ref, watchEffect, mergeProps, h, defineComponent } from 'vue';
+import { resolveComponent, createVNode, computed, ref, watchEffect, renderSlot, mergeProps, h, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { TreeGridExController } from '@ibiz-template/runtime';
 import './tree-grid-ex.css';
@@ -173,6 +173,12 @@ const TreeGridExControl = /* @__PURE__ */ defineComponent({
   render() {
     const renderColumn = (model, index) => {
       var _a, _b;
+      if (this.$slots[model.id]) {
+        return renderSlot(this.$slots, model.id, {
+          model,
+          data: this.c.state.items
+        });
+      }
       const {
         codeName: columnName,
         width

package/es/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.css

@@ -1 +1 @@
-.ibiz-autocomplete{width:100%}.ibiz-autocomplete .ibiz-autocomplete-input{width:100%}.ibiz-autocomplete--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-input{display:block}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-input{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-input{display:block}
+.ibiz-autocomplete{width:100%}.ibiz-autocomplete__transfer-item.is-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-autocomplete .ibiz-autocomplete-input{width:100%}.ibiz-autocomplete--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default:hover .ibiz-autocomplete-input{display:block}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-autocomplete.is-show-default .ibiz-autocomplete-input{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-form-default-content{display:none}.ibiz-form-item .ibiz-autocomplete.is-show-default.is-editable .ibiz-autocomplete-input{display:block}

package/es/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.mjs

@@ -155,6 +155,8 @@ const IBizAutoComplete = /* @__PURE__ */ defineComponent({
     };
   },
   render() {
+    const overflowMode = ibiz.config.pickerEditor.overflowMode;
+    const isEllipsis = overflowMode === "ellipsis";
     const editContent = createVNode(resolveComponent("el-autocomplete"), mergeProps({
       "class": this.ns.b("input"),
       "ref": "editorRef",
@@ -164,7 +166,7 @@ const IBizAutoComplete = /* @__PURE__ */ defineComponent({
       "placeholder": this.c.placeHolder,
       "placement": "bottom",
       "clearable": this.autoCompleteClearable,
-      "popper-class": this.ns.e("transfer"),
+      "popper-class": [this.ns.e("transfer")],
       "teleported": !this.showFormDefaultContent,
       "fetch-suggestions": this.onSearch,
       "onClear": this.onClear,
@@ -173,13 +175,15 @@ const IBizAutoComplete = /* @__PURE__ */ defineComponent({
       "onInput": this.handleInput,
       "onFocus": this.onFocus,
       "onBlur": this.onBlur,
-      "onKeyup": this.handleKeyUp
+      "onKeyup": this.handleKeyUp,
+      "fit-input-width": isEllipsis
     }, this.$attrs), {
       default: ({
         item
       }) => {
         return createVNode("div", {
-          "class": this.ns.e("transfer-item")
+          "class": [this.ns.e("transfer-item"), this.ns.is("ellipsis", isEllipsis)],
+          "title": isEllipsis ? item[this.c.textName] : ""
         }, [item[this.c.textName]]);
       },
       suffix: () => {

package/es/editor/data-picker/ibiz-mpicker/ibiz-mpicker.mjs

@@ -279,6 +279,8 @@ const IBizMPicker = /* @__PURE__ */ defineComponent({
   },
   render() {
     let _slot;
+    const overflowMode = ibiz.config.pickerEditor.overflowMode;
+    const isEllipsis = overflowMode === "ellipsis";
     const editContent = [!this.readonly && createVNode(resolveComponent("el-select"), mergeProps({
       "ref": "editorRef",
       "class": [this.ns.b("select")],
@@ -297,9 +299,11 @@ const IBizMPicker = /* @__PURE__ */ defineComponent({
       "disabled": this.disabled,
       "onFocus": this.onFocus,
       "onBlur": this.onBlur,
-      "onKeyup": this.handleKeyUp
+      "onKeyup": this.handleKeyUp,
+      "fit-input-width": isEllipsis
     }, this.$attrs), _isSlot(_slot = this.items.map((item) => {
       return createVNode(resolveComponent("el-option"), {
+        "title": isEllipsis ? item[this.c.textName] : "",
         "key": item[this.c.keyName],
         "value": item[this.c.keyName],
         "label": item[this.c.textName]

package/es/editor/data-picker/ibiz-picker/ibiz-picker.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-picker .el-input .el-input__inner{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color);border-color:var(--ibiz-form-item-border-color)}.ibiz-picker .el-input .el-input__inner::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-picker .el-input .el-input__inner::placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-picker .el-input.is-disabled .el-input__inner{color:var(--ibiz-form-item-disabled-color);border-color:var(--ibiz-form-item-disabled-border-color)}.ibiz-picker ion-icon{font-size:var(--ibiz-form-item-font-size);cursor:pointer}.ibiz-picker .ibiz-picker-input{width:100%}.ibiz-picker .ibiz-picker-input .el-input__wrapper{width:100%}.ibiz-picker-input__buns-position{position:relative;display:inline-block}.ibiz-picker-input__btns{position:absolute;right:0;display:flex;height:var(--ibiz-picker-height)}.ibiz-picker-input__btns span{display:flex;flex-flow:column nowrap;justify-content:center}.ibiz-picker-input__autocomplete{display:flex}.ibiz-picker-input__autocomplete .el-autocomplete{width:100%}.ibiz-picker-input__transfer-item{padding:5px;cursor:pointer}.ibiz-picker-input__transfer-item:hover{background-color:var(--ibiz-form-item-hover-bg-color)}.ibiz-picker-input__link{width:32px;height:32px;padding:0 6px;font-size:16px}.ibiz-picker--disabled ion-icon{pointer-events:none}.ibiz-picker--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default:hover .ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default:hover .ibiz-picker-input{display:block}.ibiz-form-item .ibiz-picker.is-show-default .ibiz-picker-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-picker.is-show-default .ibiz-picker-input{display:none}.ibiz-form-item .ibiz-picker.is-show-default.is-editable .ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default.is-editable .ibiz-picker-input{display:block}
+@charset "UTF-8";.ibiz-picker .el-input .el-input__inner{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color);border-color:var(--ibiz-form-item-border-color)}.ibiz-picker .el-input .el-input__inner::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-picker .el-input .el-input__inner::placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-picker .el-input.is-disabled .el-input__inner{color:var(--ibiz-form-item-disabled-color);border-color:var(--ibiz-form-item-disabled-border-color)}.ibiz-picker ion-icon{font-size:var(--ibiz-form-item-font-size);cursor:pointer}.ibiz-picker .ibiz-picker-input{width:100%}.ibiz-picker .ibiz-picker-input .el-input__wrapper{width:100%}.ibiz-picker-input__buns-position{position:relative;display:inline-block}.ibiz-picker-input__btns{position:absolute;right:0;display:flex;height:var(--ibiz-picker-height)}.ibiz-picker-input__btns span{display:flex;flex-flow:column nowrap;justify-content:center}.ibiz-picker-input__autocomplete{display:flex}.ibiz-picker-input__autocomplete .el-autocomplete{width:100%}.ibiz-picker-input__transfer-item{padding:5px;cursor:pointer}.ibiz-picker-input__transfer-item:hover{background-color:var(--ibiz-form-item-hover-bg-color)}.ibiz-picker-input__link{width:32px;height:32px;padding:0 6px;font-size:16px}.ibiz-picker--disabled ion-icon{pointer-events:none}.ibiz-picker--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-picker__transfer-item.is-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default:hover .ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default:hover .ibiz-picker-input{display:block}.ibiz-form-item .ibiz-picker.is-show-default .ibiz-picker-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-picker.is-show-default .ibiz-picker-input{display:none}.ibiz-form-item .ibiz-picker.is-show-default.is-editable .ibiz-picker-form-default-content{display:none}.ibiz-form-item .ibiz-picker.is-show-default.is-editable .ibiz-picker-input{display:block}

package/es/editor/data-picker/ibiz-picker/ibiz-picker.mjs

@@ -196,6 +196,8 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
     };
   },
   render() {
+    const overflowMode = ibiz.config.pickerEditor.overflowMode;
+    const isEllipsis = overflowMode === "ellipsis";
     const itemContent = (item) => {
       var _a;
       const panel = (_a = this.c.deACMode) == null ? void 0 : _a.itemLayoutPanel;
@@ -212,7 +214,8 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
           this.onACSelect(item);
         }
       }, null) : createVNode("div", {
-        "class": this.ns.e("transfer-item"),
+        "class": [this.ns.e("transfer-item"), this.ns.is("ellipsis", isEllipsis)],
+        "title": isEllipsis ? item[this.c.textName] : "",
         "onClick": () => {
           this.onACSelect(item);
         }
@@ -256,13 +259,14 @@ const IBizPicker = /* @__PURE__ */ defineComponent({
       "value-key": this.c.textName,
       "placeholder": this.c.placeHolder,
       "clearable": true,
-      "popper-class": this.ns.e("transfer"),
+      "popper-class": [this.ns.e("transfer")],
       "fetch-suggestions": this.onSearch,
       "onClear": this.onClear,
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
       "onKeyup": this.handleKeyUp,
-      "disabled": this.disabled
+      "disabled": this.disabled,
+      "fit-input-width": isEllipsis
     }, this.$attrs), {
       default: ({
         item

package/es/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.mjs

@@ -211,6 +211,8 @@ const IBizPickerDropDown = /* @__PURE__ */ defineComponent({
   },
   render() {
     let _slot;
+    const overflowMode = ibiz.config.pickerEditor.overflowMode;
+    const isEllipsis = overflowMode === "ellipsis";
     const editContent = this.readonly ? this.value : createVNode(resolveComponent("el-select"), mergeProps({
       "ref": "editorRef",
       "class": [this.ns.b("select")],
@@ -230,9 +232,11 @@ const IBizPickerDropDown = /* @__PURE__ */ defineComponent({
       "onFocus": this.onFocus,
       "onBlur": this.onBlur,
       "onKeyup": this.handleKeyUp,
-      "onClick": this.onClick
+      "onClick": this.onClick,
+      "fit-input-width": isEllipsis
     }, this.$attrs), _isSlot(_slot = this.items.map((item) => {
       return createVNode(resolveComponent("el-option"), {
+        "title": isEllipsis ? item[this.c.textName] : "",
         "value": item[this.c.keyName],
         "key": item[this.c.keyName],
         "label": item[this.c.textName]

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.css

@@ -1 +1 @@
-.ibiz-dropdown{width:var(--ibiz-dropdown-width);--ibiz-dropdown-width:100%;--ibiz-dropdown-readonly-text-item-color:var(--ibiz-form-item-text-color)}.ibiz-dropdown__branch-node>.el-tree-node__content{--ibiz-color-disabled-text:var(--ibiz-color-text-0)}.ibiz-dropdown .el-select{width:100%}.ibiz-dropdown-readonly-text-item{margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-dropdown-readonly-text-item-color)}.ibiz-dropdown-readonly-text-item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.el-select-dropdown__item{width:100%;background-color:var(--ibiz-dropdown-select-option-item-bkcolor)}.ibiz-dropdown-select-option-content{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown-select-option-content .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--ibiz-editor-default-line-height)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:22px;padding:0 9px;margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:22px;color:var(--ibiz-editor-default-text-color);background-color:var(--ibiz-color-fill-0);border:1px solid transparent;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-select{display:block}
+.ibiz-dropdown{width:var(--ibiz-dropdown-width);--ibiz-dropdown-width:100%;--ibiz-dropdown-readonly-text-item-color:var(--ibiz-form-item-text-color)}.ibiz-dropdown__branch-node>.el-tree-node__content{--ibiz-color-disabled-text:var(--ibiz-color-text-0)}.ibiz-dropdown .el-select{width:100%}.ibiz-dropdown-readonly-text-item{margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-dropdown-readonly-text-item-color)}.ibiz-dropdown-readonly-text-item .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.el-select-dropdown__item{width:100%;background-color:var(--ibiz-dropdown-select-option-item-bkcolor)}.ibiz-dropdown-select-option-content{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;color:var(--ibiz-dropdown-select-option-item-color)}.ibiz-dropdown-select-option-content__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-dropdown-select-option-content .ibiz-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default:hover .ibiz-dropdown-select{display:block}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--ibiz-editor-default-line-height)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:22px;padding:0 9px;margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:22px;color:var(--ibiz-editor-default-text-color);background-color:var(--ibiz-color-fill-0);border:1px solid transparent;border-radius:var(--ibiz-border-radius-small)}.ibiz-form-item .ibiz-dropdown.is-show-default .ibiz-dropdown-select{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-form-default-content{display:none}.ibiz-form-item .ibiz-dropdown.is-show-default.is-editable .ibiz-dropdown-select{display:block}

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.mjs

@@ -233,6 +233,8 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
   },
   render() {
     let _slot;
+    const overflowMode = ibiz.config.pickerEditor.overflowMode;
+    const isEllipsis = overflowMode === "ellipsis";
     const editContent = this.hasChildren ? createVNode(resolveComponent("el-tree-select"), mergeProps({
       "ref": "editorRef",
       "modelValue": this.curValue,
@@ -248,6 +250,7 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
       "placeholder": this.c.placeHolder ? this.c.placeHolder : " ",
       "disabled": this.disabled,
       "loading": this.isLoading,
+      "fit-input-width": isEllipsis,
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
       "onKeyup": this.handleKeyUp,
@@ -255,7 +258,15 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
       "props": {
         class: this.customNodeClass
       }
-    }, this.$attrs), null) : createVNode(resolveComponent("el-select"), mergeProps({
+    }, this.$attrs), {
+      default: (node) => {
+        const data = node.data || {};
+        const label = data.label || "";
+        return createVNode("span", {
+          "title": isEllipsis ? label : ""
+        }, [label]);
+      }
+    }) : createVNode(resolveComponent("el-select"), mergeProps({
       "ref": "editorRef",
       "modelValue": this.curValue,
       "onUpdate:modelValue": ($event) => this.curValue = $event,
@@ -268,6 +279,7 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
       "placeholder": this.c.placeHolder ? this.c.placeHolder : " ",
       "disabled": this.disabled,
       "loading": this.isLoading,
+      "fit-input-width": isEllipsis,
       "onBlur": this.onBlur,
       "onFocus": this.onFocus,
       "onKeyup": this.handleKeyUp,
@@ -281,7 +293,8 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
         "style": item.bkcolor ? this.ns.cssVarBlock({
           "select-option-item-bkcolor": "".concat(item.bkcolor)
         }) : "",
-        "class": [item.cls ? item.cls : null]
+        "class": [item.cls ? item.cls : null],
+        "title": isEllipsis ? item.text : ""
       }, {
         default: () => {
           return createVNode("div", {
@@ -291,7 +304,9 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
             }) : ""
           }, [item.sysImage && createVNode(resolveComponent("iBizIcon"), {
             "icon": item.sysImage
-          }, null), item.text]);
+          }, null), createVNode("span", {
+            "class": [isEllipsis && this.ns.be("select-option-content", "text")]
+          }, [item.text])]);
         }
       });
     })) ? _slot : {