@opentiny/vue-renderless 3.13.1 → 3.14.0

package/date-panel/vue.js

@@ -42,7 +42,9 @@ import {
   computerVisibleTime,
   computerVisibleDate,
   computerTimeFormat,
-  watchVisible
+  watchVisible,
+  getDisabledNow,
+  getDisabledConfirm
 } from "./index";
 import { getWeekNumber, extractDateFormat } from "../common/deps/date-util";
 import { DATEPICKER, DATE } from "../common";
@@ -102,6 +104,8 @@ const initState = ({ reactive, computed, api: api2, i18n }) => {
     selectedTz: null,
     animationName: "",
     startYear: Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10,
+    disabledNow: computed(() => api2.getDisabledNow()),
+    disabledConfirm: computed(() => api2.getDisabledConfirm()),
     year: computed(() => !Array.isArray(state.date) && state.date.getFullYear()),
     month: computed(() => !Array.isArray(state.date) && state.date.getMonth()),
     week: computed(() => getWeekNumber(state.date)),
@@ -192,7 +196,9 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
     handleShortcutClick: handleShortcutClick(api2),
     computerVisibleDate: computerVisibleDate({ state, t }),
     handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, vm, state, t }),
-    computerTimeFormat: computerTimeFormat({ state })
+    computerTimeFormat: computerTimeFormat({ state }),
+    getDisabledNow: getDisabledNow({ state }),
+    getDisabledConfirm: getDisabledConfirm({ state })
   });
 };
 const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n }) => {

package/date-picker-mobile/index.js

@@ -273,7 +273,19 @@ const scrollEnd = ({ state, api }) => () => {
   state.loading = true;
   state.isYearMonthPanel ? api.loadYearMonth("down") : api.loadingDate("down");
 };
+const clear = ({ state, emit, api }) => () => {
+  state.date = Array.isArray(state.date) ? [] : "";
+  emit("update:modelValue", state.date);
+  emit("clear", state.date);
+  api.close();
+};
+const close = ({ emit, vm }) => () => {
+  vm.$refs.actionSheet.close();
+  emit("close");
+};
 export {
+  clear,
+  close,
   confirm,
   formatDate,
   getCurrentDate,

package/date-picker-mobile/vue.js

@@ -17,6 +17,8 @@ import {
   loadingDate,
   scrollStart,
   scrollEnd,
+  clear,
+  close,
   confirm
 } from "./index";
 import { initYearMonthPanel, getOffsetMonth, loadYearMonth } from "./year-month";
@@ -33,6 +35,8 @@ const api = [
   "scrollStart",
   "scrollEnd",
   "loadingDate",
+  "clear",
+  "close",
   "formatDate"
 ];
 const renderless = (props, { computed, reactive, watch, onMounted }, { emit, vm, nextTick, constants }) => {
@@ -86,7 +90,9 @@ const renderless = (props, { computed, reactive, watch, onMounted }, { emit, vm,
     loadingDate: loadingDate({ state, api: api2 }),
     loadYearMonth: loadYearMonth({ state, api: api2 }),
     getOffsetMonth: getOffsetMonth(),
-    formatDate: formatDate({ props, constants })
+    formatDate: formatDate({ props, constants }),
+    clear: clear({ state, emit, api: api2 }),
+    close: close({ emit, vm })
   });
   watch(() => props.visible, api2.watchVisible);
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true });

package/date-range/vue.js

@@ -1,4 +1,6 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import {
   getMinVisibleDate,
   watchValue,
@@ -64,9 +66,11 @@ const api = [
   "handleTimeInput",
   "handleMinTimeClose",
   "handleDateChange",
-  "handleMaxTimeClose"
+  "handleMaxTimeClose",
+  "isValidValue"
 ];
-const initState = ({ reactive, computed, api: api2, constants }) => {
+const initState = ({ reactive, computed, api: api2, constants, designConfig }) => {
+  var _a;
   const state = reactive({
     popperElm: null,
     popperClass: "",
@@ -112,7 +116,11 @@ const initState = ({ reactive, computed, api: api2, constants }) => {
     timeFormat: computed(() => state.format ? extractTimeFormat(state.format) : "HH:mm:ss"),
     dateFormat: computed(() => state.format ? extractDateFormat(state.format) : "yyyy-MM-dd"),
     enableMonthArrow: computed(() => api2.getEnableMonthArrow()),
-    enableYearArrow: computed(() => api2.computerEnableYearArrow())
+    enableYearArrow: computed(() => api2.computerEnableYearArrow()),
+    confirmButtonProps: __spreadValues({
+      plain: true,
+      type: "default"
+    }, (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.confirmButtonProps)
   });
   return state;
 };
@@ -172,10 +180,10 @@ const initApi = ({ api: api2, state, t, vm, nextTick, emit, constants }) => {
     watchPickerVisible: watchPickerVisible({ state, constants })
   });
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, constants }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, constants, designConfig }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2, constants });
+  const state = initState({ reactive, computed, api: api2, constants, designConfig });
   initApi({ api: api2, state, t, vm, nextTick, emit, constants });
   initWatch({ watch, state, api: api2 });
   return api2;

