@ibiz-template/vue3-components 0.7.41-alpha.112 → 0.7.41-alpha.113

package/lib/editor/radio-button-list/radio-button-list.controller.cjs

@@ -19,9 +19,14 @@ class RadioButtonListEditorController extends runtime.CodeListEditorController {
      * @type {(number | undefined)}
      */
     __publicField(this, "rowNumber");
+    /**
+     * @description 自动选中第一个
+     * @memberof RadioButtonListEditorController
+     */
+    __publicField(this, "autoSelectFirstOption", false);
   }
   async onInit() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onInit();
     if ((_a = this.editorParams) == null ? void 0 : _a.rowNumber) {
       this.rowNumber = Number(this.editorParams.rowNumber);
@@ -29,6 +34,11 @@ class RadioButtonListEditorController extends runtime.CodeListEditorController {
     if ((_b = this.editorParams) == null ? void 0 : _b.rownumber) {
       this.rowNumber = Number(this.editorParams.rownumber);
     }
+    if ((_c = this.editorParams) == null ? void 0 : _c.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption
+      );
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.41-alpha.112",
+  "version": "0.7.41-alpha.113",
   "description": "web端组件库(vue3)",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -37,10 +37,10 @@
     "@ibiz-template-plugin/data-view": "0.0.7",
     "@ibiz-template/core": "0.7.41-alpha.117",
     "@ibiz-template/devtool": "0.0.16",
-    "@ibiz-template/model-helper": "0.7.41-alpha.117",
-    "@ibiz-template/runtime": "0.7.41-alpha.117",
+    "@ibiz-template/model-helper": "0.7.41-alpha.118",
+    "@ibiz-template/runtime": "0.7.41-alpha.118",
     "@ibiz-template/theme": "0.7.39",
-    "@ibiz-template/vue3-util": "0.7.41-alpha.117",
+    "@ibiz-template/vue3-util": "0.7.41-alpha.118",
     "@ibiz-template/web-theme": "3.16.0",
     "@ibiz/model-core": "^0.1.89",
     "@imengyu/vue3-context-menu": "^1.3.5",

package/src/editor/check-box-list/checkbox-list-editor.controller.ts

@@ -24,6 +24,12 @@ export class CheckBoxListEditorController extends CodeListEditorController<IChec
    */
   rowNumber: number | undefined = undefined;
 
+  /**
+   * @description 自动选中第一个
+   * @memberof CheckBoxListEditorController
+   */
+  public autoSelectFirstOption = false;
+
   protected async onInit(): Promise<void> {
     super.onInit();
     if (this.model.appCodeListId) {
@@ -36,5 +42,10 @@ export class CheckBoxListEditorController extends CodeListEditorController<IChec
     if (this.editorParams?.rownumber) {
       this.rowNumber = Number(this.editorParams.rownumber);
     }
+    if (this.editorParams?.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption,
+      );
+    }
   }
 }

package/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.tsx

@@ -29,6 +29,7 @@ import './ibiz-checkbox-list.scss';
  * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"}
  * @editorparams {name:rendermode,parameterType:'default' | 'button',defaultvalue:'default',description:默认绘制选项框列表，当值为 'button' 时绘制按钮列表}
  * @editorparams {name:isbtnroundcorner,parameterType:boolean,defaultvalue:false,description:设置按钮是否显示圆角}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits blur | focus | enter
  */
@@ -108,13 +109,40 @@ export const IBizCheckboxList = defineComponent({
       return false;
     });
 
+    // 值分隔符
+    const valueSeparator = codeList?.valueSeparator || ',';
+
     // 代码表数据
     const items = ref<readonly CodeListItem[]>([]);
+
+    /**
+     * @description 自动选择第一条数据
+     * @returns {*}  {void}
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      const selections = c.allItems
+        ? items.value
+            .filter(_item => _item.value !== c.allItemsValue)
+            .map(_item => _item.value)
+        : [item.value];
+      emit(
+        'change',
+        c.model.valueType === 'SIMPLES'
+          ? selections
+          : selections.join(valueSeparator),
+        undefined,
+        true,
+      );
+    };
+
     watch(
       () => props.data,
       newVal => {
         c.loadCodeList(newVal).then(_codeList => {
           items.value = c.handleCodeListAllItems(_codeList);
+          autoSelectFirstOption();
         });
       },
       {
@@ -146,12 +174,6 @@ export const IBizCheckboxList = defineComponent({
 
     useCodeListListen(c.model.appCodeListId, c.context.srfappid, fn);
 
-    // 值分隔符
-    let valueSeparator = ',';
-    if (codeList && codeList.valueSeparator) {
-      valueSeparator = codeList.valueSeparator;
-    }
-
     const { useInFocusAndBlur, useInValueChange } = useAutoFocusBlur(
       props,
       emit,

package/src/editor/date-range-select/date-range-select-picker/date-range-select.tsx

@@ -207,8 +207,11 @@ export const IBizDateRangeSelect = defineComponent({
               v-model={unitValue.value}
               onChange={unitChange}
               class={ns.em('date-unit', 'editor-select')}
-              popper-class={[ns.b('popper'), semanticClass('editor.popup')]}
-              popper-style={semanticStyle('editor.popup')}
+              popper-class={[
+                ns.b('date-unit-popper'),
+                semanticClass('editor.dateUnit.popup'),
+              ]}
+              popper-style={semanticStyle('editor.dateUnit.popup')}
             >
               {units.map((item: IData) => {
                 return (
@@ -409,11 +412,11 @@ export const IBizDateRangeSelect = defineComponent({
             trigger='click'
             width='240px'
             popper-class={[
-              ns.b('popper'),
+              ns.b('date-type-popper'),
               ns.b('date-range-select'),
-              semanticClass('editor.popup'),
+              semanticClass('editor.dateType.popup'),
             ]}
-            popper-style={semanticStyle('editor.popup')}
+            popper-style={semanticStyle('editor.dateType.popup')}
           >
             {{
               reference: () => {

package/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx

@@ -272,7 +272,9 @@ export const IBizDropdown = defineComponent({
       if (c.multiple) {
         const value =
           c.allItems && !hasChildren.value
-            ? getSelectionValue(item.value).map(v => `${v}`)
+            ? items.value
+                .filter(_item => _item.value !== c.allItemsValue)
+                .map(_item => _item.value)
             : [item.value];
         emit(
           'change',

package/src/editor/dropdown-list/ibiz-tree-picker/ibiz-tree-picker.tsx

@@ -1,4 +1,5 @@
 import { ref, Ref, defineComponent, watch, onMounted } from 'vue';
+import { recursiveIterate } from '@ibiz-template/core';
 import {
   useNamespace,
   getEditorEmits,
@@ -18,6 +19,7 @@ import './ibiz-tree-picker.scss';
  * @primary
  * @editorparams {"name":"showtoolbar","parameterType":"boolean","defaultvalue":"false","description":"是否显示顶部工具栏。默认不显示，若此值为 true，则会在顶部呈现快捷工具栏，该工具栏可用于执行全选、取消全选、全展开以及全收起操作"}
  * @editorparams {"name":"valuetype","parameterType":"string","description":"编辑器的值类型"}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits blur | focus | enter | infoTextChange
  */
@@ -156,6 +158,30 @@ export const IBizTreePicker = defineComponent({
       return list;
     };
 
+    /**
+     * @description 自动选中第一项
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      const selections: string[] = [];
+      recursiveIterate(
+        { children: [item] },
+        _item => {
+          selections.push(_item.value);
+        },
+        { childrenFields: ['children'] },
+      );
+      emit(
+        'change',
+        c.model.valueType === 'SIMPLES'
+          ? selections
+          : selections.join(valueSeparator),
+        undefined,
+        true,
+      );
+    };
+
     /**
      * 加载代码表后续处理
      *
@@ -179,6 +205,7 @@ export const IBizTreePicker = defineComponent({
           break;
         }
       }
+      autoSelectFirstOption();
     };
 
     /** 加载代码表数据 */
@@ -214,7 +241,7 @@ export const IBizTreePicker = defineComponent({
           }
           defaultCheckedKeys.value = val.filter(_key =>
             codeListItems.value.find(
-              (item: IData) => item.value === _key && item.isLeaf,
+              (item: IData) => item.value === _key && !item.children,
             ),
           );
         }

package/src/editor/dropdown-list/ibiz-virtualized-list/ibiz-virtualized-list.tsx

@@ -35,6 +35,7 @@ import './ibiz-virtualized-list.scss';
  * @editorparams {name:itemstext,parameterType:string,defaultvalue:'全部',description:下拉列表框全部项文本}
  * @editorparams {"name":"valuetype","parameterType":"string","description":"编辑器的值类型"}
  * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @ignoreprops overflowMode
  */
 export const IBizVirtualizedList = defineComponent({
@@ -185,6 +186,10 @@ export const IBizVirtualizedList = defineComponent({
     // 代码项值是否为数值
     const codeItemValueNumber = ref(false);
 
+    const { getSelection, getSelectionValue } = useCodeListSelection(
+      c.allItemsValue,
+    );
+
     // 处理树数据
     const handleTreeNodes = (nodes: readonly IData[]): IData[] => {
       if (nodes.length === 0) {
@@ -221,6 +226,31 @@ export const IBizVirtualizedList = defineComponent({
       return list;
     };
 
+    /**
+     * @description 自动选中第一项
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      if (c.multiple) {
+        const value =
+          c.allItems && !hasChildren.value
+            ? getSelectionValue(item.value).map(v => `${v}`)
+            : [item.value];
+        emit(
+          'change',
+          c.model.valueType === 'SIMPLES' ? value : value.join(','),
+          undefined,
+          true,
+        );
+      } else if (editorItems && editorItems.length > 0) {
+        emit('change', item.value, editorItems[0].id!, true);
+        emit('change', item.text, undefined, true);
+      } else {
+        emit('change', item.value, undefined, true);
+      }
+    };
+
     /**
      * 加载代码表后续处理
      *
@@ -253,6 +283,7 @@ export const IBizVirtualizedList = defineComponent({
           break;
         }
       }
+      autoSelectFirstOption();
     };
 
     // 加载代码表数据与后续操作
@@ -324,10 +355,6 @@ export const IBizVirtualizedList = defineComponent({
       return list.find(item => item.value === value);
     };
 
-    const { getSelection, getSelectionValue } = useCodeListSelection(
-      c.allItemsValue,
-    );
-
     // 当前值
     const curValue = computed({
       get() {

package/src/editor/list-box/ibiz-list-box/ibiz-list-box.tsx

@@ -36,6 +36,7 @@ import './ibiz-list-box.scss';
  * @editorparams {name:allitems,parameterType:boolean,defaultvalue:false,description:列表框是否启用全部项}
  * @editorparams {name:itemstext,parameterType:string,defaultvalue:'全部',description:列表框全部项文本}
  * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits blur | focus | enter | infoTextChange
  */
@@ -124,9 +125,39 @@ export const IBizListBox = defineComponent({
 
     const editorType = editorModel.editorType;
 
+    // 值分隔符
+    const valueSeparator = codeList?.valueSeparator || ',';
+
     // 代码表数据（LISTBOX） or AC请求数据（LISTBOXPICKUP）
     const items = ref<readonly IData[]>([]);
 
+    /**
+     * @description 自动选择第一条数据
+     * @returns {*}  {void}
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      let value: string | undefined | string[];
+      if (multiple) {
+        const selections = (c as ListBoxEditorController).allItems
+          ? items.value
+              .filter(
+                _item =>
+                  _item.value !== (c as ListBoxEditorController).allItemsValue,
+              )
+              .map(_item => _item.value)
+          : [item.value];
+        value =
+          c.model.valueType === 'SIMPLES'
+            ? selections
+            : selections.join(valueSeparator);
+      } else {
+        value = item.value;
+      }
+      emit('change', value, undefined, true);
+    };
+
     // 更新列表框选项
     const loadListBoxItems = async () => {
       if (Object.is('LISTBOX', editorType)) {
@@ -134,9 +165,10 @@ export const IBizListBox = defineComponent({
         controller.loadCodeList(props.data).then(_codeList => {
           if (multiple) {
             items.value = controller.handleCodeListAllItems(_codeList);
-            return;
+          } else {
+            items.value = _codeList;
           }
-          items.value = _codeList;
+          autoSelectFirstOption();
         });
       } else if (Object.is('LISTBOXPICKUP', editorType)) {
         const controller = c as ListBoxPickerEditorController;
@@ -147,12 +179,22 @@ export const IBizListBox = defineComponent({
               value: item[controller.keyName],
               text: item[controller.textName],
             }));
+            autoSelectFirstOption();
           }
         }
       }
     };
 
-    loadListBoxItems();
+    watch(
+      () => props.data,
+      () => {
+        loadListBoxItems();
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
 
     const fn = (data: CodeListItem[] | undefined) => {
       if (data) {
@@ -185,12 +227,6 @@ export const IBizListBox = defineComponent({
       c.model.valueType,
     );
 
-    // 值分隔符
-    let valueSeparator = ',';
-    if (codeList && codeList.valueSeparator) {
-      valueSeparator = codeList.valueSeparator;
-    }
-
     const { getSelection, getSelectionValue } = useCodeListSelection(
       Object.is('LISTBOX', editorType)
         ? (c as ListBoxEditorController).allItemsValue

package/src/editor/list-box/list-box-editor.controller.ts

@@ -16,11 +16,22 @@ export class ListBoxEditorController extends CodeListEditorController<IListBox>
    */
   codeList: IAppCodeList | undefined = undefined;
 
+  /**
+   * @description 自动选中第一个
+   * @memberof ListBoxEditorController
+   */
+  public autoSelectFirstOption = false;
+
   protected async onInit(): Promise<void> {
     super.onInit();
     if (this.model.appCodeListId) {
       const app = await ibiz.hub.getApp(this.context.srfappid);
       this.codeList = app.codeList.getCodeList(this.model.appCodeListId);
     }
+    if (this.editorParams?.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption,
+      );
+    }
   }
 }

package/src/editor/list-box/list-box-picker-editor.controller.ts

@@ -48,8 +48,19 @@ export class ListBoxPickerEditorController extends EditorController<IListBoxPick
    */
   acItemProvider?: IAcItemProvider;
 
+  /**
+   * @description 自动选中第一个
+   * @memberof ListBoxPickerEditorController
+   */
+  public autoSelectFirstOption = false;
+
   protected async onInit(): Promise<void> {
     super.onInit();
+    if (this.editorParams?.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption,
+      );
+    }
     if (this.model.editorType === 'LISTBOXPICKUP') {
       if (this.model.appDEDataSetId) {
         this.interfaceName = this.model.appDEDataSetId;

package/src/editor/radio-button-list/ibiz-radio/ibiz-radio.tsx

@@ -25,6 +25,7 @@ import './ibiz-radio.scss';
  * @editorparams {name:isbtnroundcorner,parameterType:boolean,defaultvalue:false,description:设置按钮是否显示圆角}
  * @editorparams {name:itemwidth,parameterType:number,description:设置单选框列表的项宽度}
  * @editorparams {"name":"readonly","parameterType":"boolean","defaultvalue":false,"description":"设置编辑器是否为只读态"}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @ignoreprops autoFocus | overflowMode
  * @ignoreemits blur | focus | enter
  */
@@ -117,11 +118,23 @@ export const IBizRadio = defineComponent({
 
     // 代码表
     const items = ref<readonly IData[]>([]);
+
+    /**
+     * @description 自动选择第一条数据
+     * @returns {*}  {void}
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      emit('change', item.value, undefined, true);
+    };
+
     watch(
       () => props.data,
       newVal => {
         c.loadCodeList(newVal).then(_codeList => {
           items.value = _codeList;
+          autoSelectFirstOption();
         });
       },
       {

package/src/editor/radio-button-list/radio-button-list.controller.ts

@@ -16,6 +16,12 @@ export class RadioButtonListEditorController extends CodeListEditorController<IR
    */
   rowNumber: number | undefined = undefined;
 
+  /**
+   * @description 自动选中第一个
+   * @memberof RadioButtonListEditorController
+   */
+  public autoSelectFirstOption = false;
+
   protected async onInit(): Promise<void> {
     super.onInit();
     if (this.editorParams?.rowNumber) {
@@ -24,5 +30,10 @@ export class RadioButtonListEditorController extends CodeListEditorController<IR
     if (this.editorParams?.rownumber) {
       this.rowNumber = Number(this.editorParams.rownumber);
     }
+    if (this.editorParams?.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption,
+      );
+    }
   }
 }