@ibiz-template/vue3-components 0.7.34 → 0.7.38-alpha.12

package/es/editor/date-range-select/date-range-select.controller.d.ts

@@ -0,0 +1,328 @@
+import { EditorController } from '@ibiz-template/runtime';
+export declare class DateRangeSelectEditorController extends EditorController {
+    /**
+     * 是否显示时间单位选择
+     *
+     * @type {Boolean}
+     * @memberof DateRangeSelectEditorController
+     */
+    switchUnit: boolean;
+    /**
+     * 默认时间单位
+     *
+     * @type {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')}
+     * @memberof DateRangeSelectEditorController
+     */
+    defaultUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';
+    /**
+     * 抛出模式
+     * TIME模式则是抛出时间字符串 年-月-日 时:分:秒
+     * @type {('DEFAULT' | 'TIME')}
+     * @memberof DateRangeSelectEditorController
+     */
+    emitMode: 'DEFAULT' | 'TIME';
+    /**
+     * 初始化
+     *
+     * @return {*}  {Promise<void>}
+     * @memberof DateRangeSelectEditorController
+     */
+    init(): Promise<void>;
+    /**
+     * 初始化默认时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} unit
+     * @memberof DateRangeSelectEditorController
+     */
+    initDefaultDate: (unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR') => Array<string | number> | undefined;
+    /**
+     * 计算动态时间间隔转具体时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDynamicTimeToDate(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', dateType: 'DYNAMIC' | 'STATIC', _start: number, _end: number): Array<string | number>;
+    /**
+     * 时间间隔转季度
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToQuarter;
+    /**
+     * 时间转年周
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToWeek;
+    /**
+     * 时间间隔转月份
+     *
+     * @private
+     * @param {Date} current
+     * @param {number} timespan
+     * @memberof DateRangeSelectEditorController
+     */
+    private timeSpanConvertToMonth;
+    /**
+     *计算在各个时间类型下的开始结束时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {('DYNAMIC' | 'STATIC')} dateType
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number; }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDateTypesTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', dateType: 'DYNAMIC' | 'STATIC', _start: string, _end: string): {
+        start: number;
+        end: number;
+        emitStart: number | string;
+        emitEnd: number | string;
+    };
+    /**
+     * 计算完整时间格式
+     *
+     * @private
+     * @param {(string|number)} date
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedFullDateFormat;
+    /**
+     * 计算动态类型时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDynamicTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', _start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算天的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDaysSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算周的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedWeeksSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 获取指定时间所在周星期一的时间
+     *
+     * @param {Date} date
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    getDateWeekMonday(date: Date): Date;
+    /**
+     * 计算指定时间在年度内的周数
+     *
+     * @param {(Date | string)} endDate
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    getYearWeek(endDate: Date): number;
+    /**
+     * 计算月的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedMonthsSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     *计算季度的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedQuartersSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     *计算年的前后间隔
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedYearsSpace(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算静态类型时间
+     *
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} dateUnit
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedStaticTime(dateUnit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', _start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 天 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{
+     *     start: number;
+     *     end: number;
+     *   }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedDaysTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 周 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedWeeksTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 月 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedMonthsTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 季度 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedQuartersTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 计算 年 的时间范围,返回开始和结束时间的秒数
+     *
+     * @param {string} _start
+     * @param {string} _end
+     * @return {*}  {{ start: number; end: number }}
+     * @memberof DateRangeSelectEditorController
+     */
+    computedYearsTime(_start: string, _end: string): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 处理时间转文本
+     *
+     * @param {('DYNAMIC' | 'STATIC')} type
+     * @param {('DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR')} unit
+     * @param {string[]} value
+     * @param {number} start
+     * @param {number} end
+     * @memberof DateRangeSelectEditorController
+     */
+    handleTimeToText: (type: 'DYNAMIC' | 'STATIC', unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR', value: string[], start: number, end: number) => string;
+    /**
+     * 计算天的显示文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfDay;
+    /**
+     * 计算周的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfWeek;
+    /**
+     *  计算月的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfMonth;
+    /**
+     *  计算季度的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @param {number} tempStartYear
+     * @param {number} tempEndYear
+     * @param {number} tempStartMonth
+     * @param {number} tempEndMonth
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfQuarter;
+    /**
+     *  计算年的文本
+     *
+     * @private
+     * @param {number} start
+     * @param {number} end
+     * @return {*}
+     * @memberof DateRangeSelectEditorController
+     */
+    private computedTextOfYear;
+}

package/es/editor/date-range-select/date-range-select.controller.mjs

@@ -25,6 +25,13 @@ class DateRangeSelectEditorController extends EditorController {
      * @memberof DateRangeSelectEditorController
      */
     __publicField(this, "defaultUnit", "DAY");
+    /**
+     * 抛出模式
+     * TIME模式则是抛出时间字符串 年-月-日 时:分:秒
+     * @type {('DEFAULT' | 'TIME')}
+     * @memberof DateRangeSelectEditorController
+     */
+    __publicField(this, "emitMode", "DEFAULT");
     /**
      * 初始化默认时间
      *
@@ -74,7 +81,7 @@ class DateRangeSelectEditorController extends EditorController {
       }
       if (unit === "QUARTER") {
         const year = current.getFullYear();
-        return ["".concat(year, "-1"), "".concat(year, "-4")];
+        return ["".concat(year, "-1"), "".concat(year, "-12")];
       }
       if (unit === "YEAR") {
         return [current.getFullYear(), current.getFullYear()];
@@ -175,6 +182,9 @@ class DateRangeSelectEditorController extends EditorController {
       if (this.editorParams.defaultUnit) {
         this.defaultUnit = this.editorParams.defaultUnit;
       }
+      if (this.editorParams.emitMode) {
+        this.emitMode = this.editorParams.emitMode;
+      }
     }
   }
   /**
@@ -311,10 +321,87 @@ class DateRangeSelectEditorController extends EditorController {
    * @memberof DateRangeSelectEditorController
    */
   computedDateTypesTime(dateUnit, dateType, _start, _end) {
+    const tempDate = {
+      start: 0,
+      end: 0,
+      emitStart: 0,
+      emitEnd: 0
+    };
     if (dateType === "STATIC") {
-      return this.computedStaticTime(dateUnit, _start, _end);
+      const { start, end } = this.computedStaticTime(dateUnit, _start, _end);
+      Object.assign(tempDate, {
+        start,
+        end,
+        emitStart: start,
+        emitEnd: end
+      });
+    } else {
+      const { start, end } = this.computedDynamicTime(dateUnit, _start, _end);
+      Object.assign(tempDate, {
+        start,
+        end,
+        emitStart: start,
+        emitEnd: end
+      });
+    }
+    if (this.emitMode === "TIME") {
+      const tempStart = this.computedFullDateFormat(_start, dateUnit, "START");
+      const tempEnd = this.computedFullDateFormat(_end, dateUnit, "END");
+      Object.assign(tempDate, {
+        emitStart: tempStart,
+        emitEnd: tempEnd
+      });
+    }
+    return tempDate;
+  }
+  /**
+   * 计算完整时间格式
+   *
+   * @private
+   * @param {(string|number)} date
+   * @memberof DateRangeSelectEditorController
+   */
+  computedFullDateFormat(date, unit, tag) {
+    const tempDate = new Date(String(date));
+    const month = tempDate.getMonth() + 1;
+    const bigMonth = [1, 3, 5, 7, 8, 10, 12];
+    if (tag === "START") {
+      tempDate.setHours(0, 0, 0, 0);
+    } else {
+      tempDate.setHours(23, 59, 59, 0);
+    }
+    if (unit === "MONTH") {
+      if (tag === "START") {
+        tempDate.setDate(1);
+      } else if (month === 2) {
+        tempDate.setDate(29);
+      } else if (bigMonth.includes(month)) {
+        tempDate.setDate(31);
+      } else {
+        tempDate.setDate(30);
+      }
+    }
+    if (unit === "QUARTER") {
+      if (tag === "START") {
+        tempDate.setDate(1);
+      } else if (month === 2) {
+        tempDate.setDate(29);
+      } else if (bigMonth.includes(month)) {
+        tempDate.setDate(31);
+      } else {
+        tempDate.setDate(30);
+      }
+    }
+    if (unit === "YEAR") {
+      if (tag === "START") {
+        tempDate.setMonth(0);
+        tempDate.setDate(1);
+      } else {
+        tempDate.setMonth(11);
+        tempDate.setDate(31);
+      }
     }
-    return this.computedDynamicTime(dateUnit, _start, _end);
+    return tempDate.toLocaleString();
   }
   /**
    * 计算动态类型时间
@@ -492,8 +579,8 @@ class DateRangeSelectEditorController extends EditorController {
    */
   computedYearsSpace(_start, _end) {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-    const start = Number(_start) - currentYear;
-    const end = Number(_end) - currentYear;
+    const start = new Date("".concat(_start)).getFullYear() - currentYear;
+    const end = new Date("".concat(_end)).getFullYear() - currentYear;
     return {
       start,
       end

package/es/editor/date-range-select/date-range-select.provider.d.ts

@@ -0,0 +1,8 @@
+import { IEditorContainerController, IEditorProvider } from '@ibiz-template/runtime';
+import { IEditor } from '@ibiz/model-core';
+import { DateRangeSelectEditorController } from './date-range-select.controller';
+export declare class DateRangeSelectProvider implements IEditorProvider {
+    formEditor: string;
+    gridEditor: string;
+    createController(editorModel: IEditor, parentController: IEditorContainerController): Promise<DateRangeSelectEditorController>;
+}

package/es/editor/date-range-select/index.d.ts

@@ -0,0 +1,3 @@
+export { IBizDateRangeSelect } from './date-range-select-picker/date-range-select';
+export * from './date-range-select.provider';
+export * from './date-range-select.controller';

package/es/editor/dropdown-list/dropdown-list-editor.controller.d.ts

@@ -0,0 +1,31 @@
+import { CodeListEditorController } from '@ibiz-template/runtime';
+import { IDropDownList } from '@ibiz/model-core';
+/**
+ * 下拉列表框编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export declare class DropDownListEditorController extends CodeListEditorController<IDropDownList> {
+    /**
+     * 是否多选
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2022-08-25 14:33:14
+     */
+    multiple: boolean;
+    /**
+     * 是否可选可填
+     * @return {*}
+     * @author: fangzhihao
+     * @Date: 2024-03-12 14:33:14
+     */
+    forceSelection: boolean;
+    /**
+     * 预置项空白项名称
+     *
+     * @memberof DropDownListEditorController
+     */
+    blankItemName: string;
+    protected onInit(): Promise<void>;
+}

package/es/editor/dropdown-list/dropdown-list-editor.provider.d.ts

@@ -0,0 +1,18 @@
+import { IEditorContainerController, IEditorProvider } from '@ibiz-template/runtime';
+import { IDropDownList } from '@ibiz/model-core';
+import { DropDownListEditorController } from './dropdown-list-editor.controller';
+/**
+ * 多选框列表编辑器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class DropDownListEditorProvider
+ * @implements {EditorProvider}
+ */
+export declare class DropDownListEditorProvider implements IEditorProvider {
+    formEditor: string;
+    gridEditor: string;
+    constructor(editorType?: string);
+    createController(editorModel: IDropDownList, parentController: IEditorContainerController): Promise<DropDownListEditorController>;
+}

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__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:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));padding:0 var(--ibiz-spacing-tight);margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));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 .ibiz-dropdown-select .el-input__prefix-inner>:last-child{margin-right:var(--ibiz-spacing-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-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:auto;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);margin-right:var(--ibiz-spacing-extra-tight);font-size:inherit;line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:none;border-radius:var(--ibiz-spacing-base)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-content-item{flex:0 0 auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item:first-child{margin-left:calc(var(--ibiz-spacing-base-tight) - var(--ibiz-spacing-super-tight)/ 2)}.ibiz-dropdown--round .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner{flex:1 1 0;opacity:0}.ibiz-dropdown--round .ibiz-dropdown-select-option-text{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown-popper--round .el-select-dropdown__item{display:flex;align-items:center;height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));line-height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));background-color:transparent}.ibiz-dropdown-popper--round .ibiz-dropdown-select-option-content{flex:0 0 auto;width:auto;min-width:0;height:auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}
+.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 .el-input__wrapper{width:100%}.ibiz-dropdown .el-input__wrapper .el-input__prefix{max-width:calc(100% - 22px);overflow:hidden}.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:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));padding:0 var(--ibiz-spacing-tight);margin:2px 6px 2px 0;font-size:var(--ibiz-font-size-small);line-height:calc(var(--ibiz-editor-default-line-height) - var(--ibiz-spacing-tight));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 .ibiz-dropdown-select .el-input__prefix-inner>:last-child{margin-right:var(--ibiz-spacing-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-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content{display:flex;align-items:center;width:100%;height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple{height:var(--el-component-size)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-form-default-content.is-multiple .ibiz-dropdown-content-item{height:auto;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);margin-right:var(--ibiz-spacing-extra-tight);font-size:inherit;line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border:none;border-radius:var(--ibiz-spacing-base)}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-form-item .ibiz-dropdown--round.is-show-default .ibiz-dropdown-content-item{flex:0 0 auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown--round .ibiz-dropdown-readonly-text-item:first-child{margin-left:calc(var(--ibiz-spacing-base-tight) - var(--ibiz-spacing-super-tight)/ 2)}.ibiz-dropdown--round .ibiz-dropdown-select .el-select__tags{display:none}.ibiz-dropdown--round .ibiz-dropdown-select .el-input__inner{flex:1 1 0;opacity:0}.ibiz-dropdown--round .ibiz-dropdown-select-option-text{display:inline-flex;align-items:center;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-extra-tight);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}.ibiz-dropdown-popper--round .el-select-dropdown__item{display:flex;align-items:center;height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));line-height:calc(var(--ibiz-spacing-extra-loose) + var(--ibiz-spacing-extra-tight));background-color:transparent}.ibiz-dropdown-popper--round .ibiz-dropdown-select-option-content{flex:0 0 auto;width:auto;min-width:0;height:auto;padding-right:var(--ibiz-spacing-base);padding-left:var(--ibiz-spacing-base);line-height:var(--ibiz-spacing-loose);color:var(--ibiz-dropdown-select-option-item-color);background-color:var(--ibiz-dropdown-select-option-item-bkcolor);border-radius:var(--ibiz-spacing-base)}

package/es/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.d.ts

@@ -0,0 +1,87 @@
+import { Ref } from 'vue';
+import { DropDownListEditorController } from '../dropdown-list-editor.controller';
+import './ibiz-dropdown.scss';
+export declare const IBizDropdown: import("vue").DefineComponent<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: DropDownListEditorController;
+    curValue: import("vue").WritableComputedRef<string | string[] | undefined>;
+    items: Ref<readonly IData[]>;
+    customNodeClass: (data: IData, _node: Node) => string | null;
+    valueText: import("vue").ComputedRef<string>;
+    hasChildren: Ref<boolean>;
+    onBlur: (e: IData) => void;
+    onFocus: (e: IData) => void;
+    editorRef: Ref<any>;
+    treeNodes: Ref<IData[]>;
+    cssVars: import("vue").ComputedRef<Record<string, string>>;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    getCodeListItem: (text: string) => IData | undefined;
+    isEditable: Ref<boolean>;
+    setEditable: (flag: boolean) => void;
+    showFormDefaultContent: import("vue").ComputedRef<boolean>;
+    onVisibleChange: (visible: boolean) => Promise<void>;
+    isLoading: Ref<boolean>;
+    prefix: {
+        prefix?: (() => JSX.Element[] | undefined) | undefined;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: unknown, _name?: string | undefined) => boolean;
+    blur: (_event?: IData | undefined) => boolean;
+    focus: (_event?: IData | undefined) => boolean;
+    enter: (_event?: IData | undefined) => boolean;
+    infoTextChange: (_text: string) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (StringConstructor | NumberConstructor)[];
+    controller: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<DropDownListEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<import("vue").PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}>> & {
+    onFocus?: ((_event?: IData | undefined) => any) | undefined;
+    onBlur?: ((_event?: IData | undefined) => any) | undefined;
+    onChange?: ((_value: unknown, _name?: string | undefined) => any) | undefined;
+    onEnter?: ((_event?: IData | undefined) => any) | undefined;
+    onInfoTextChange?: ((_text: string) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    autoFocus: boolean;
+}, {}>;