@opentiny/vue-renderless 3.21.2 → 3.23.0

package/menu/vue.js

@@ -9,7 +9,7 @@ import {
   filterInput,
   computeData
 } from "./index";
-import debounce from "../common/deps/debounce";
+import { debounce } from "@opentiny/utils";
 const api = ["state", "setIsCurrent", "filterNodes", "filterInput"];
 const initState = ({ reactive, computed, props, api: api2 }) => {
   const state = reactive({

package/milestone/index.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { isBrowser } from "../common/browser";
+import { isServer } from "@opentiny/utils";
 const hexToRgb = (hex) => {
-  if (hex.includes("var") && isBrowser) {
+  if (hex.includes("var") && !isServer) {
     hex = hex.replace(/var\(|\)/g, "");
     hex = getComputedStyle(document.documentElement).getPropertyValue(hex);
   }
@@ -33,55 +33,16 @@ const flagOperate = ({ constants, refs, state }) => ({ event, over, text }) => {
   }
 };
 const getMileIcon = ({ constants, props }) => (node) => {
-  const smbConstants = {
-    STATUS_COLOR_MAP: {
-      DEFAULT: {
-        BORDER_COLOR: "#C2C2C2",
-        BACKGROUND_COLOR: "#FFFFFF",
-        COLOR: "#191919",
-        BOX_SHADOW_PX: "0px 0px 0px 4px",
-        FLAG_CONTENT_CLS: ".content"
-      },
-      COMPLETED: {
-        BORDER_COLOR: "#191919",
-        BACKGROUND_COLOR: "#FFFFFF",
-        COLOR: "#191919",
-        BOX_SHADOW_PX: "0px 0px 0px 4px",
-        FLAG_CONTENT_CLS: ".content"
-      },
-      DOING: {
-        BORDER_COLOR: "#191919",
-        BACKGROUND_COLOR: "#191919",
-        COLOR: "#FFFFFF",
-        BOX_SHADOW_PX: "0px 0px 0px 4px",
-        FLAG_CONTENT_CLS: ".content"
-      }
-    }
-  };
   const status = node[props.statusField];
   const statusColor = props.milestonesStatus[status];
-  if (props.solid || status === constants.STATUS_MAP.DOING) {
-    return {
-      "background-color": statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BACKGROUND_COLOR + "!important",
-      color: smbConstants.STATUS_COLOR_MAP.DOING.COLOR + "!important",
-      "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.DOING.BORDER_COLOR,
-      boxShadow: "unset"
-    };
-  }
-  if (status === constants.STATUS_MAP.COMPLETED) {
+  if (statusColor) {
     return {
-      "background-color": smbConstants.STATUS_COLOR_MAP.COMPLETED.BACKGROUND_COLOR + "!important",
-      color: statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.COLOR + "!important",
-      "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.COMPLETED.BORDER_COLOR,
+      "background-color": props.solid || status === constants.STATUS_MAP.DOING ? statusColor : "",
+      color: props.solid && status !== constants.STATUS_MAP.COMPLETED || status === constants.STATUS_MAP.DOING ? "#fff" : statusColor,
+      "border-color": statusColor,
       boxShadow: "unset"
     };
   }
-  return {
-    background: smbConstants.STATUS_COLOR_MAP.DEFAULT.BACKGROUND_COLOR + "!important",
-    color: statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.COLOR + "!important",
-    "border-color": statusColor || smbConstants.STATUS_COLOR_MAP.DEFAULT.BORDER_COLOR,
-    boxShadow: "unset"
-  };
 };
 const getMileContent = (props) => ({ data, index }) => {
   const content = data[props.flagBefore ? index : index + 1][props.flagField];

package/modal/index.js

@@ -1,9 +1,9 @@
 import "../chunk-G2ADBYYC.js";
-import { KEY_CODE } from "../common";
-import { on, off, addClass, hasClass, removeClass } from "../common/deps/dom";
-import PopupManager from "../common/deps/popup-manager";
-import { getDomNode } from "../common/deps/dom";
-import { getViewportWindow } from "../common/global";
+import { KEY_CODE } from "@opentiny/utils";
+import { on, off, addClass, hasClass, removeClass } from "@opentiny/utils";
+import { PopupManager } from "@opentiny/utils";
+import { getDomNode } from "@opentiny/utils";
+import { getViewportWindow } from "@opentiny/utils";
 const DragClass = "is__drag";
 const emitZoom = ({ params, parent, emit, event }) => {
   let { $listeners, events = {} } = parent;

package/month-range/index.js

@@ -1,5 +1,15 @@
 import "../chunk-G2ADBYYC.js";
-import { isDate, modifyWithTimeString, prevYear, nextYear, nextMonth } from "../common/deps/date-util";
+import {
+  DATEPICKER,
+  isDate1 as isDate,
+  toDate1,
+  modifyDate,
+  formatDate,
+  modifyWithTimeString,
+  prevYear,
+  nextYear,
+  nextMonth1 as nextMonth
+} from "@opentiny/utils";
 const calcDefaultValue = (defaultValue) => {
   if (Array.isArray(defaultValue)) {
     return [new Date(defaultValue[0]), new Date(defaultValue[1])];
@@ -57,7 +67,10 @@ const handleChangeRange = (state) => (val) => {
   state.maxDate = val.maxDate;
   state.rangeState = val.rangeState;
 };
-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 || [];
   const max = modifyWithTimeString(val.maxDate, defaultTime[1], t);
   const min = modifyWithTimeString(val.minDate, defaultTime[0], t);
@@ -78,11 +91,19 @@ const handleRangePick = ({ api, state, t }) => (val, close = true) => {
   }
   api.handleConfirm();
 };
-const handleShortcutClick = (api) => (shortcutObj) => {
+const handleShortcutClick = (state, api, props) => (shortcutObj) => {
   if (shortcutObj.onClick) {
     const choose = {
       $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);
+        }
       }
     };
     shortcutObj.onClick(choose);
@@ -105,9 +126,17 @@ const rightNextYear = (state) => () => {
 };
 const leftNextYear = (state) => () => state.leftDate = nextYear(state.leftDate);
 const rightPrevYear = (state) => () => state.rightDate = prevYear(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 = DATEPICKER.DateFormats.monthrange;
+    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[1] && value[0] && isDate(value[1]) && isDate(value[0]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[1]) && !state.disabledDate(value[0]) : true);
@@ -115,6 +144,19 @@ 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;
 };
+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() + 1, newVal.getUTCDate());
+    const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth() + 1, newVal1.getUTCDate());
+    state.value = [start, end];
+    state.minDate = start;
+    state.maxDate = end;
+    state.leftDate = start;
+    state.rightDate = end;
+  }
+};
 export {
   calcDefaultValue,
   doPick,
@@ -130,5 +172,6 @@ export {
   rightNextYear,
   rightPrevYear,
   watchDefaultValue,
+  watchModelValue,
   watchValue
 };

package/month-range/vue.js

@@ -13,9 +13,10 @@ import {
   handleChangeRange,
   handleRangePick,
   handleShortcutClick,
-  doPick
+  doPick,
+  watchModelValue
 } from "./index";
-import { nextYear } from "../common/deps/date-util";
+import { nextYear } from "@opentiny/utils";
 const api = [
   "state",
   "rightNextYear",
@@ -25,12 +26,13 @@ const api = [
   "handleChangeRange",
   "leftPrevYear",
   "leftNextYear",
-  "isValidValue"
+  "isValidValue",
+  "watchModelValue"
 ];
-const initState = ({ reactive, computed, api: api2, t }) => {
+const initState = ({ reactive, computed, api: api2, props, t }) => {
   const state = reactive({
-    popperClass: "",
-    value: [],
+    popperClass: props.popperClass || "",
+    value: props.modelValue || [],
     defaultValue: null,
     defaultTime: null,
     minDate: "",
@@ -38,12 +40,12 @@ const initState = ({ reactive, computed, api: api2, t }) => {
     leftDate: /* @__PURE__ */ new Date(),
     rightDate: nextYear(/* @__PURE__ */ new Date()),
     rangeState: { endDate: null, selecting: false, row: null, column: null },
-    shortcuts: "",
+    shortcuts: props.shortcuts || [],
     visible: "",
-    disabledDate: "",
-    format: "",
+    disabledDate: props.disabledDate || null,
+    format: props.format || "",
     arrowControl: false,
-    unlinkPanels: false,
+    unlinkPanels: props.unlinkPanels || false,
     btnDisabled: computed(
       () => !(state.minDate && state.maxDate && !state.selecting && api2.isValidValue([state.minDate, state.maxDate]))
     ),
@@ -60,11 +62,11 @@ const initState = ({ reactive, computed, api: api2, t }) => {
 const renderless = (props, { computed, reactive, watch }, { t, emit: $emit }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2, t });
+  const state = initState({ reactive, computed, api: api2, props, t });
   Object.assign(api2, {
     state,
     resetView: resetView(state),
-    handleChangeRange: handleChangeRange(state),
+    handleChangeRange: handleChangeRange(state, props),
     isValidValue: isValidValue(state),
     leftNextYear: leftNextYear(state),
     leftPrevYear: leftPrevYear(state),
@@ -74,10 +76,12 @@ const renderless = (props, { computed, reactive, watch }, { t, emit: $emit }) =>
     watchValue: watchValue({ state }),
     handleClear: handleClear({ emit, state }),
     watchDefaultValue: watchDefaultValue({ state }),
-    handleConfirm: handleConfirm({ api: api2, emit, state }),
-    handleRangePick: handleRangePick({ api: api2, state, t }),
-    handleShortcutClick: handleShortcutClick(api2)
+    handleConfirm: handleConfirm({ api: api2, emit, state, props, t }),
+    handleRangePick: handleRangePick({ api: api2, state, props, t }),
+    handleShortcutClick: handleShortcutClick(state, api2, props),
+    watchModelValue: watchModelValue({ state, api: api2 })
   });
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
   watch(() => state.value, api2.watchValue);
   watch(() => state.defaultValue, api2.watchDefaultValue);
   return api2;

package/month-table/index.js

@@ -1,9 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import { toDate } from "../common/date";
-import { hasClass } from "../common/deps/dom";
-import { range as rangeDate, getDayCountOfMonth, nextDate } from "../common/deps/date-util";
+import { range as rangeDate, getDayCountOfMonth, nextDate, toDate1, hasClass, DATEPICKER } from "@opentiny/utils";
 import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from "../date-table";
-import { DATEPICKER } from "../common";
 const datesInMonth = (year, month) => {
   const numOfDays = getDayCountOfMonth(year, month);
   const firstDay = new Date(year, month, 1);
@@ -122,6 +119,9 @@ const handleMouseMove = ({ api, emit, props, state }) => (event) => {
   }
 };
 const handleMonthTableClick = ({ api, emit, props }) => (event) => {
+  if (props.readonly) {
+    return;
+  }
   const target = getTarget(event);
   if (!target) {
     return;
@@ -160,7 +160,7 @@ const getCellStyle = ({ api, props }) => (cell) => {
   const month = cell.text;
   const defaultValue = props.defaultValue ? Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue] : [];
   style.disabled = typeof props.disabledDate === "function" ? datesInMonth(year, month).every(props.disabledDate) : false;
-  const execDate = typeof props.value === "object" ? props.value : toDate(props.value);
+  const execDate = typeof props.value === "object" ? props.value : toDate1(props.value);
   style.current = arrayFindIndex(
     coerceTruthyValueToArray(execDate),
     (date) => date.getFullYear() === year && date.getMonth() === month

package/month-table/vue.js

@@ -10,7 +10,7 @@ import {
   getCellStyle,
   getMonthOfCell
 } from "./index";
-import { DATEPICKER } from "../common";
+import { DATEPICKER } from "@opentiny/utils";
 const api = ["state", "handleMonthTableClick", "handleMouseMove", "getCellStyle"];
 const renderless = (props, { computed, reactive, watch }, { t, vm, emit }) => {
   const api2 = {};

package/nav-menu/index.js

@@ -1,12 +1,12 @@
 import "../chunk-G2ADBYYC.js";
-import { omitText } from "../common/string";
-import { isEmptyObject, isObject } from "../common/type";
-import PopupManager from "../common/deps/popup-manager";
+import { omitText } from "@opentiny/utils";
+import { isEmptyObject, isObject } from "@opentiny/utils";
+import { PopupManager } from "@opentiny/utils";
 import { mapTree } from "../grid/static";
-import { transformTreeData } from "../common/array";
-import { on, off } from "../common/deps/dom";
+import { transformTreeData } from "@opentiny/utils";
+import { on, off } from "@opentiny/utils";
 import { xss } from "@opentiny/utils";
-import { isBrowser } from "../common/browser";
+import { isServer } from "@opentiny/utils";
 const { nextZIndex } = PopupManager;
 const computedIsShowMore = ({ props, state }) => () => !/^(retract|fixed|hidden)$/.test(props.overflow) && state.more && state.more.length;
 const computedPopClass = (state) => () => {
@@ -348,7 +348,7 @@ const skip = ({ api, router, fields }) => (item, flag = false) => {
   }
 };
 const getPoint = ({ api, parent }) => () => {
-  if (!isBrowser)
+  if (isServer)
     return 0;
   else {
     const items = parent.$el.querySelectorAll(".menu>li");

package/notify/index.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
-import { KEY_CODE } from "../common";
-import { on, off } from "../common/deps/dom";
-import PopupManager from "../common/deps/popup-manager";
+import { KEY_CODE } from "@opentiny/utils";
+import { on, off } from "@opentiny/utils";
+import { PopupManager } from "@opentiny/utils";
 const startTimer = ({ api, state }) => () => {
   if (state.duration > 0) {
     state.timer = setTimeout(() => {

package/number-animation/index.js

@@ -0,0 +1,53 @@
+import "../chunk-G2ADBYYC.js";
+const onFinish = ({ emit, props, state }) => () => {
+  state.value = props.to;
+  state.animating = false;
+  emit("finish");
+};
+const easeOut = (t) => 1 - (1 - t) ** 5;
+const play = ({ props, state, api }) => () => {
+  animate(state, props, api);
+};
+const animate = (state, props, api) => {
+  state.animating = true;
+  state.value = props.from;
+  if (props.from !== props.to) {
+    const startTime = performance.now();
+    const tick = () => {
+      const current = performance.now();
+      const elapsedTime = Math.min(current - startTime, props.duration);
+      const currentValue = props.from + (props.to - props.from) * easeOut(elapsedTime / props.duration);
+      if (elapsedTime === props.duration) {
+        api.onFinish();
+        return;
+      }
+      state.value = currentValue;
+      requestAnimationFrame(tick);
+    };
+    tick();
+  }
+};
+const formattedValue = ({ state, props }) => () => {
+  if (typeof state.value !== "number" && typeof state.value !== "string")
+    return;
+  if (typeof props.precision !== "number")
+    return;
+  const numValue = Number(state.value);
+  if (isNaN(numValue) || !isFinite(numValue))
+    return;
+  if (numValue === 0) {
+    return numValue.toFixed(props.precision);
+  }
+  let formatValue = numValue.toFixed(props.precision);
+  if (typeof props.separator === "string" && props.separator !== "") {
+    const [integerPart, decimalPart] = formatValue.split(".");
+    formatValue = integerPart.replace(/(\d)(?=(\d{3})+$)/g, "$1" + props.separator) + (decimalPart ? "." + decimalPart : "");
+  }
+  return formatValue;
+};
+export {
+  animate,
+  formattedValue,
+  onFinish,
+  play
+};

package/number-animation/vue.js

@@ -0,0 +1,27 @@
+import "../chunk-G2ADBYYC.js";
+import { play, formattedValue, onFinish } from "./index";
+const api = ["state", "play", "formattedValue", "onFinish"];
+const renderless = (props, { onMounted, computed, reactive }, { emit }) => {
+  const api2 = {};
+  const state = reactive({
+    animating: true,
+    value: props.from,
+    showValue: computed(() => api2.formattedValue(state, props))
+  });
+  onMounted(() => {
+    if (props.active) {
+      api2.play(props, state);
+    }
+  });
+  Object.assign(api2, {
+    state,
+    play: play({ props, state, api: api2 }),
+    formattedValue: formattedValue({ state, props }),
+    onFinish: onFinish({ emit, props, state })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/numeric/index.js

@@ -2,11 +2,11 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { formatNumber, roundFixed } from "../common/decimal";
-import { getMiniDecimal, lessEquals, equalsDecimal } from "../common/bigInt";
-import { isNumber, isNull } from "../common/type";
-import { MOUSEDELTA } from "../common";
-import { on, off } from "../common/deps/dom";
+import { formatNumber, roundFixed } from "@opentiny/utils";
+import { getMiniDecimal, lessEquals, equalsDecimal } from "@opentiny/utils";
+import { isNumber, isNull } from "@opentiny/utils";
+import { MOUSEDELTA } from "@opentiny/utils";
+import { on, off } from "@opentiny/utils";
 const initService = (service) => {
   const { utils = {} } = service || {};
   const noopFn = () => null;

package/option/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { getObj } from "../common/object";
+import { getObj } from "@opentiny/utils";
 const escapeRegexpString = (value = "") => String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
 const isEqual = ({ select, state }) => (a, b) => {
   if (!state.isObject) {

package/option/vue.js

@@ -26,7 +26,7 @@ const initState = ({ reactive, computed, props, api: api2, markRaw, select, pare
     disabled: computed(() => props.disabled || state.groupDisabled),
     isObject: computed(() => Object.prototype.toString.call(props.value).toLowerCase() === "[object object]"),
     currentLabel: computed(() => props.label || (state.isObject ? "" : props.value)),
-    currentValue: computed(() => props.value || props.label || ""),
+    currentValue: props.value || props.label || "",
     itemSelected: computed(() => {
       if (!select.multiple) {
         return api2.isEqual(props.value, select.state.modelValue);
@@ -73,6 +73,7 @@ const initWatch = ({ watch, props, state, select, constants }) => {
     () => props.value,
     (value, oldVal) => {
       const { remote, valueKey } = select;
+      state.currentValue = value || props.label || "";
       if (!props.created && !remote) {
         if (valueKey && typeof value === "object" && typeof oldVal === "object" && value[valueKey] === oldVal[valueKey]) {
           return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.21.2",
+  "version": "3.23.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,7 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "^1.0.0",
+    "@opentiny/utils": "~3.23.0",
+    "@opentiny/vue-hooks": "~3.23.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/pager/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { emitEvent } from "../common/event";
+import { emitEvent } from "@opentiny/utils";
 const computedShowPager = ({ props, state }) => () => {
   const hidePager = props.hideOnSinglePage && (!state.internalPageCount || state.internalPageCount === 1);
   return state.internalLayout.length > 0 && !hidePager;
@@ -78,19 +78,16 @@ const handleJumperFocus = ({ state }) => (e) => {
   var _a;
   state.jumperBackup = (_a = e.target) == null ? void 0 : _a.value;
 };
-const watchInternalCurrentPage = ({ state, emit }) => (currentPage) => {
+const watchInternalCurrentPage = ({ state, emit, props }) => (currentPage) => {
   const value = String(currentPage);
   if (state.jumperValue !== value) {
     state.jumperValue = value;
   }
-  emit("update:current-page", currentPage);
-  emit("current-change", currentPage);
-  state.lastEmittedPage = -1;
-};
-const watchPageSizes = ({ state, props }) => (newVal) => {
-  if (Array.isArray(newVal)) {
-    state.internalPageSize = newVal.includes(props.pageSize) ? props.pageSize : newVal[0];
+  if (props.changeCompat) {
+    emit("update:current-page", currentPage);
+    emit("current-change", currentPage);
   }
+  state.lastEmittedPage = -1;
 };
 const watchCurrentPage = ({ state, api }) => (curPage) => {
   state.internalCurrentPage = api.getValidCurrentPage(curPage);
@@ -105,8 +102,10 @@ const watchInternalPageCount = ({ state, api }) => (pageCount) => {
   }
   state.userChangePageSize = false;
 };
-const watchPageSize = ({ state }) => (pageSize) => {
-  state.internalPageSize = isNaN(pageSize) ? 10 : pageSize;
+const watchInternalPageSize = ({ props, emit }) => (pageSize) => {
+  if (props.changeCompat) {
+    emit("size-change", pageSize);
+  }
 };
 const watchTotal = ({ state }) => (total) => {
   state.internalTotal = total;
@@ -133,7 +132,9 @@ const handleSizeChange = ({ props, state, api, emit, vm }) => (val) => {
       state.userChangePageSize = true;
       state.showSizes = false;
       emit("update:pageSize", val);
-      emit("size-change", val);
+      if (!props.changeCompat) {
+        emit("size-change", val);
+      }
       emit("page-change", {
         currentPage: state.internalCurrentPage,
         pageSize: val,
@@ -338,10 +339,21 @@ const getValidCurrentPage = ({ state }) => (val) => {
   }
   return resetVal === void 0 ? parseVal : resetVal;
 };
-const emitChange = ({ state, nextTick, emit }) => () => {
+const getInternalPageSize = ({ props }) => () => {
+  const { pageSize, pageSizes } = props;
+  let internalPageSize = isNaN(pageSize) ? 10 : Number(pageSize);
+  if (Array.isArray(pageSizes)) {
+    internalPageSize = pageSizes.includes(pageSize) ? pageSize : pageSizes[0];
+  }
+  return internalPageSize;
+};
+const emitChange = ({ state, nextTick, emit, props }) => () => {
   nextTick(() => {
     if (state.internalCurrentPage !== state.lastEmittedPage || state.userChangePageSize) {
-      emit("update:current-page", state.internalCurrentPage);
+      if (!props.changeCompat) {
+        emit("update:current-page", state.internalCurrentPage);
+        emit("current-change", state.internalCurrentPage);
+      }
       emit("page-change", {
         currentPage: state.internalCurrentPage,
         pageSize: state.internalPageSize,
@@ -373,6 +385,7 @@ export {
   computedTotalText,
   copyEmit,
   emitChange,
+  getInternalPageSize,
   getValidCurrentPage,
   handleCurrentChange,
   handleJumperChange,
@@ -390,8 +403,7 @@ export {
   watchCurrentPage,
   watchInternalCurrentPage,
   watchInternalPageCount,
-  watchPageSize,
-  watchPageSizes,
+  watchInternalPageSize,
   watchShowSizes,
   watchTotal
 };