@opentiny/vue-renderless 3.21.2 → 3.23.0

package/date-range/index.js

@@ -1,17 +1,18 @@
 import "../chunk-G2ADBYYC.js";
 import {
-  isDate,
+  toDate1,
   nextDate,
-  parseDate,
+  parseDate1,
   formatDate,
   modifyDate,
   modifyTime,
   nextYear,
   prevYear,
-  nextMonth,
+  nextMonth1,
   prevMonth,
-  modifyWithTimeString
-} from "../common/deps/date-util";
+  modifyWithTimeString,
+  DATEPICKER
+} from "@opentiny/utils";
 const calcDefaultValue = (defaultVal) => {
   if (Array.isArray(defaultVal)) {
     return [new Date(defaultVal[0]), new Date(defaultVal[1])];
@@ -57,9 +58,9 @@ const getMaxVisibleTime = ({ state, t }) => () => {
   return "";
 };
 const getEnableMonthArrow = (state) => () => {
-  const nextMonth2 = (state.leftMonth + 1) % 12;
+  const nextMonth = (state.leftMonth + 1) % 12;
   const yearOffset = state.leftMonth + 1 >= 12 ? 1 : 0;
-  return state.unlinkPanels && new Date(state.leftYear + yearOffset, nextMonth2) < new Date(state.rightYear, state.rightMonth);
+  return state.unlinkPanels && new Date(state.leftYear + yearOffset, nextMonth) < new Date(state.rightYear, state.rightMonth);
 };
 const watchMinDate = ({ state, t, vm }) => (value) => {
   state.dateUserInput.min = null;
@@ -71,7 +72,7 @@ const watchMinDate = ({ state, t, vm }) => (value) => {
   if (state.maxDate && state.maxDate < state.minDate) {
     const format = "HH:mm:ss";
     minTimePicker.state.selectableRange = [
-      [parseDate(formatDate(state.minDate, format, t), format, t), parseDate("23:59:59", format, t)]
+      [parseDate1(formatDate(state.minDate, format, t), format, t), parseDate1("23:59:59", format, t)]
     ];
   }
   if (value) {
@@ -105,8 +106,8 @@ const watchValue = ({ state }) => (value) => {
     state.minDate = null;
     state.maxDate = null;
   } else if (Array.isArray(value)) {
-    state.minDate = isDate(value[0]) ? new Date(value[0]) : null;
-    state.maxDate = isDate(value[1]) ? new Date(value[1]) : null;
+    state.minDate = toDate1(value[0]) ? new Date(value[0]) : null;
+    state.maxDate = toDate1(value[1]) ? new Date(value[1]) : null;
     if (state.minDate) {
       state.leftDate = state.minDate;
       if (state.unlinkPanels && state.maxDate) {
@@ -114,13 +115,13 @@ const watchValue = ({ state }) => (value) => {
         const minDateMonth = state.minDate.getMonth();
         const maxDateYear = state.maxDate.getFullYear();
         const maxDateMonth = state.maxDate.getMonth();
-        state.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth(state.maxDate) : state.maxDate;
+        state.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth1(state.maxDate) : state.maxDate;
       } else {
-        state.rightDate = nextMonth(state.leftDate);
+        state.rightDate = nextMonth1(state.leftDate);
       }
     } else {
       state.leftDate = calcDefaultValue(state.defaultValue)[0];
-      state.rightDate = nextMonth(state.leftDate);
+      state.rightDate = nextMonth1(state.leftDate);
     }
   }
 };
@@ -128,19 +129,22 @@ const watchDefault = ({ state }) => (value) => {
   if (!Array.isArray(state.value)) {
     const [left, right] = calcDefaultValue(value);
     state.leftDate = left;
-    state.rightDate = value && value[1] && state.unlinkPanels ? right : nextMonth(state.leftDate);
+    state.rightDate = value && value[1] && state.unlinkPanels ? right : nextMonth1(state.leftDate);
   }
 };
 const handleClear = ({ emit, state }) => () => {
   state.minDate = null;
   state.maxDate = null;
   state.leftDate = calcDefaultValue(state.defaultValue)[0];
-  state.rightDate = nextMonth(state.leftDate);
+  state.rightDate = nextMonth1(state.leftDate);
   state.rangeState.selecting = false;
   state.rangeState.endDate = null;
   emit("pick", null);
 };
-const handleChangeRange = (state) => (val) => {
+const handleChangeRange = (state, props) => (val) => {
+  if (props.readonly) {
+    return;
+  }
   state.minDate = val.minDate;
   state.maxDate = val.maxDate;
   state.rangeState = val.rangeState;
@@ -150,7 +154,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
   if (value.length !== state.dateFormat.length) {
     return;
   }
-  const parsedValue = parseDate(value, state.dateFormat, t);
+  const parsedValue = parseDate1(value, state.dateFormat, t);
   if (parsedValue) {
     if (typeof state.disabledDate === "function" && state.disabledDate(new Date(parsedValue))) {
       return;
@@ -164,7 +168,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
       );
       state.leftDate = new Date(parsedValue);
       if (!state.unlinkPanels) {
-        state.rightDate = nextMonth(state.leftDate);
+        state.rightDate = nextMonth1(state.leftDate);
       }
     } else {
       state.maxDate = modifyDate(
@@ -181,7 +185,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
   }
 };
 const handleDateChange = ({ state, t }) => (value, type) => {
-  const parsedValue = parseDate(value, state.dateFormat, t);
+  const parsedValue = parseDate1(value, state.dateFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyDate(
@@ -211,7 +215,7 @@ const handleTimeInput = ({ state, t }) => (value, type) => {
   if (value.length !== state.timeFormat.length) {
     return;
   }
-  const parsedValue = parseDate(value, state.timeFormat, t);
+  const parsedValue = parseDate1(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyTime(
@@ -231,7 +235,7 @@ const handleTimeInput = ({ state, t }) => (value, type) => {
   }
 };
 const handleTimeChange = ({ state, t, vm }) => (value, type) => {
-  const parsedValue = parseDate(value, state.timeFormat, t);
+  const parsedValue = parseDate1(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyTime(
@@ -260,7 +264,10 @@ const handleTimeChange = ({ state, t, vm }) => (value, type) => {
     }
   }
 };
-const handleRangePick = ({ api, state, t }) => (val, close = true) => {
+const handleRangePick = ({ api, state, props, t }) => (val, close = true) => {
+  if (props.readonly) {
+    return;
+  }
   const defaultTime = state.defaultTime || [];
   let minDateVal = val.minDate;
   let maxDateVal = val.maxDate;
@@ -288,15 +295,15 @@ const handleRangePick = ({ api, state, t }) => (val, close = true) => {
   }
   api.handleConfirm();
 };
-const handleShortcutClick = (state, api) => (shortcut) => {
+const handleShortcutClick = (state, api, props) => (shortcut) => {
   if (shortcut.type) {
     state.singleSelect = true;
     state.shortcutType = shortcut.type;
     state.shortcutText = shortcut.text;
-    if (shortcut.type === "startFrom" && shortcut.endDate && isDate(shortcut.endDate)) {
+    if (shortcut.type === "startFrom" && shortcut.endDate && toDate1(shortcut.endDate)) {
       state.maxRangeDate = shortcut.endDate;
     }
-    if (shortcut.type === "endAt" && shortcut.startDate && isDate(shortcut.startDate)) {
+    if (shortcut.type === "endAt" && shortcut.startDate && toDate1(shortcut.startDate)) {
       state.minRangeDate = shortcut.startDate;
     }
     state.value = [];
@@ -305,7 +312,15 @@ const handleShortcutClick = (state, api) => (shortcut) => {
   if (shortcut.onClick) {
     const picker = {
       $emit: (type, [start, end]) => {
-        api.doPick(start, end);
+        var _a;
+        if ((_a = props.shortcuts) == null ? void 0 : _a.length) {
+          state.value = [start, end];
+          state.leftDate = start;
+          state.rightDate = end;
+          api.handleRangePick({ minDate: start, maxDate: end });
+        } else {
+          api.doPick(start, end);
+        }
       }
     };
     shortcut.onClick(picker);
@@ -342,45 +357,53 @@ const handleMaxTimeClose = (state) => () => state.maxTimePickerVisible = false;
 const leftPrevYear = ({ state }) => () => {
   state.leftDate = prevYear(state.leftDate);
   if (!state.unlinkPanels) {
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   }
 };
 const leftPrevMonth = ({ state }) => () => {
   state.leftDate = prevMonth(state.leftDate);
   if (!state.unlinkPanels) {
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   }
 };
 const rightNextYear = ({ state }) => () => {
   const { leftDate, rightDate, unlinkPanels } = state;
   if (!unlinkPanels) {
     state.leftDate = nextYear(leftDate);
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   } else {
     state.rightDate = nextYear(rightDate);
   }
 };
 const rightNextMonth = ({ state }) => () => {
   if (!state.unlinkPanels) {
-    state.leftDate = nextMonth(state.leftDate);
-    state.rightDate = nextMonth(state.leftDate);
+    state.leftDate = nextMonth1(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   } else {
-    state.rightDate = nextMonth(state.rightDate);
+    state.rightDate = nextMonth1(state.rightDate);
   }
 };
 const leftNextYear = ({ state }) => () => state.leftDate = nextYear(state.leftDate);
-const leftNextMonth = ({ state }) => () => state.leftDate = nextMonth(state.leftDate);
+const leftNextMonth = ({ state }) => () => state.leftDate = nextMonth1(state.leftDate);
 const rightPrevYear = ({ state }) => () => state.rightDate = prevYear(state.rightDate);
 const rightPrevMonth = ({ state }) => () => state.rightDate = prevMonth(state.rightDate);
-const handleConfirm = ({ api, emit, state }) => (visible = false) => {
+const handleConfirm = ({ api, emit, state, props, t }) => (visible = false) => {
   if (api.isValidValue([state.minDate, state.maxDate])) {
     emit("pick", [state.minDate, state.maxDate], visible);
+    const defaultFormat = props.type === "daterange" ? DATEPICKER.DateFormats.date : DATEPICKER.DateFormats.datetime;
+    const start = formatDate(state.minDate, props.format || defaultFormat, t);
+    const end = formatDate(state.maxDate, props.format || defaultFormat, t);
+    emit("update:modelValue", [start, end]);
+    emit("select-change", [start, end]);
+  }
+  if (state.minDate && !state.maxDate) {
+    emit("pick", [state.minDate, state.maxDate], visible, true);
   }
 };
-const isValidValue = ({ state }) => (value) => Array.isArray(value) && value && value[0] && value[1] && isDate(value[0]) && isDate(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
+const isValidValue = ({ state }) => (value) => Array.isArray(value) && value && value[0] && value[1] && toDate1(value[0]) && toDate1(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
 const resetView = ({ state }) => () => {
-  state.minDate = state.value && isDate(state.value[0]) ? new Date(state.value[0]) : null;
-  state.maxDate = state.value && isDate(state.value[0]) ? new Date(state.value[1]) : null;
+  state.minDate = state.value && toDate1(state.value[0]) ? new Date(state.value[0]) : null;
+  state.maxDate = state.value && toDate1(state.value[0]) ? new Date(state.value[1]) : null;
 };
 const setTimeFormat = ({ nextTick, vm, state }) => () => {
   nextTick(() => {
@@ -398,6 +421,19 @@ const watchPickerVisible = ({ state, constants }) => (val) => {
     state.maxRangeDate = constants.endDate;
   }
 };
+const watchModelValue = ({ state }) => (val) => {
+  const newVal = toDate1(val == null ? void 0 : val[0]);
+  const newVal1 = toDate1(val == null ? void 0 : val[1]);
+  if (newVal && newVal1) {
+    const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate());
+    const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getUTCDate());
+    state.value = [start, end];
+    state.minDate = start;
+    state.maxDate = end;
+    state.leftDate = start;
+    state.rightDate = end;
+  }
+};
 export {
   calcDefaultValue,
   computerBtnDisabled,
@@ -438,6 +474,7 @@ export {
   watchMaxTimePickerVisible,
   watchMinDate,
   watchMinTimePickerVisible,
+  watchModelValue,
   watchPickerVisible,
   watchValue
 };

package/date-range/vue.js

@@ -41,9 +41,10 @@ import {
   computerBtnDisabled,
   computerLabel,
   computerEnableYearArrow,
-  watchPickerVisible
+  watchPickerVisible,
+  watchModelValue
 } from "./index";
-import { nextMonth, extractDateFormat, extractTimeFormat } from "../common/deps/date-util";
+import { nextMonth1, extractDateFormat, extractTimeFormat } from "@opentiny/utils";
 const api = [
   "state",
   "handleShortcutClick",
@@ -67,14 +68,15 @@ const api = [
   "handleMinTimeClose",
   "handleDateChange",
   "handleMaxTimeClose",
-  "isValidValue"
+  "isValidValue",
+  "watchModelValue"
 ];
-const initState = ({ reactive, computed, api: api2, constants, designConfig }) => {
+const initState = ({ reactive, computed, api: api2, constants, designConfig, props }) => {
   var _a;
   const state = reactive({
     popperElm: null,
-    popperClass: "",
-    value: [],
+    popperClass: props.popperClass || "",
+    value: props.modelValue || [],
     defaultValue: null,
     defaultTime: null,
     minDate: "",
@@ -85,18 +87,18 @@ const initState = ({ reactive, computed, api: api2, constants, designConfig }) =
     minRangeDate: constants.startDate,
     maxRangeDate: constants.endDate,
     leftDate: /* @__PURE__ */ new Date(),
-    rightDate: nextMonth(/* @__PURE__ */ new Date()),
+    rightDate: nextMonth1(/* @__PURE__ */ new Date()),
     rangeState: { endDate: null, selecting: false, row: null, column: null },
-    showTime: false,
-    format: "",
+    showTime: props.type === "datetimerange" || false,
+    format: props.format || "",
     arrowControl: false,
-    unlinkPanels: false,
+    unlinkPanels: props.unlinkPanels || false,
     firstDayOfWeek: 7,
     minTimePickerVisible: false,
     maxTimePickerVisible: false,
-    shortcuts: "",
+    shortcuts: props.shortcuts || "",
     visible: "",
-    disabledDate: "",
+    disabledDate: props.disabledDate || null,
     cellClassName: "",
     dateUserInput: { min: null, max: null },
     timeUserInput: { min: null, max: null },
@@ -119,13 +121,14 @@ const initState = ({ reactive, computed, api: api2, constants, designConfig }) =
     enableYearArrow: computed(() => api2.computerEnableYearArrow()),
     // tiny 新增
     confirmButtonProps: __spreadValues({
-      plain: true,
+      plain: false,
       type: "default"
     }, (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.confirmButtonProps)
   });
   return state;
 };
-const initWatch = ({ watch, state, api: api2 }) => {
+const initWatch = ({ watch, state, api: api2, props }) => {
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
   watch(() => state.minDate, api2.watchMinDate);
   watch(() => state.maxDate, api2.watchMaxDate);
   watch(() => state.minTimePickerVisible, api2.watchMinTimePickerVisible);
@@ -135,14 +138,14 @@ const initWatch = ({ watch, state, api: api2 }) => {
   watch(() => state.showTime, api2.setTimeFormat);
   watch(() => state.visible, api2.watchPickerVisible);
 };
-const initApi = ({ api: api2, state, t, vm, nextTick, emit, constants }) => {
+const initApi = ({ api: api2, state, t, vm, nextTick, emit, constants, props }) => {
   Object.assign(api2, {
     t,
     state,
     computerLabel: computerLabel({ state, t }),
     resetView: resetView({ state }),
     watchMaxDate: watchMaxDate({ state, vm }),
-    handleChangeRange: handleChangeRange(state),
+    handleChangeRange: handleChangeRange(state, props),
     handleMaxTimeClose: handleMaxTimeClose(state),
     handleMinTimeClose: handleMinTimeClose(state),
     isValidValue: isValidValue({ state }),
@@ -173,20 +176,21 @@ const initApi = ({ api: api2, state, t, vm, nextTick, emit, constants }) => {
     watchDefault: watchDefault({ state }),
     handleClear: handleClear({ emit, state }),
     setTimeFormat: setTimeFormat({ nextTick, vm, state }),
-    handleConfirm: handleConfirm({ api: api2, emit, state }),
-    handleRangePick: handleRangePick({ api: api2, state, t }),
-    handleShortcutClick: handleShortcutClick(state, api2),
+    handleConfirm: handleConfirm({ api: api2, emit, state, props, t }),
+    handleRangePick: handleRangePick({ api: api2, state, props, t }),
+    handleShortcutClick: handleShortcutClick(state, api2, props),
     computerBtnDisabled: computerBtnDisabled({ state, api: api2 }),
     computerEnableYearArrow: computerEnableYearArrow(state),
-    watchPickerVisible: watchPickerVisible({ state, constants })
+    watchPickerVisible: watchPickerVisible({ state, constants }),
+    watchModelValue: watchModelValue({ state, api: api2 })
   });
 };
 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, designConfig });
-  initApi({ api: api2, state, t, vm, nextTick, emit, constants });
-  initWatch({ watch, state, api: api2 });
+  const state = initState({ reactive, computed, api: api2, constants, designConfig, props });
+  initApi({ api: api2, state, t, vm, nextTick, emit, constants, props });
+  initWatch({ watch, state, api: api2, props });
   return api2;
 };
 export {

package/date-table/index.js

@@ -1,15 +1,15 @@
 import "../chunk-G2ADBYYC.js";
-import { formatDate } from "../common/deps/date-util";
 import {
   getFirstDayOfMonth,
   getDayCountOfMonth,
   getWeekNumber,
   prevDate,
   nextDate,
-  isDate,
-  clearTime
-} from "../common/deps/date-util";
-import { DATEPICKER } from "../common";
+  isDate1 as isDate,
+  clearTime,
+  formatDate,
+  DATEPICKER
+} from "@opentiny/utils";
 const formatJudg = ({ day, offset, j, i, cell, count, dateCountOfLastMonth }) => {
   const nodfpm = day + offset <= 0 ? 7 + day + offset : day + offset;
   if (j + i * 7 >= nodfpm) {
@@ -290,6 +290,9 @@ const getTarget = (event) => {
   return target;
 };
 const handleClick = ({ api, emit, props, state }) => (event) => {
+  if (props.readonly) {
+    return;
+  }
   let target = getTarget(event);
   if (target.tagName !== "TD") {
     return;

package/date-table/vue.js

@@ -16,7 +16,7 @@ import {
   getCellRangeClasses,
   getCell
 } from "./index";
-import { getStartDateOfMonth } from "../common/deps/date-util";
+import { getStartDateOfMonth } from "@opentiny/utils";
 const api = ["state", "getCellClasses", "getCssToken", "isWeekActive", "handleMouseMove", "handleClick"];
 const initState = ({ reactive, computed, api: api2, props }) => {
   const state = reactive({

package/dialog-box/index.js

@@ -1,9 +1,9 @@
 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";
+import { on, off, addClass, removeClass } from "@opentiny/utils";
+import { emitEvent } from "@opentiny/utils";
+import { getDomNode } from "@opentiny/utils";
 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, designConfig }) => () => {

package/dialog-box/vue.js

@@ -22,7 +22,7 @@ import {
   hideScrollbar,
   toggleFullScreen
 } from "./index";
-import usePopup from "../common/deps/vue-popup";
+import { usePopup } from "@opentiny/vue-hooks";
 const api = [
   "afterEnter",
   "afterLeave",

package/dialog-select/index.js

@@ -44,7 +44,8 @@ const queryGridData = ({ api, props, state }) => () => {
     }
   }
 };
-const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) => {
+const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked, $table }, event) => {
+  var _a, _b;
   if (checked) {
     arrayEach(selection, (item) => {
       const index = findIndexOf(state.selectedValues, (val) => val === item[props.valueField]);
@@ -67,9 +68,12 @@ const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) =
     state.selectedChanged = true;
   }
   api.selectedBoxInit();
+  if ((_b = (_a = props.gridOp) == null ? void 0 : _a.events) == null ? void 0 : _b.selectAll) {
+    props.gridOp.events.selectAll({ selection, checked, $table }, event);
+  }
 };
-const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked }) => {
-  var _a, _b, _c, _d, _e;
+const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked, $table }, event) => {
+  var _a, _b, _c, _d, _e, _f, _g;
   const property = props.valueField;
   const grid = (_a = vm.$refs) == null ? void 0 : _a.multiGrid;
   const selectedRows = grid.getSelectRecords();
@@ -103,6 +107,9 @@ const multiGridSelectChange = ({ api, props, state, vm }) => ({ row, checked })
     }
   }
   api.selectedBoxInit();
+  if ((_g = (_f = props.gridOp) == null ? void 0 : _f.events) == null ? void 0 : _g.selectChange) {
+    props.gridOp.events.selectChange({ row, checked, $table }, event);
+  }
 };
 const selectedBoxInit = ({ props, vm, nextTick }) => () => {
   const { multi, showSelectedBox } = props;
@@ -420,10 +427,14 @@ const multiTreeRadio = ({ api, props }) => () => {
     api.multiTreeCheck();
   }
 };
-const multiGridRadioChange = ({ props, state }) => ({ row }) => {
+const multiGridRadioChange = ({ props, state }) => ({ row, $table }, event) => {
+  var _a, _b;
   state.selectedValues = [row[props.valueField]];
   state.selectedDatas = [row];
   state.selectedChanged = true;
+  if ((_b = (_a = props.gridOp) == null ? void 0 : _a.events) == null ? void 0 : _b.radioChange) {
+    props.gridOp.events.radioChange({ row, $table }, event);
+  }
 };
 const watchMulti = ({ api, state, props }) => () => {
   state.splitValue = props.multi ? 0.7 : 1;

package/dialog-select/vue.js

@@ -125,10 +125,13 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit,
   watch(
     () => props.visible,
     (value) => {
-      if (value && !state.multiGridStore.inited) {
-        api2.queryGridData();
-      }
-    }
+      nextTick(() => {
+        if (value && !state.multiGridStore.inited) {
+          api2.queryGridData();
+        }
+      });
+    },
+    { immediate: true }
   );
   watch(
     () => props.multi,

package/drawer/index.js

@@ -1,6 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import debounce from "../common/deps/debounce";
-import { addClass, removeClass } from "../common/deps/dom";
+import { debounce } from "@opentiny/utils";
+import { addClass, removeClass } from "@opentiny/utils";
 const computedWidth = ({
   state,
   designConfig,

package/drop-times/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { format } from "../common/date";
+import { formatDateByPattern as format } from "@opentiny/utils";
 const init = ({ state, props }) => () => {
   let list = [];
   let value;

package/dropdown/index.js

@@ -1,6 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import { KEY_CODE } from "../common";
-import { addClass, removeClass, on, off } from "../common/deps/dom";
+import { KEY_CODE } from "@opentiny/utils";
+import { addClass, removeClass, on, off } from "@opentiny/utils";
 const watchVisible = ({ broadcast, emit, nextTick }) => (value) => {
   broadcast("TinyDropdownMenu", "visible", value);
   nextTick(() => emit("visible-change", value));
@@ -182,7 +182,13 @@ const handleMainButtonClick = ({ api, emit }) => (event) => {
   emit("button-click", event);
   api.hide();
 };
-const mounted = ({ api, vm, state, broadcast }) => () => {
+const mounted = ({
+  api,
+  vm,
+  state,
+  broadcast,
+  props
+}) => () => {
   if (state.showSelfIcon) {
     state.showIcon = false;
   }
@@ -193,6 +199,8 @@ const mounted = ({ api, vm, state, broadcast }) => () => {
   });
   if (!state.visibleIsBoolean) {
     vm.$on("is-disabled", api.clickOutside);
+  } else if (props.visible) {
+    broadcast("TinyDropdownMenu", "visible", true);
   }
 };
 const beforeDistory = ({ vm, api, state }) => () => {

package/dropdown/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { guid } from "../common/string";
+import { guid } from "@opentiny/utils";
 import {
   watchVisible,
   watchFocusing,
@@ -49,7 +49,7 @@ const renderless = (props, { reactive, watch, provide, onMounted, computed, onBe
     watchFocusing: watchFocusing(parent),
     show: show({ props, state, emit }),
     hide: hide({ api: api2, props, state, emit }),
-    mounted: mounted({ api: api2, vm, state, broadcast }),
+    mounted: mounted({ api: api2, vm, state, broadcast, props }),
     handleClick: handleClick({ api: api2, props, state, emit }),
     handleTriggerKeyDown: handleTriggerKeyDown({ api: api2, state }),
     handleItemKeyDown: handleItemKeyDown({ api: api2, props, state, emit }),

package/dropdown-item/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { on, off } from "../common/deps/dom";
+import { on, off } from "@opentiny/utils";
 const getTitle = (props) => () => {
   if (props.title) {
     return props.title;

package/dropdown-item/mf.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { omitText } from "../common/string";
+import { omitText } from "@opentiny/utils";
 const api = ["dataStore", "handleClick", "dataStore", "mouseEnter", "mouseLeave"];
 const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
   const api2 = {};

package/dropdown-menu/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import userPopper from "../common/deps/vue-popper";
+import { userPopper } from "@opentiny/vue-hooks";
 const toggleItem = (state) => (active, item) => {
   if (item.disabled) {
     return;

package/espace/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { init } from "../common/deps/eSpaceCtrl";
+import { initEspace } from "@opentiny/utils";
 import { getUserHref, getUserTitle, doUserAction, initEspaceLink, openEspace, testUID, soundEspace } from "./index";
 const api = [
   "getUserHref",
@@ -15,7 +15,7 @@ const renderless = (props, { reactive }, { service }) => {
   const { setting = {} } = service || {};
   const { widgets = {} } = setting;
   const eSpaceCtrlDisabled = widgets.ESpaceCtrl && !widgets.ESpaceCtrl.autoLink;
-  const eSpaceCtrl = eSpaceCtrlDisabled ? {} : init();
+  const eSpaceCtrl = eSpaceCtrlDisabled ? {} : initEspace();
   const state = reactive({
     initialized: false,
     dataItem: null

package/fall-menu/index.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { REFRESH_INTERVAL } from "../common";
-import { on, off } from "../common/deps/dom";
-import PopupManager from "../common/deps/popup-manager";
+import { REFRESH_INTERVAL } from "@opentiny/utils";
+import { on, off } from "@opentiny/utils";
+import { PopupManager } from "@opentiny/utils";
 import { xss } from "@opentiny/utils";
 const arrowClick = (state) => (opt) => {
   state.pager += opt;