package/date-table/index.js

@@ -357,6 +357,10 @@ const handleClick = ({ api, emit, props, state }) => (event) => {
     emit("pick", newValue);
   }
 };
+const getCssToken = ({ api }) => (cell, prexfix = "") => {
+  const cssStr = api.getCellClasses(cell) || "";
+  return cssStr.split(" ").map((className) => prexfix + className);
+};
 export {
   arrayFind,
   arrayFindIndex,
@@ -365,6 +369,7 @@ export {
   getCell,
   getCellClasses,
   getCellRangeClasses,
+  getCssToken,
   getDateOfCell,
   getDateTimestamp,
   getOffsetDay,

package/date-table/vue.js

@@ -8,6 +8,7 @@ import {
   watchMaxDate,
   cellMatchesDate,
   getCellClasses,
+  getCssToken,
   getDateOfCell,
   isWeekActive,
   markRange,
@@ -16,7 +17,7 @@ import {
   getCell
 } from "./index";
 import { getStartDateOfMonth } from "../common/deps/date-util";
-const api = ["state", "getCellClasses", "isWeekActive", "handleMouseMove", "handleClick"];
+const api = ["state", "getCellClasses", "getCssToken", "isWeekActive", "handleMouseMove", "handleClick"];
 const initState = ({ reactive, computed, api: api2, props }) => {
   const state = reactive({
     tableRows: [[], [], [], [], [], []],
@@ -50,6 +51,7 @@ const initApi = ({ api: api2, state, props, emit, t, vm }) => {
     getRows: getRows({ api: api2, props, state, t, vm }),
     handleClick: handleClick({ api: api2, emit, props, state }),
     getCellClasses: getCellClasses({ api: api2, props, state }),
+    getCssToken: getCssToken({ api: api2 }),
     getCellRangeClasses: getCellRangeClasses({ props })
   });
 };

package/dialog-box/index.js

@@ -1,14 +1,17 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import { on, off, addClass, removeClass } from "../common/deps/dom";
 import { emitEvent } from "../common/event";
 import { getDomNode } from "../common/deps/dom";
 const computedAnimationName = ({ constants, props }) => () => props.rightSlide ? constants.DIALOG_SLIDER_RIGHT : constants.DIALOG_FADE;
 const computedAddUnit = (value) => isNaN(Number(value)) ? value : value + "px";
-const computedStyle = ({ props, state }) => () => {
-  const style = {};
+const computedStyle = ({ props, state, designConfig }) => () => {
+  var _a;
+  let style = {};
   let { width, top, rightSlide, maxHeight } = props;
   if (top === void 0) {
-    top = rightSlide ? "0" : "15vh";
+    top = rightSlide ? "0" : ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.top) ? "" : "15vh";
   }
   width = computedAddUnit(width);
   top = computedAddUnit(top);
@@ -24,6 +27,9 @@ const computedStyle = ({ props, state }) => () => {
       style.left = state.left || "calc((100vw - " + width + ") / 2)";
     }
   }
+  if (state.dragStyle) {
+    style = __spreadValues(__spreadValues({}, style), state.dragStyle);
+  }
   return style;
 };
 const computedBodyStyle = ({ props }) => () => {
@@ -97,11 +103,25 @@ const unMounted = ({ api, parent, props }) => () => {
     el.parentNode.removeChild(el);
   }
 };
-const handleWrapperClick = ({ api, props }) => () => {
+const useMouseEventDown = ({ state }) => (event) => {
+  state.mouseDownWrapperFlag = false;
+  if (/tiny-dialog-box__wrapper/.test(event.target.className) && event.type === "mousedown") {
+    state.mouseDownWrapperFlag = true;
+  }
+};
+const useMouseEventUp = ({ state }) => (event) => {
+  state.mouseUpWrapperFlag = false;
+  if (/tiny-dialog-box__wrapper/.test(event.target.className) && event.type === "mouseup") {
+    state.mouseUpWrapperFlag = true;
+  }
+};
+const handleWrapperClick = ({ api, props, state }) => () => {
   if (!props.closeOnClickModal) {
     return;
   }
-  api.handleClose("mask");
+  if (state.mouseDownWrapperFlag && state.mouseUpWrapperFlag) {
+    api.handleClose("mask");
+  }
 };
 const handleClose = ({
   api,
@@ -193,14 +213,24 @@ const handleDrag = ({ parent, props, state, emit }) => (event) => {
     }
     let offsetWidth = modalBoxElem.offsetWidth;
     let offsetHeight = modalBoxElem.offsetHeight;
-    let maxX = Math.max(visibleWidth - offsetWidth, 0);
-    let maxY = Math.max(visibleHeight - offsetHeight, 0);
-    let left = event2.clientX - disX;
-    let top = event2.clientY - disY;
-    left = left < 0 ? 0 : left > maxX ? maxX : left;
-    top = top < 0 ? 0 : top > maxY ? maxY : top;
-    modalBoxElem.style.left = `${left}px`;
-    modalBoxElem.style.top = `${top}px`;
+    let left;
+    let top;
+    if (!props.dragOutsideWindow) {
+      let maxX = Math.max(visibleWidth - offsetWidth, 0);
+      let maxY = Math.max(visibleHeight - offsetHeight, 0);
+      left = event2.clientX - disX;
+      top = event2.clientY - disY;
+      left = left < 0 ? 0 : left > maxX ? maxX : left;
+      top = top < 0 ? 0 : top > maxY ? maxY : top;
+    } else {
+      let maxX = visibleWidth - 10;
+      let maxY = visibleHeight - 10;
+      left = event2.clientX - disX;
+      top = event2.clientY - disY;
+      left = event2.clientX < 0 ? -disX : left > maxX ? maxX : left;
+      top = event2.clientY < 0 ? -disY : top > maxY ? maxY : top;
+    }
+    state.dragStyle = { left: `${left}px`, top: `${top}px` };
     state.left = `${left}px`;
     state.top = `${top}px`;
     state.emitter.emit("boxdrag");
@@ -237,5 +267,7 @@ export {
   showScrollbar,
   unMounted,
   updatePopper,
+  useMouseEventDown,
+  useMouseEventUp,
   watchVisible
 };

package/dialog-box/vue.js

@@ -12,6 +12,8 @@ import {
   hide,
   handleClose,
   handleWrapperClick,
+  useMouseEventDown,
+  useMouseEventUp,
   mounted,
   unMounted,
   updatePopper,
@@ -26,6 +28,8 @@ const api = [
   "afterLeave",
   "handleClose",
   "handleWrapperClick",
+  "useMouseEventDown",
+  "useMouseEventUp",
   "handleCancel",
   "handleConfirm",
   "handleDrag",
@@ -36,8 +40,10 @@ const initState = ({
   computed,
   api: api2,
   emitter,
-  props
+  props,
+  useBreakpoint
 }) => {
+  const { current } = useBreakpoint();
   const state = reactive({
     emitter: emitter(),
     key: 0,
@@ -52,7 +58,9 @@ const initState = ({
     isFull: props.fullscreen,
     style: computed(() => api2.computedStyle()),
     bodyStyle: computed(() => api2.computedBodyStyle()),
-    animationName: computed(() => api2.computedAnimationName())
+    animationName: computed(() => api2.computedAnimationName()),
+    current,
+    dragStyle: null
   });
   return state;
 };
@@ -75,6 +83,7 @@ const initApi = ({
   usePopups,
   nextTick,
   broadcast,
+  designConfig,
   vm
 }) => {
   const { open, close } = usePopups;
@@ -86,7 +95,9 @@ const initApi = ({
     handleCancel: handleCancel({ api: api2, emit }),
     handleConfirm: handleConfirm({ api: api2, emit }),
     updatePopper: updatePopper({ api: api2, constants }),
-    handleWrapperClick: handleWrapperClick({ api: api2, props }),
+    handleWrapperClick: handleWrapperClick({ api: api2, props, state }),
+    useMouseEventDown: useMouseEventDown({ state }),
+    useMouseEventUp: useMouseEventUp({ state }),
     hide: hide({ api: api2, emit, state, props }),
     handleClose: handleClose({ api: api2, constants, emit, parent, props }),
     watchVisible: watchVisible({
@@ -99,7 +110,7 @@ const initApi = ({
       vm,
       state
     }),
-    computedStyle: computedStyle({ state, props }),
+    computedStyle: computedStyle({ state, props, designConfig }),
     computedBodyStyle: computedBodyStyle({ props }),
     mounted: mounted({ api: api2, parent, props }),
     unMounted: unMounted({ api: api2, parent, props }),
@@ -120,10 +131,21 @@ const initWatch = ({ watch, state, api: api2, props }) => {
     }
   );
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, reactive, watch }, { vm, emitter, parent, emit, constants, nextTick, mode, broadcast }) => {
+const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, reactive, watch }, {
+  vm,
+  emitter,
+  parent,
+  emit,
+  constants,
+  nextTick,
+  mode,
+  broadcast,
+  designConfig,
+  useBreakpoint
+}) => {
   const api2 = {};
   const lockScrollClass = constants.scrollLockClass(mode);
-  let state = initState({ reactive, computed, api: api2, emitter, props });
+  let state = initState({ reactive, computed, api: api2, emitter, props, useBreakpoint });
   const usePopups = usePopup({
     api: api2,
     nextTick,
@@ -146,7 +168,8 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, toRefs, react
     lockScrollClass,
     nextTick,
     vm,
-    broadcast
+    broadcast,
+    designConfig
   });
   state = mergeState({ reactive, state, toRefs, usePopups });
   initWatch({ watch, state, api: api2, props });

package/dialog-select/index.js

@@ -47,7 +47,7 @@ const queryGridData = ({ api, props, state }) => () => {
 const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) => {
   if (checked) {
     arrayEach(selection, (item) => {
-      const index = findIndexOf(state.selectedValues, (val) => val == item[props.valueField]);
+      const index = findIndexOf(state.selectedValues, (val) => val === item[props.valueField]);
       if (!~index) {
         state.selectedValues = [...state.selectedValues, item[props.valueField]];
         state.selectedDatas = [...state.selectedDatas, item];
@@ -62,7 +62,7 @@ const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) =
   api.selectedBoxInit();
 };
 const multiGridSelectChange = ({ api, props, state }) => ({ row, checked }) => {
-  const index = findIndexOf(state.selectedValues, (val) => val == row[props.valueField]);
+  const index = findIndexOf(state.selectedValues, (val) => val === row[props.valueField]);
   if (checked) {
     if (!~index) {
       state.selectedValues = [...state.selectedValues, row[props.valueField]];
@@ -109,7 +109,7 @@ const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
   if (multi && popseletor === "tree") {
     vm.$refs.multiTree.setCheckedByNodeKey(row[props.valueField], false);
   }
-  const index = findIndexOf(state.selectedValues, (val) => val == row[props.valueField]);
+  const index = findIndexOf(state.selectedValues, (val) => val === row[props.valueField]);
   if (~index) {
     state.selectedValues = [...state.selectedValues.slice(0, index), ...state.selectedValues.slice(index + 1)];
     state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)];
@@ -136,6 +136,7 @@ const doMultiTreeFilter = ({ props, state, nextTick, vm }) => () => {
           }
           state.multiTreeStore.viewType = "plain";
           state.multiTreeStore.expandedKeys = expandedKeys;
+          vm.$refs.multiTree.filter(state.multiTreeStore.filterText);
         });
       }
     } else {
@@ -339,7 +340,9 @@ const watchMulti = ({ api, state, props }) => () => {
   state.lookupStore.datas = [];
   api.doAutoLookup();
 };
+const clearStatus = (api) => () => api.watchMulti();
 export {
+  clearStatus,
   computedConfig,
   computedGridColumns,
   doAutoLookup,

package/dialog-select/vue.js

@@ -23,7 +23,8 @@ import {
   doAutoLookup,
   multiTreeRadio,
   multiGridRadioChange,
-  watchMulti
+  watchMulti,
+  clearStatus
 } from "./index";
 const api = [
   "state",
@@ -43,7 +44,8 @@ const api = [
   "onFooterCancel",
   "onFooterConfirm",
   "multiTreeRadio",
-  "multiGridRadioChange"
+  "multiGridRadioChange",
+  "clearStatus"
 ];
 const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }) => {
   const state = reactive({
@@ -68,7 +70,8 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
     },
     lookupStore: {
       datas: []
-    }
+    },
+    theme: vm.theme
   });
   state.temporary = {};
   const api2 = {
@@ -98,7 +101,8 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
     queryGridData: queryGridData({ api: api2, props, state }),
     setChecked: setChecked({ api: api2, props, state }),
     multiTreeRadio: multiTreeRadio({ api: api2, props }),
-    watchMulti: watchMulti({ api: api2, state, props })
+    watchMulti: watchMulti({ api: api2, state, props }),
+    clearStatus: clearStatus(api2)
   });
   watch(
     () => props.visible,

package/drawer/index.js

@@ -1,9 +1,20 @@
 import "../chunk-G2ADBYYC.js";
 import debounce from "../common/deps/debounce";
 import { addClass, removeClass } from "../common/deps/dom";
-const close = ({ emit, state }) => () => {
-  state.toggle = false;
-  emit("close", state);
+const computedWidth = ({
+  state,
+  designConfig,
+  props,
+  constants
+}) => () => {
+  var _a;
+  if (state.width) {
+    return state.width + "px";
+  }
+  return props.width || ((_a = designConfig == null ? void 0 : designConfig.constants) == null ? void 0 : _a.DEFAULT_WIDTH) || constants.DEFAULT_WIDTH;
+};
+const close = ({ api }) => (force = false) => {
+  api.handleClose("close", force);
 };
 const watchVisible = ({ state }) => (bool) => {
   setTimeout(() => {
@@ -15,9 +26,17 @@ const watchToggle = ({ emit }) => (bool) => {
     emit("update:visible", bool);
   }, 0);
 };
-const confirm = ({ emit, state }) => () => {
+const confirm = ({ api }) => () => {
+  api.handleClose("confirm");
+};
+const handleClose = ({ emit, props, state }) => (type, force) => {
+  const isMaskNotClosable = type === "mask" && !props.maskClosable;
+  const isBlockClose = !force && typeof props.beforeClose === "function" && props.beforeClose(type) === false;
+  if (isMaskNotClosable || isBlockClose) {
+    return;
+  }
   state.toggle = false;
-  emit("confirm", state);
+  emit(["close", "confirm"].includes(type) ? type : "close", state);
 };
 const mousedown = ({ state, vm }) => (event2) => {
   event2.preventDefault();
@@ -50,6 +69,7 @@ const mouseup = ({ state }) => () => {
   if (!state.dragEvent.isDrag) {
     return;
   }
+  ;
   event.preventDefault();
   state.dragEvent.isDrag = false;
 };
@@ -85,7 +105,9 @@ const watchVisibleNotImmediate = ({ api, props }) => (visible) => {
 export {
   addDragEvent,
   close,
+  computedWidth,
   confirm,
+  handleClose,
   hideScrollbar,
   mousedown,
   mousemove,

package/drawer/vue.js

@@ -11,22 +11,27 @@ import {
   removeDragEvent,
   showScrollbar,
   hideScrollbar,
-  watchVisibleNotImmediate
+  watchVisibleNotImmediate,
+  handleClose,
+  computedWidth
 } from "./index";
-const api = ["state", "close", "confirm"];
-const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants }) => {
+const api = ["state", "close", "confirm", "handleClose"];
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants, designConfig }) => {
+  var _a;
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const api2 = {};
   const state = reactive({
     toggle: false,
     width: 0,
     dragEvent: { x: 0, isDrag: false, offsetWidth: 0 },
-    computedWidth: computed(() => state.width ? state.width + "px" : props.width)
+    computedWidth: computed(() => api2.computedWidth()),
+    btnOrderReversed: vm.theme === "saas" || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.btnOrderReversed)
   });
   Object.assign(api2, {
     state,
-    confirm: confirm({ state, emit }),
-    close: close({ emit, state }),
+    confirm: confirm({ api: api2 }),
+    close: close({ api: api2 }),
+    handleClose: handleClose({ emit, props, state }),
     mousedown: mousedown({ state, vm }),
     mousemove: mousemove({ state, props }),
     mouseup: mouseup({ state }),
@@ -36,11 +41,13 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     watchToggle: watchToggle({ emit }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
-    watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api2, props })
+    watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api2, props }),
+    computedWidth: computedWidth({ state, designConfig, props, constants })
   });
   onMounted(() => {
     props.dragable && api2.addDragEvent();
     if (props.lockScroll && props.visible) {
+      ;
       api2.showScrollbar();
     }
   });

package/dropdown/index.js

@@ -20,7 +20,7 @@ const show = ({ props, state }) => () => {
     () => {
       state.visible = true;
     },
-    props.trigger === "click" ? 0 : props.showTimeout
+    state.trigger === "click" ? 0 : props.showTimeout
   );
 };
 const hide = ({ api, props, state }) => () => {
@@ -36,7 +36,7 @@ const hide = ({ api, props, state }) => () => {
     () => {
       state.visible = false;
     },
-    props.trigger === "click" ? 0 : props.hideTimeout
+    state.trigger === "click" ? 0 : props.hideTimeout
   );
 };
 const handleClick = ({ api, props, state, emit }) => () => {
@@ -128,12 +128,12 @@ const initEvent = ({ api, props, state, vm, mode }) => () => {
     on(state.triggerElm, "blur", toggleFocus({ state, value: false }));
     on(state.triggerElm, "click", toggleFocus({ state, value: false }));
   }
-  if (props.trigger === "hover") {
+  if (state.trigger === "hover") {
     on(state.triggerElm, "mouseenter", api.show);
     on(state.triggerElm, "mouseleave", api.hide);
     on(state.dropdownElm, "mouseenter", api.show);
     on(state.dropdownElm, "mouseleave", api.hide);
-  } else if (props.trigger === "click") {
+  } else if (state.trigger === "click") {
     on(state.triggerElm, "click", api.handleClick);
   }
   if (mode === "mobile-first") {
@@ -173,8 +173,8 @@ const mounted = ({ api, vm, state, broadcast }) => () => {
   }
   vm.$on("menu-item-click", api.handleMenuItemClick);
   vm.$on("current-item-click", api.handleMenuItemClick);
-  vm.$on("selectedIndex", (selectedIndex) => {
-    broadcast("TinyDropdownMenu", "menuselectedIndex", selectedIndex);
+  vm.$on("selected-index", (selectedIndex) => {
+    broadcast("TinyDropdownMenu", "menu-selected-index", selectedIndex);
   });
   vm.$on("is-disabled", api.clickOutside);
 };
@@ -196,7 +196,7 @@ const beforeDistory = ({ api, state }) => () => {
     state.dropdownElm = null;
   }
 };
-const clickOutside = ({ props, api, state }) => (disabled) => {
+const clickOutside = ({ props, api }) => (disabled) => {
   if (props.hideOnClick) {
     disabled ? api.show() : api.hide();
   }

package/dropdown/vue.js

@@ -21,7 +21,7 @@ import {
   clickOutside
 } from "./index";
 const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
-const renderless = (props, { reactive, watch, provide, onMounted }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
+const renderless = (props, { reactive, watch, provide, onMounted, computed }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
   const api2 = {};
   const state = reactive({
     visible: false,
@@ -34,7 +34,11 @@ const renderless = (props, { reactive, watch, provide, onMounted }, { emit, pare
     listId: `dropdown-menu-${guid()}`,
     showIcon: props.showIcon,
     showSelfIcon: props.showSelfIcon,
-    designConfig
+    designConfig,
+    trigger: computed(() => {
+      var _a;
+      return props.trigger || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.trigger) || "hover";
+    })
   });
   provide("dropdownVm", vm);
   Object.assign(api2, {

package/dropdown-item/index.js

@@ -89,14 +89,22 @@ const clickOutside = (parent) => () => {
     });
   }
 };
-const handleClick = ({ props, dispatch, vm, emit }) => (event) => {
+const handleClick = ({
+  state,
+  props,
+  dispatch,
+  vm,
+  emit
+}) => (event) => {
   event.stopPropagation();
+  state.currentIndex = `${props.currentIndex}`;
   const data = { itemData: props.itemData, vm, disabled: props.disabled };
   if (!props.disabled) {
     emit("item-click", data);
   }
   dispatch("TinyDropdown", "menu-item-click", data);
   dispatch("TinyDropdown", "is-disabled", [props.disabled]);
+  dispatch("TinyDropdown", "selected-index", [state.currentIndex]);
 };
 const computedGetIcon = ({ constants, designConfig }) => (name = "leftWardArrow") => {
   return (designConfig == null ? void 0 : designConfig.icons[name]) || (constants == null ? void 0 : constants.ICON_MAP[name]);