@opentiny/vue-renderless 3.9.2 → 3.10.0

package/date-range/vue.js

@@ -38,7 +38,8 @@ import {
   setTimeFormat,
   computerBtnDisabled,
   computerLabel,
-  computerEnableYearArrow
+  computerEnableYearArrow,
+  watchPickerVisible
 } from "./index";
 import { nextMonth, extractDateFormat, extractTimeFormat } from "../common/deps/date-util";
 const api = [
@@ -65,7 +66,7 @@ const api = [
   "handleDateChange",
   "handleMaxTimeClose"
 ];
-const initState = ({ reactive, computed, api: api2 }) => {
+const initState = ({ reactive, computed, api: api2, constants }) => {
   const state = reactive({
     popperElm: null,
     popperClass: "",
@@ -74,8 +75,13 @@ const initState = ({ reactive, computed, api: api2 }) => {
     defaultTime: null,
     minDate: "",
     maxDate: "",
-    leftDate: /* @__PURE__ */ new Date(),
-    rightDate: nextMonth(/* @__PURE__ */ new Date()),
+    shortcutType: "",
+    shortcutText: "",
+    singleSelect: false,
+    minRangeDate: constants.startDate,
+    maxRangeDate: constants.endDate,
+    leftDate: new Date(),
+    rightDate: nextMonth(new Date()),
     rangeState: { endDate: null, selecting: false, row: null, column: null },
     showTime: false,
     format: "",
@@ -118,8 +124,9 @@ const initWatch = ({ watch, state, api: api2 }) => {
   watch(() => state.value, api2.watchValue);
   watch(() => state.defaultValue, api2.watchDefault);
   watch(() => state.showTime, api2.setTimeFormat);
+  watch(() => state.visible, api2.watchPickerVisible);
 };
-const initApi = ({ api: api2, state, t, vm, nextTick, refs, emit }) => {
+const initApi = ({ api: api2, state, t, vm, nextTick, emit, constants }) => {
   Object.assign(api2, {
     t,
     state,
@@ -148,7 +155,7 @@ const initApi = ({ api: api2, state, t, vm, nextTick, refs, emit }) => {
     handleDateChange: handleDateChange({ state, t }),
     handleTimeChange: handleTimeChange({ state, t, vm }),
     watchMinDate: watchMinDate({ state, t, vm }),
-    handleTimeInput: handleTimeInput({ nextTick, refs, state, t }),
+    handleTimeInput: handleTimeInput({ state, t }),
     watchMaxTimePickerVisible: watchMaxTimePickerVisible({ nextTick, state, vm }),
     watchMinTimePickerVisible: watchMinTimePickerVisible({ nextTick, state, vm }),
     handleDateInput: handleDateInput({ state, t }),
@@ -159,16 +166,17 @@ const initApi = ({ api: api2, state, t, vm, nextTick, refs, emit }) => {
     setTimeFormat: setTimeFormat({ nextTick, vm, state }),
     handleConfirm: handleConfirm({ api: api2, emit, state }),
     handleRangePick: handleRangePick({ api: api2, state, t }),
-    handleShortcutClick: handleShortcutClick(api2),
+    handleShortcutClick: handleShortcutClick(state, api2),
     computerBtnDisabled: computerBtnDisabled({ state, api: api2 }),
-    computerEnableYearArrow: computerEnableYearArrow(state)
+    computerEnableYearArrow: computerEnableYearArrow(state),
+    watchPickerVisible: watchPickerVisible({ state, constants })
   });
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, refs, emit: $emit, vm }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, constants }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2 });
-  initApi({ api: api2, state, t, vm, nextTick, refs, emit });
+  const state = initState({ reactive, computed, api: api2, constants });
+  initApi({ api: api2, state, t, vm, nextTick, emit, constants });
   initWatch({ watch, state, api: api2 });
   return api2;
 };

package/date-table/index.js

@@ -1,6 +1,14 @@
 import "../chunk-PKUHTIDK.js";
 import { formatDate } from "../common/deps/date-util";
-import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, prevDate, nextDate, isDate, clearTime } from "../common/deps/date-util";
+import {
+  getFirstDayOfMonth,
+  getDayCountOfMonth,
+  getWeekNumber,
+  prevDate,
+  nextDate,
+  isDate,
+  clearTime
+} from "../common/deps/date-util";
 import { DATEPICKER } from "../common";
 const formatJudg = ({ day, offset, j, i, cell, count, dateCountOfLastMonth }) => {
   const nodfpm = day + offset < 0 ? 7 + day + offset : day + offset;
@@ -50,7 +58,7 @@ const getSelected = ({ props, cell, format, t, cellDate, selectedDate }) => {
   return selected;
 };
 const getCell = ({ state, props }) => (row, i, j) => {
-  const now = getDateTimestamp(/* @__PURE__ */ new Date());
+  const now = getDateTimestamp(new Date());
   let cell = row[props.showWeekNumber ? j + 1 : j];
   if (!cell) {
     cell = {
@@ -98,7 +106,10 @@ const getRows = ({ api, props, state, t, vm }) => () => {
   const date = new Date(state.year, state.month, 1);
   let day = getFirstDayOfMonth(date);
   const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
-  const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth() === 0 ? 11 : date.getMonth() - 1);
+  const dateCountOfLastMonth = getDayCountOfMonth(
+    date.getFullYear(),
+    date.getMonth() === 0 ? 11 : date.getMonth() - 1
+  );
   day = day === 0 ? 7 : day;
   const offset = state.offsetDay;
   const rows = state.tableRows;
@@ -107,21 +118,33 @@ const getRows = ({ api, props, state, t, vm }) => () => {
   const cellClassName = props.cellClassName;
   const selectedDate = props.selectionMode === DATEPICKER.Dates ? coerceTruthyValueToArray(props.value) : [];
   let count = 1;
+  const isFunction = props.formatWeeks instanceof Function;
+  const arr = [];
   for (let i = 0; i < 6; i++) {
     const row = rows[i];
-    if (props.showWeekNumber && !row[0]) {
+    if (props.showWeekNumber) {
       row[0] = {
         type: DATEPICKER.Week,
         text: getWeekNumber(nextDate(startDate, i * 7 + 1))
       };
     }
+    arr[i] = [];
     for (let j = 0; j < 7; j++) {
       const { cell, cellDate } = api.getCell(row, i, j, DATEPICKER.Normal, props);
       count = doCount({ i, day, offset, j, cell, count, dateCountOfLastMonth, dateCountOfMonth });
       cell.disabled = typeof disabledDate === "function" && disabledDate(cellDate);
-      cell.selected = getSelected({ props, cell, api, format: DATEPICKER.DateFormats.date, t, cellDate, selectedDate });
+      cell.selected = getSelected({
+        props,
+        cell,
+        api,
+        format: DATEPICKER.DateFormats.date,
+        t,
+        cellDate,
+        selectedDate
+      });
       cell.customClass = typeof cellClassName === "function" && cellClassName(cellDate);
       vm.$set(row, props.showWeekNumber ? j + 1 : j, cell);
+      arr[i].push(cellDate);
     }
     if (props.selectionMode === DATEPICKER.Week) {
       const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
@@ -130,6 +153,16 @@ const getRows = ({ api, props, state, t, vm }) => () => {
       Object.assign(row[end], { inRange: isWeekActive2, end: isWeekActive2 });
     }
   }
+  const res = [];
+  for (let i = 0; i < arr.length; i++) {
+    res.push(arr[i][0].getFullYear() + "/" + (arr[i][0].getMonth() + 1) + "/" + arr[i][0].getDate());
+  }
+  if (props.showWeekNumber && isFunction) {
+    for (let i = 0; i < 6; i++) {
+      let val = getWeekNumber(nextDate(startDate, i * 7 + 1));
+      rows[i][0].text = props.formatWeeks(val, res);
+    }
+  }
   return rows;
 };
 const watchMinDate = ({ api, props }) => (value, oldvalue) => {
@@ -297,8 +330,8 @@ const handleClick = ({ api, emit, props, state }) => (event) => {
   const newDate = api.getDateOfCell(row, column);
   if (props.selectionMode === DATEPICKER.Range) {
     if (!props.rangeState.selecting) {
-      emit("pick", { minDate: newDate, maxDate: null });
       props.rangeState.selecting = true;
+      emit("pick", { minDate: newDate, maxDate: null });
     } else {
       if (newDate >= props.minDate) {
         emit("pick", { minDate: props.minDate, maxDate: newDate });

package/date-table/vue.js

@@ -25,9 +25,9 @@ const initState = ({ reactive, computed, api: api2, props }) => {
     constWeeks: ["sun", "mon", "tue", "wed", "thu", "fri", "sat"],
     rows: computed(() => api2.getRows()),
     weeks: computed(() => api2.getWeeks()),
-    month: computed(() => props.date.getMonth()),
+    month: computed(() => !Array.isArray(props.date) && props.date.getMonth()),
     offsetDay: computed(() => api2.getOffsetDay()),
-    year: computed(() => props.date.getFullYear()),
+    year: computed(() => !Array.isArray(props.date) && props.date.getFullYear()),
     startDate: computed(() => getStartDateOfMonth(state.year, state.month)),
     date: props.value
   });

package/dept/index.js

@@ -154,7 +154,7 @@ const cancel = ({ emit, state, deptState }) => () => {
 };
 const initService = ({ props, service }) => {
   const { fetchDeptList, fetchDeptByValue, fetchDept } = service || {};
-  const noopFnCreator = (propName) => () => Promise.reject(new Error(`[TINY Error][Dept] Prop ${propName} is not configured`));
+  const noopFnCreator = (propName) => () => Promise.reject(new Error(`[TINY Error][Dept] Prop ${propName} is mandatory when the framework service is not used`));
   return {
     fetchDeptList: props.fetchDeptList || fetchDeptList || noopFnCreator("fetchDeptList"),
     fetchDeptByValue: props.fetchDeptByValue || fetchDeptByValue || noopFnCreator("fetchDeptByValue"),

package/detail-page/vue.js

@@ -15,7 +15,15 @@ import {
   computedSetLabelTitle,
   computedSetDialogTitle
 } from "./index";
-const api = ["state", "valueChange", "showDialog", "closeDialog", "checkAllHander", "saveHandler", "checkValueHiddenItem"];
+const api = [
+  "state",
+  "valueChange",
+  "showDialog",
+  "closeDialog",
+  "checkAllHander",
+  "saveHandler",
+  "checkValueHiddenItem"
+];
 const initState = ({ reactive, computed, api: api2, props }) => {
   const state = reactive({
     value: props.modelValue,

package/dialog-box/index.js

@@ -26,7 +26,15 @@ const computedStyle = ({ props, state }) => () => {
   }
   return style;
 };
-const watchVisible = ({ api, constants, emit, nextTick, parent, props, refs, state }) => (val) => {
+const computedBodyStyle = ({ props }) => () => {
+  const style = {};
+  let { maxHeight } = props;
+  if (maxHeight) {
+    style.maxHeight = "none";
+  }
+  return style;
+};
+const watchVisible = ({ api, constants, emit, nextTick, parent, props, vm, state }) => (val) => {
   const el = parent.$el;
   if (props.lockScroll) {
     val ? api.showScrollbar() : api.hideScrollbar();
@@ -39,7 +47,7 @@ const watchVisible = ({ api, constants, emit, nextTick, parent, props, refs, sta
     emit("open");
     on(el, "scroll", api.updatePopper);
     nextTick(() => {
-      refs.dialog.scrollTop = 0;
+      vm.$refs.dialog.scrollTop = 0;
     });
     if (props.appendToBody) {
       document.body.appendChild(el);
@@ -196,6 +204,7 @@ export {
   afterLeave,
   computedAddUnit,
   computedAnimationName,
+  computedBodyStyle,
   computedStyle,
   handleCancel,
   handleClose,

package/dialog-box/vue.js

@@ -17,10 +17,20 @@ import {
   updatePopper,
   handleDrag,
   showScrollbar,
-  hideScrollbar
+  hideScrollbar,
+  computedBodyStyle
 } from "./index";
 import usePopup from "../common/deps/vue-popup";
-const api = ["afterEnter", "afterLeave", "handleClose", "handleWrapperClick", "handleCancel", "handleConfirm", "handleDrag", "state"];
+const api = [
+  "afterEnter",
+  "afterLeave",
+  "handleClose",
+  "handleWrapperClick",
+  "handleCancel",
+  "handleConfirm",
+  "handleDrag",
+  "state"
+];
 const initState = ({ reactive, computed, api: api2, emitter, props }) => {
   const state = reactive({
     emitter: emitter(),
@@ -35,6 +45,7 @@ const initState = ({ reactive, computed, api: api2, emitter, props }) => {
     dragable: null,
     isFull: props.fullscreen,
     style: computed(() => api2.computedStyle()),
+    bodyStyle: computed(() => api2.computedBodyStyle()),
     animationName: computed(() => api2.computedAnimationName())
   });
   return state;
@@ -50,7 +61,19 @@ const mergeState = ({ reactive, state, toRefs, usePopups }) => {
   }, toRefs(state)));
   return merge;
 };
-const initApi = ({ emit, api: api2, state, parent, props, lockScrollClass, constants, usePopups, nextTick, refs, broadcast }) => {
+const initApi = ({
+  emit,
+  api: api2,
+  state,
+  parent,
+  props,
+  lockScrollClass,
+  constants,
+  usePopups,
+  nextTick,
+  broadcast,
+  vm
+}) => {
   const { open, close, doOpen, doClose } = usePopups;
   const { doAfterOpen, doAfterClose, restoreBodyStyle } = usePopups;
   Object.assign(api2, {
@@ -76,10 +99,11 @@ const initApi = ({ emit, api: api2, state, parent, props, lockScrollClass, const
       nextTick,
       parent,
       props,
-      refs,
+      vm,
       state
     }),
     computedStyle: computedStyle({ state, props }),
+    computedBodyStyle: computedBodyStyle({ props }),
     mounted: mounted({ api: api2, parent, props }),
     unMounted: unMounted({ api: api2, parent, props }),
     computedAnimationName: computedAnimationName({ constants, props }),
@@ -99,7 +123,7 @@ const initWatch = ({ watch, state, api: api2, props }) => {
     }
   );
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, reactive, watch }, { vm, emitter, parent, emit, constants, nextTick, refs, mode, broadcast }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, reactive, watch }, { vm, emitter, parent, emit, constants, nextTick, mode, broadcast }) => {
   const api2 = {};
   const lockScrollClass = constants.scrollLockClass(mode);
   let state = initState({ reactive, computed, api: api2, emitter, props });
@@ -125,7 +149,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, react
     usePopups,
     lockScrollClass,
     nextTick,
-    refs,
+    vm,
     broadcast
   });
   state = mergeState({ reactive, state, toRefs, usePopups });

package/dialog-select/index.js

@@ -27,13 +27,18 @@ const queryGridData = ({ api, props, state }) => () => {
   if (popseletor === "grid") {
     if (typeof remoteSearch === "function") {
       state.multiGridStore.loading = true;
+      state.temporary.final = true;
+      const onFinally = () => {
+        if (state.temporary.final) {
+          state.temporary.final = false;
+          state.multiGridStore.loading = false;
+          state.multiGridStore.inited = true;
+        }
+      };
       remoteSearch().then(() => {
         state.multiGridStore.loading = false;
         api.setChecked();
-      }).finally(() => {
-        state.multiGridStore.loading = false;
-        state.multiGridStore.inited = true;
-      });
+      }).then(onFinally).catch(onFinally);
     } else {
       state.multiGridStore.inited = true;
     }
@@ -318,6 +323,22 @@ const multiGridRadioChange = ({ props, state }) => ({ row }) => {
   state.selectedDatas = [row];
   state.selectedChanged = true;
 };
+const watchMulti = ({ api, state, props }) => () => {
+  state.splitValue = props.multi ? 0.7 : 1;
+  state.selectedChanged = false;
+  state.selectedDatas = [];
+  state.selectedValues = [];
+  state.multiGridStore.inited = false;
+  state.multiGridStore.loading = false;
+  state.multiTreeStore.viewType = "tree";
+  state.multiTreeStore.expandedKeys = [];
+  state.multiTreeStore.checkedKeys = [];
+  state.multiTreeStore.highlight = null;
+  state.multiTreeStore.filterText = "";
+  state.multiTreeStore.inited = false;
+  state.lookupStore.datas = [];
+  api.doAutoLookup();
+};
 export {
   computedConfig,
   computedGridColumns,
@@ -341,5 +362,6 @@ export {
   selectedBoxDelete,
   selectedBoxDrag,
   selectedBoxInit,
-  setChecked
+  setChecked,
+  watchMulti
 };

package/dialog-select/vue.js

@@ -22,7 +22,8 @@ import {
   computedConfig,
   doAutoLookup,
   multiTreeRadio,
-  multiGridRadioChange
+  multiGridRadioChange,
+  watchMulti
 } from "./index";
 const api = [
   "state",
@@ -46,7 +47,7 @@ const api = [
 ];
 const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }) => {
   const state = reactive({
-    splitValue: props.multi ? 0.7 : 1,
+    splitValue: 0,
     gridColumns: computed(() => api2.computedGridColumns()),
     selectedChanged: false,
     selectedDatas: [],
@@ -69,6 +70,7 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
       datas: []
     }
   });
+  state.temporary = {};
   const api2 = {
     state,
     computedGridColumns: computedGridColumns(props),
@@ -95,13 +97,18 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
     onFooterConfirm: onFooterConfirm({ api: api2, props }),
     queryGridData: queryGridData({ api: api2, props, state }),
     setChecked: setChecked({ api: api2, props, state }),
-    multiTreeRadio: multiTreeRadio({ api: api2, props })
+    multiTreeRadio: multiTreeRadio({ api: api2, props }),
+    watchMulti: watchMulti({ api: api2, state, props })
   });
   watch(
     () => props.visible,
     (value) => value && !state.multiGridStore.inited && api2.queryGridData()
   );
-  api2.doAutoLookup();
+  watch(
+    () => props.multi,
+    () => api2.watchMulti(),
+    { immediate: true }
+  );
   return api2;
 };
 export {

package/drop-roles/index.js

@@ -34,7 +34,9 @@ const change = (emit) => (value) => {
 const initService = ({ props, service }) => {
   const { setting = {}, fetchRole, fetchCurrentRole } = service || {};
   const { options = {} } = setting;
-  const noopFnCreator = (propName) => () => Promise.reject(new Error(`[TINY Error][DropRoles] Prop ${propName} is not configured`));
+  const noopFnCreator = (propName) => () => Promise.reject(
+    new Error(`[TINY Error][DropRoles] Prop ${propName} is mandatory when the framework service is not used`)
+  );
   const defaultDropRolesSetting = {
     textField: "roleName",
     valueField: "roleId"

package/dropdown/index.js

@@ -102,7 +102,7 @@ const initAria = ({ state, props }) => () => {
   state.dropdownElm.setAttribute("id", state.listId);
   state.triggerElm.setAttribute("aria-haspopup", "list");
   state.triggerElm.setAttribute("aria-controls", state.listId);
-  if (!props.splitButton) {
+  if (!props.splitButton || !props.singleButton) {
     state.triggerElm.setAttribute("role", "button");
     state.triggerElm.setAttribute("tabindex", props.tabindex);
     addClass(state.triggerElm, "tiny-dropdown-selfdefine");
@@ -111,11 +111,12 @@ const initAria = ({ state, props }) => () => {
 const toggleFocus = ({ state, value }) => () => {
   state.focusing = value;
 };
-const initEvent = ({ api, props, state, vm }) => () => {
-  state.triggerElm = props.splitButton ? vm.$refs.trigger.$el : vm.$refs.trigger;
+const initEvent = ({ api, props, state, vm, mode }) => () => {
+  let buttonValue = props.splitButton || props.singleButton;
+  state.triggerElm = buttonValue ? vm.$refs.trigger.$el : props.border ? vm.$refs.trigger.$el : vm.$refs.trigger;
   on(state.triggerElm, "keydown", api.handleTriggerKeyDown);
   state.dropdownElm.addEventListener("keydown", api.handleItemKeyDown, true);
-  if (!props.splitButton) {
+  if (!props.splitButton || !props.singleButton) {
     on(state.triggerElm, "focus", toggleFocus({ state, value: true }));
     on(state.triggerElm, "blur", toggleFocus({ state, value: false }));
     on(state.triggerElm, "click", toggleFocus({ state, value: false }));
@@ -128,10 +129,16 @@ const initEvent = ({ api, props, state, vm }) => () => {
   } else if (props.trigger === "click") {
     on(state.triggerElm, "click", api.handleClick);
   }
+  if (mode === "mobile-first") {
+    if (props.splitButton || props.singleButton) {
+      on(state.triggerElm, "click", api.handleClick);
+    }
+  }
 };
-const handleMenuItemClick = ({ props, state, emit }) => (itemData, instance) => {
+const handleMenuItemClick = ({ props, state, emit }) => (itemData, instance, isDisabled) => {
+  state.isDisabled = isDisabled;
   if (props.hideOnClick) {
-    state.visible = false;
+    !state.isDisabled && (state.visible = false);
   }
   emit("item-click", itemData, instance);
 };
@@ -149,8 +156,16 @@ const handleMainButtonClick = ({ api, emit }) => (event) => {
   emit("button-click", event);
   api.hide();
 };
-const mounted = ({ api, vm }) => () => {
+const mounted = ({ api, vm, state, broadcast }) => () => {
+  if (state.showSelfIcon) {
+    state.showIcon = false;
+  }
   vm.$on("menu-item-click", api.handleMenuItemClick);
+  vm.$on("current-item-click", api.handleMenuItemClick);
+  vm.$on("selectedIndex", (selectedIndex) => {
+    broadcast("TinyDropdownMenu", "menuselectedIndex", selectedIndex);
+  });
+  vm.$on("is-disabled", api.clickOutside);
 };
 const beforeDistory = ({ api, state }) => () => {
   if (state.triggerElm) {
@@ -170,8 +185,14 @@ const beforeDistory = ({ api, state }) => () => {
     state.dropdownElm = null;
   }
 };
+const clickOutside = ({ props, api, state }) => (value) => {
+  if (props.hideOnClick) {
+    state.isDisabled ? value ? api.show() : api.hide() : api.hide();
+  }
+};
 export {
   beforeDistory,
+  clickOutside,
   handleClick,
   handleItemKeyDown,
   handleMainButtonClick,

package/dropdown/vue.js

@@ -17,10 +17,11 @@ import {
   triggerElmFocus,
   initDomOperation,
   mounted,
-  beforeDistory
+  beforeDistory,
+  clickOutside
 } from "./index";
-const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick"];
-const renderless = (props, { reactive, watch, provide, onMounted }, { emit, parent, broadcast, vm, nextTick, designConfig }) => {
+const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
+const renderless = (props, { reactive, watch, provide, onMounted }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
   const api2 = {};
   const state = reactive({
     visible: false,
@@ -31,28 +32,32 @@ const renderless = (props, { reactive, watch, provide, onMounted }, { emit, pare
     triggerElm: null,
     dropdownElm: null,
     listId: `dropdown-menu-${guid()}`,
+    showIcon: props.showIcon,
+    showSelfIcon: props.showSelfIcon,
+    isDisabled: false,
     designConfig
   });
-  provide("dropdown", vm);
+  provide("dropdownVm", vm);
   Object.assign(api2, {
     state,
     watchVisible: watchVisible({ broadcast, emit, nextTick }),
     watchFocusing: watchFocusing({ parent }),
     show: show({ props, state }),
     hide: hide({ api: api2, props, state }),
-    mounted: mounted({ api: api2, vm }),
+    mounted: mounted({ api: api2, vm, state, broadcast }),
     handleClick: handleClick({ api: api2, props, state, emit }),
     handleTriggerKeyDown: handleTriggerKeyDown({ api: api2, state }),
     handleItemKeyDown: handleItemKeyDown({ api: api2, props, state }),
     resetTabindex: resetTabindex({ api: api2 }),
     removeTabindex: removeTabindex({ state }),
     initAria: initAria({ state, props }),
-    initEvent: initEvent({ api: api2, props, state, vm }),
+    initEvent: initEvent({ api: api2, props, state, vm, mode }),
     handleMenuItemClick: handleMenuItemClick({ props, state, emit }),
     handleMainButtonClick: handleMainButtonClick({ api: api2, emit }),
     triggerElmFocus: triggerElmFocus({ state }),
     initDomOperation: initDomOperation({ api: api2, state, vm }),
-    beforeDistory: beforeDistory({ api: api2, state })
+    beforeDistory: beforeDistory({ api: api2, state }),
+    clickOutside: clickOutside({ state, props, api: api2 })
   });
   watch(() => state.visible, api2.watchVisible);
   watch(() => state.focusing, api2.watchFocusing);

package/dropdown-item/index.js

@@ -91,13 +91,20 @@ const clickOutside = (parent) => () => {
 };
 const handleClick = ({ props, dispatch, vm, emit }) => (event) => {
   event.stopPropagation();
-  const data = { itemData: props.itemData, vm };
+  const data = { itemData: props.itemData, vm, disabled: props.disabled };
   emit("item-click", data);
   dispatch("TinyDropdown", "menu-item-click", data);
+  dispatch("TinyDropdown", "is-disabled", [props.disabled]);
 };
 const computedGetIcon = ({ constants, designConfig }) => (name = "leftWardArrow") => {
   return (designConfig == null ? void 0 : designConfig.icons[name]) || (constants == null ? void 0 : constants.ICON_MAP[name]);
 };
+const getTip = ({ props, vm }) => {
+  if (props.tip && typeof props.tip === "function") {
+    return props.tip({ itemData: props.itemData, vm });
+  }
+  return props.tip || "";
+};
 export {
   bindScroll,
   clickItem,
@@ -109,6 +116,7 @@ export {
   confirm,
   getItemStyle,
   getOptionStyle,
+  getTip,
   getTitle,
   handleClick,
   onScroll,

package/dropdown-item/mf.js

@@ -3,7 +3,7 @@ import { omitText } from "../common/string";
 const api = ["dataStore", "handleClick", "dataStore", "mouseEnter", "mouseLeave"];
 const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   const api2 = {};
-  const dropdownMenuVm = inject("dropdownMenu");
+  const dropdownMenuVm = inject("dropdownMenuVm");
   const multiStage = inject("multiStage");
   let dataStore = reactive({
     checkedStatus: dropdownMenuVm.checkedStatus,
@@ -22,7 +22,6 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   const handleClick = ({ dataStore: dataStore2, props: props2, vm: vm2 }) => () => {
     if (props2.disabled) {
       dataStore2.checkedStatus = false;
-      return;
     }
     dataStore2.itemData = props2.itemData;
     dataStore2.itemLabel = "";
@@ -38,8 +37,9 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
       vm2,
       dataStore2.itemLabel,
       dataStore2.showContent,
-      dataStore2.currentIndex
+      props2.disabled
     ]);
+    dispatch("TinyDropdown", "is-disabled", [props2.disabled]);
   };
   const mouseLeave = ({ dataStore: dataStore2 }) => () => {
     dataStore2.itemLabel = "";