@ibiz-template/vue3-components 0.7.4 → 0.7.5

package/es/common/rawitem/rawitem.mjs

@@ -29,7 +29,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
     }
     const rawItemType = ref(props.type || contentType || "");
     const rawItemContent = ref("");
-    let sysImage = null;
+    let sysImage;
     if (contentType === "IMAGE") {
       sysImage = rawItem.sysImage;
     }
@@ -69,7 +69,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
     const rawItemText = ref("");
     const convertValue = () => {
       if (rawItemType.value === "IMAGE") {
-        if (typeof props.content === "string") {
+        if (props.content && typeof props.content === "string") {
           if (isImg(props.content)) {
             rawItemContent.value = {
               imagePath: props.content
@@ -79,6 +79,8 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
               cssClass: props.content
             };
           }
+        } else if (sysImage) {
+          rawItemContent.value = sysImage;
         }
       }
       if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML", "RAW"].includes(rawItemType.value)) {
@@ -122,7 +124,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
     };
     convertValue();
     watch(() => props.content, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
+      if (newVal && newVal !== oldVal) {
         rawItemContent.value = newVal;
         convertValue();
       }

package/es/common/view-message/view-message.d.ts

@@ -25,6 +25,7 @@ export declare const ViewMessage: import("vue").DefineComponent<{
     ns: import("@ibiz-template/core").Namespace;
     getType: (messageType?: string) => string;
     items: import("vue").Ref<{
+        key: string;
         position: string | undefined;
         messageType?: string | undefined;
         removeMode?: number | undefined;

package/es/common/view-message/view-message.mjs

@@ -67,11 +67,15 @@ const ViewMessage = /* @__PURE__ */ defineComponent({
     });
     const handleAlertClose = (index) => {
       items.value[index].hidden = true;
-      const isHiddenCarouse = items.value.every((item) => item.hidden);
+      const isHiddenCarouse = items.value.every((item2) => item2.hidden);
       if (isHiddenCarouse) {
         isHiddenContainer.value = true;
       }
       uuid.value = createUUID();
+      const item = items.value[index];
+      if (item.removeMode === 1) {
+        localStorage.setItem(item.key, "1");
+      }
     };
     const handleChange = (index) => {
       initialIndex.value = index;

package/es/control/app-menu/app-menu.mjs

@@ -190,6 +190,9 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
         defaultActive.value = activeMenu ? activeMenu.id : "";
       }
     });
+    const fn = (data) => {
+      counterData.value = data;
+    };
     c.evt.on("onMounted", async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
@@ -214,13 +217,12 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       if (counterRefId) {
         counter = c.getCounter(counterRefId);
         if (counter) {
-          counter.onChange((data) => {
-            counterData.value = data;
-          });
+          counter.onChange(fn);
         }
       }
     });
     onUnmounted(() => {
+      counter == null ? void 0 : counter.offChange(fn);
       counter == null ? void 0 : counter.destroy();
     });
     const menuMode = computed(() => {

package/es/control/drbar/drbar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, reactive, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, 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';
@@ -44,13 +44,18 @@ const DRBarControl = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = useRouter();
     const counterData = reactive({});
+    const fn = (counter) => {
+      Object.assign(counterData, counter);
+    };
     c.evt.on("onCreated", () => {
       if (c.counter) {
-        c.counter.onChange((counter) => {
-          Object.assign(counterData, counter);
-        }, true);
+        c.counter.onChange(fn, true);
       }
     });
+    onUnmounted(() => {
+      var _a;
+      (_a = c.counter) == null ? void 0 : _a.offChange(fn);
+    });
     c.setRouter(router);
     const handleSelect = (key) => {
       c.handleSelectChange(key);

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

@@ -168,6 +168,9 @@ class DRTabController extends ControlController {
         sysImage: editItemSysImage,
         fullPath: this.routeDepth ? getNestedRoutePath(this.router.currentRoute.value, this.routeDepth) : ""
       });
+      this.state.defaultName = "";
+    } else {
+      this.state.defaultName = (dedrtabPages == null ? void 0 : dedrtabPages[0].id) || "";
     }
     dedrtabPages == null ? void 0 : dedrtabPages.forEach((item) => {
       let itemCaption = item.caption;

package/es/control/drtab/drtab.mjs

@@ -1,4 +1,4 @@
-import { isVNode, reactive, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, 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 { hasSubRoute } from '@ibiz-template/runtime';
@@ -34,13 +34,18 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = useRouter();
     const counterData = reactive({});
+    const fn = (counter) => {
+      Object.assign(counterData, counter);
+    };
     c.evt.on("onCreated", () => {
       if (c.counter) {
-        c.counter.onChange((counter) => {
-          Object.assign(counterData, counter);
-        }, true);
+        c.counter.onChange(fn, true);
       }
     });
+    onUnmounted(() => {
+      var _a;
+      (_a = c.counter) == null ? void 0 : _a.offChange(fn);
+    });
     c.setRouter(router);
     const handleTabChange = () => {
       c.handleTabChange();
@@ -60,10 +65,17 @@ const DRTabControl = /* @__PURE__ */ defineComponent({
             const {
               srfnav
             } = routePath.pathNodes[depth - 1];
+            const isRoutePushed = !!c.routeDepth && hasSubRoute(c.routeDepth);
             if (srfnav && c.state.activeName && c.state.activeName !== srfnav) {
               c.state.activeName = srfnav;
-              const isRoutePushed = !!c.routeDepth && hasSubRoute(c.routeDepth);
               c.handleTabChange(isRoutePushed);
+            } else if (!srfnav) {
+              const routeNoSub = !!c.routeDepth && !hasSubRoute(c.routeDepth);
+              const doTabChange = c.state.activeName !== c.state.defaultName || routeNoSub;
+              if (doTabChange) {
+                c.state.activeName = c.state.defaultName;
+                c.handleTabChange(isRoutePushed);
+              }
             }
           }
         }

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

@@ -34,6 +34,9 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
         pageC.onClick(event);
       }
     };
+    const fn = (data) => {
+      counterData.value = data;
+    };
     onMounted(() => {
       var _a, _b;
       const defaultSlots = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
@@ -48,14 +51,12 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
       if (counterRefId.value) {
         counter = props.controller.getCounter(counterRefId.value);
         if (counter) {
-          counter.onChange((data) => {
-            counterData.value = data;
-          });
+          counter.onChange(fn);
         }
       }
     });
     onUnmounted(() => {
-      counter == null ? void 0 : counter.destroy();
+      counter == null ? void 0 : counter.offChange(fn);
     });
     return {
       ns,

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

@@ -81,3 +81,6 @@ export declare function useAppGridBase(c: GridController, props: IGridProps): {
 export declare function useGridHeaderStyle(tableRef: IData, ns: Namespace): {
     headerCssVars: IData;
 };
+export declare function useGridDraggable(tableRef: IData, ns: Namespace, c: GridController): {
+    cleanup?: () => void;
+};

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

@@ -1,3 +1,4 @@
+import { listenJSEvent } from '@ibiz-template/core';
 import { Srfuf, ControlVO, GridRowState } from '@ibiz-template/runtime';
 import { ref, watch, nextTick, computed, watchEffect, onUnmounted } from 'vue';
 
@@ -90,6 +91,9 @@ function useITableEvent(c) {
     if (row.srfkey) {
       activeClassName += " id-".concat(row.srfkey);
     }
+    if (c.enableRowEditOrder) {
+      activeClassName += " enable-order";
+    }
     return activeClassName;
   }
   function handleHeaderCellClassName({
@@ -291,5 +295,97 @@ function useGridHeaderStyle(tableRef, ns) {
     headerCssVars
   };
 }
+function useGridDraggable(tableRef, ns, c) {
+  if (!c.enableRowEditOrder || !c.model.orderValueAppDEFieldId) {
+    return {};
+  }
+  let draggingDom = null;
+  let dragIndex = 0;
+  let draggingKey = "";
+  let draggingData = null;
+  const cleanups = [];
+  const calcSrfKeyByClass = (classList) => {
+    let result = "";
+    classList.forEach((className) => {
+      if (className.startsWith("id-")) {
+        result = className.replace("id-", "");
+      }
+    });
+    return result;
+  };
+  const setRowDragEvent = (item) => {
+    item.setAttribute("draggable", "true");
+    const cleanDragStart = listenJSEvent(
+      item,
+      "dragstart",
+      (event) => {
+        if (event.target) {
+          draggingDom = event.target;
+          event.dataTransfer.effectAllowed = "move";
+          draggingKey = calcSrfKeyByClass(draggingDom.classList);
+          dragIndex = c.state.rows.findIndex(
+            (row) => row.data.srfkey === draggingKey
+          );
+          draggingData = c.state.rows[dragIndex];
+        }
+      }
+    );
+    const cleanDragEnter = listenJSEvent(
+      item,
+      "dragenter",
+      (event) => {
+        event.preventDefault();
+        const targetDom = event.currentTarget;
+        const targetKey = calcSrfKeyByClass(targetDom.classList);
+        const targetIndex = c.state.rows.findIndex(
+          (row) => row.data.srfkey === targetKey
+        );
+        if (draggingKey === targetKey || targetIndex === -1) {
+          return;
+        }
+        c.state.rows.splice(dragIndex, 1);
+        c.state.rows.splice(targetIndex, 0, draggingData);
+        dragIndex = targetIndex;
+      }
+    );
+    const cleanDragOver = listenJSEvent(
+      item,
+      "dragover",
+      (event) => {
+        event.preventDefault();
+      }
+    );
+    const cleanDragEnd = listenJSEvent(item, "dragend", (event) => {
+      event.preventDefault();
+      c.onDragChange();
+    });
+    cleanups.push(cleanDragStart);
+    cleanups.push(cleanDragEnter);
+    cleanups.push(cleanDragOver);
+    cleanups.push(cleanDragEnd);
+  };
+  watch(
+    [() => tableRef.value, () => c.state.isLoaded],
+    (table, isLoaded) => {
+      if (!isLoaded || !table) {
+        return;
+      }
+      const grid = tableRef.value.$el;
+      if (grid) {
+        const rows = grid.getElementsByClassName("el-table__row");
+        rows.forEach((item) => {
+          setRowDragEvent(item);
+        });
+      }
+    }
+  );
+  return {
+    cleanup: () => {
+      cleanups.forEach((cleanup) => {
+        cleanup();
+      });
+    }
+  };
+}
 
-export { useAppGridBase, useAppGridPagination, useGridHeaderStyle, useITableEvent };
+export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent };

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

@@ -1,7 +1,8 @@
 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';
+import { NOOP } from '@ibiz-template/core';
+import { useITableEvent, useGridHeaderStyle, useGridDraggable, useAppGridBase } from './grid-control.util.mjs';
 import './grid.css';
 import { useRowEditPopover } from '../row-edit-popover/use-row-edit-popover.mjs';
 import '../../../util/index.mjs';
@@ -164,6 +165,9 @@ const GridControl = /* @__PURE__ */ defineComponent({
     const {
       headerCssVars
     } = useGridHeaderStyle(tableRef, ns);
+    const {
+      cleanup = NOOP
+    } = useGridDraggable(tableRef, ns, c);
     const renderNoData = () => {
       var _a;
       const {
@@ -229,6 +233,9 @@ const GridControl = /* @__PURE__ */ defineComponent({
     };
     onUnmounted(() => {
       zIndex.decrement();
+      if (cleanup !== NOOP) {
+        cleanup();
+      }
     });
     return {
       c,

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

@@ -4,7 +4,7 @@ import '../grid-column/index.mjs';
 import { IBizRowEditPopover } from '../row-edit-popover/row-edit-popover.mjs';
 import { GridControl } from './grid.mjs';
 import { GridProvider } from './grid.provider.mjs';
-export { useAppGridBase, useAppGridPagination, useGridHeaderStyle, useITableEvent } from './grid-control.util.mjs';
+export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid-control.util.mjs';
 import { IBizGridFieldColumn } from '../grid-column/grid-field-column/index.mjs';
 import { IBizGridUAColumn } from '../grid-column/grid-ua-column/index.mjs';
 import { IBizGridFieldEditColumn } from '../grid-column/grid-field-edit-column/index.mjs';

package/es/control/grid/grid-column/grid-field-column/grid-field-column.d.ts

@@ -22,6 +22,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;
+    items: import("vue").Ref<readonly IData[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: typeof GridFieldColumnController;

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -1,5 +1,5 @@
 import { computed, ref, resolveComponent, createVNode, defineComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useCodeListListen } from '@ibiz-template/vue3-util';
 import './grid-field-column.css';
 import { GridFieldColumnController, GridRowState, ValueExUtil } from '@ibiz-template/runtime';
 import { isNotNil } from 'ramda';
@@ -51,6 +51,16 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     const onActionClick = async (detail, event) => {
       await props.controller.onActionClick(detail, props.row, event);
     };
+    const items = ref([]);
+    if (props.controller.codeList) {
+      items.value = props.controller.codeListItems;
+    }
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(props.controller.model.appCodeListId, props.controller.context.srfappid, fn);
     return {
       ns,
       onCellClick,
@@ -62,7 +72,8 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
       formatValue,
       codeListValue,
       tooltip,
-      zIndex
+      zIndex,
+      items
     };
   },
   render() {
@@ -85,7 +96,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     } else if (c.codeList) {
       content = createVNode(resolveComponent("iBizCodeList"), {
         "class": this.ns.e("text"),
-        "codeListItems": c.codeListItems,
+        "codeListItems": this.items,
         "codeList": c.codeList,
         "value": this.codeListValue,
         "onClick": this.onTextClick,

package/es/control/grid/grid-column/grid-field-column/index.d.ts

@@ -19,6 +19,7 @@ export declare const IBizGridFieldColumn: import("@ibiz-template/vue3-util").Typ
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;
+    items: import("vue").Ref<readonly IData[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: typeof import("@ibiz-template/runtime").GridFieldColumnController;

package/es/control/grid/index.mjs

@@ -1,6 +1,6 @@
 export { IBizGridControl } from './grid/index.mjs';
 import './grid-column/index.mjs';
-export { useAppGridBase, useAppGridPagination, useGridHeaderStyle, useITableEvent } from './grid/grid-control.util.mjs';
+export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid/grid-control.util.mjs';
 export { IBizGridFieldColumn } from './grid-column/grid-field-column/index.mjs';
 export { IBizGridUAColumn } from './grid-column/grid-ua-column/index.mjs';
 export { IBizGridFieldEditColumn } from './grid-column/grid-field-edit-column/index.mjs';

package/es/control/index.mjs

@@ -25,7 +25,7 @@ export { IBizMapControl } from './map/index.mjs';
 export { IBizReportPanelControl } from './report-panel/index.mjs';
 export { IBizGanttControl } from './gantt/index.mjs';
 export { IBizContextMenuControl } from './context-menu/index.mjs';
-export { useAppGridBase, useAppGridPagination, useGridHeaderStyle, useITableEvent } from './grid/grid/grid-control.util.mjs';
+export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './grid/grid/grid-control.util.mjs';
 export { IBizGridControl } from './grid/grid/index.mjs';
 export { IBizGridFieldColumn } from './grid/grid-column/grid-field-column/index.mjs';
 export { IBizGridUAColumn } from './grid/grid-column/grid-ua-column/index.mjs';

package/es/control/tree/tree.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, reactive, watch, computed, nextTick, resolveComponent, createVNode, onMounted, onUnmounted, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, ref, reactive, onUnmounted, watch, computed, nextTick, resolveComponent, createVNode, onMounted, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import { debounce } from 'lodash-es';
@@ -69,16 +69,21 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new TreeController(...args));
     const cascadeSelect = ref(false);
     const counterData = reactive({});
+    const fn = (counter) => {
+      Object.assign(counterData, counter);
+    };
     c.evt.on("onCreated", () => {
       if (c.counter) {
-        c.counter.onChange((counter) => {
-          Object.assign(counterData, counter);
-        }, true);
+        c.counter.onChange(fn, true);
       }
       if (c.controlParams.cascadeselect) {
         cascadeSelect.value = true;
       }
     });
+    onUnmounted(() => {
+      var _a;
+      (_a = c.counter) == null ? void 0 : _a.offChange(fn);
+    });
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const treeRef = ref(null);
     const treeviewRef = ref(null);

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

@@ -166,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,

package/es/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.mjs

@@ -1,5 +1,5 @@
 import { isVNode, computed, ref, watch, resolveComponent, mergeProps, createVNode, defineComponent } from 'vue';
-import { getCheckboxListProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { getCheckboxListProps, getEditorEmits, useNamespace, useCodeListListen, useFocusAndBlur } from '@ibiz-template/vue3-util';
 import { isNil } from 'ramda';
 import './ibiz-checkbox-list.css';
 
@@ -38,6 +38,12 @@ const IBizCheckboxList = /* @__PURE__ */ defineComponent({
       }
       return "str";
     });
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     let valueSeparator = ",";
     if (codeList && codeList.valueSeparator) {
       valueSeparator = codeList.valueSeparator;

package/es/editor/code/monaco-editor/monaco-editor.mjs

@@ -33,6 +33,15 @@ const IBizCode = /* @__PURE__ */ defineComponent({
     }, {
       immediate: true
     });
+    watch(() => props.readonly, (newVal) => {
+      if (editor) {
+        editor.updateOptions({
+          readOnly: newVal
+        });
+      }
+    }, {
+      immediate: true
+    });
     const codeEditBox = ref();
     const editorInit = () => {
       nextTick(() => {
@@ -56,8 +65,11 @@ const IBizCode = /* @__PURE__ */ defineComponent({
               minimap: {
                 enabled: true
               },
-              readOnly: false,
+              readOnly: props.readonly,
               // 只读
+              readOnlyMessage: {
+                value: "\u5F53\u524D\u4E3A\u53EA\u8BFB\u6A21\u5F0F\uFF0C\u4E0D\u53EF\u7F16\u8F91"
+              },
               fontSize: 16,
               // 字体大小
               scrollBeyondLastLine: false,

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

@@ -259,7 +259,7 @@ 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,

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

@@ -1,5 +1,5 @@
 import { isVNode, ref, computed, watch, nextTick, onMounted, onUnmounted, resolveComponent, mergeProps, createVNode, defineComponent } from 'vue';
-import { getDropdownProps, getEditorEmits, useNamespace, useClickOutside } from '@ibiz-template/vue3-util';
+import { getDropdownProps, getEditorEmits, useNamespace, useCodeListListen, useClickOutside } from '@ibiz-template/vue3-util';
 import './ibiz-dropdown.css';
 
 "use strict";
@@ -197,6 +197,12 @@ const IBizDropdown = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     onMounted(() => {
       if (editorRef.value) {
         funcs = useClickOutside(editorRef, async (_evt) => {

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

@@ -1,5 +1,5 @@
 import { isVNode, computed, ref, watch, resolveComponent, mergeProps, createVNode, defineComponent } from 'vue';
-import { getListBoxProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { getListBoxProps, getEditorEmits, useNamespace, useCodeListListen, useFocusAndBlur } from '@ibiz-template/vue3-util';
 import { isNil } from 'ramda';
 import './ibiz-list-box.css';
 
@@ -52,6 +52,12 @@ const IBizListBox = /* @__PURE__ */ defineComponent({
       }
     };
     loadListBoxItems();
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     const currentMode = computed(() => {
       if (codeList && codeList.orMode) {
         return codeList.orMode.toLowerCase();

package/es/editor/radio-button-list/ibiz-radio/ibiz-radio.mjs

@@ -1,5 +1,5 @@
 import { isVNode, ref, watch, computed, resolveComponent, mergeProps, createVNode, defineComponent } from 'vue';
-import { getRadioProps, getEditorEmits, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { getRadioProps, getEditorEmits, useNamespace, useCodeListListen, useFocusAndBlur } from '@ibiz-template/vue3-util';
 import './ibiz-radio.css';
 import { notNilEmpty } from 'qx-util';
 
@@ -39,6 +39,12 @@ const IBizRadio = /* @__PURE__ */ defineComponent({
       immediate: true,
       deep: true
     });
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     const valueText = computed(() => {
       var _a;
       return ((_a = items.value.find((item) => item.value == props.value)) == null ? void 0 : _a.text) || "";

package/es/editor/span/span/span.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, computed, resolveComponent, createVNode, defineComponent } from 'vue';
-import { getSpanProps, useNamespace, useFocusAndBlur } from '@ibiz-template/vue3-util';
+import { getSpanProps, useNamespace, useCodeListListen, useFocusAndBlur } from '@ibiz-template/vue3-util';
 import './span.css';
 import { isNil } from 'ramda';
 import { DataTypes } from '@ibiz-template/core';
@@ -95,6 +95,12 @@ const IBizSpan = /* @__PURE__ */ defineComponent({
         deep: true
       });
     }
+    const fn = (data) => {
+      if (data) {
+        items.value = data;
+      }
+    };
+    useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
     const {
       componentRef: editorRef
     } = useFocusAndBlur(() => emit("focus"), () => emit("blur"));

package/es/index.mjs

@@ -17,7 +17,7 @@ export { IBizSplitTrigger } from './common/split-trigger/split-trigger.mjs';
 export { IBizSortBar } from './common/sort-bar/sort-bar.mjs';
 export { IBizAppMenuControl } from './control/app-menu/index.mjs';
 export { IBizAppMenuIconViewControl } from './control/app-menu-icon-view/index.mjs';
-export { useAppGridBase, useAppGridPagination, useGridHeaderStyle, useITableEvent } from './control/grid/grid/grid-control.util.mjs';
+export { useAppGridBase, useAppGridPagination, useGridDraggable, useGridHeaderStyle, useITableEvent } from './control/grid/grid/grid-control.util.mjs';
 export { IBizGridControl } from './control/grid/grid/index.mjs';
 export { IBizGridFieldColumn } from './control/grid/grid-column/grid-field-column/index.mjs';
 export { IBizGridUAColumn } from './control/grid/grid-column/grid-ua-column/index.mjs';