@opentiny/vue-renderless 3.12.1 → 3.13.1

package/label/index.js

@@ -0,0 +1,56 @@
+import "../chunk-G2ADBYYC.js";
+const prefix = "tiny-mobile-label-";
+function numFormat(num, decimal) {
+  let str = "";
+  str = (Math.round(num * 100) / 100).toFixed(decimal).toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+    return $1 + ",";
+  });
+  return str;
+}
+function handleNumberLabel(label, decimal) {
+  let val = label;
+  const reg1 = /[^(\-|\+)?\d+(\.\d+)?$]/g;
+  const reg2 = /0*([1-9]\d*|0\.\d+)/;
+  val = val.replace(reg1, "").replace(reg2, "$1");
+  let arr = val.split(".");
+  let numStr = "";
+  for (let i = 0; i < arr.length; i++) {
+    if (i === arr.length - 1 && arr.length > 1) {
+      numStr += ".";
+    }
+    numStr += arr[i];
+  }
+  numStr = numFormat(numStr, decimal);
+  numStr = numStr.replace(/\d+/, (s) => {
+    return s.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
+  });
+  return numStr;
+}
+const handleClick = ({ emit, state }) => () => {
+  emit("click", state.label);
+};
+const computeLabel = (props) => () => {
+  let label = props.label;
+  if (props.type === "number") {
+    label = handleNumberLabel(props.label, props.decimal);
+  }
+  if (props.limit !== 0 && label.length > props.limit) {
+    return label.slice(0, props.limit);
+  }
+  return label;
+};
+const computeLabelClass = (props) => () => {
+  return [
+    `${prefix}${props.size}`,
+    `${prefix}${props.color}`,
+    `${prefix}${props.position}`,
+    props.wholeline || props.ellipsis === 1 || props.ellipsis === 2 || props.ellipsis === 3 ? `${prefix}wholeline` : "",
+    props.ellipsis > 0 && props.ellipsis < 4 ? `${prefix}ellipsis${props.ellipsis}` : "",
+    props.bold ? `${prefix}bold` : ""
+  ];
+};
+export {
+  computeLabel,
+  computeLabelClass,
+  handleClick
+};

package/label/vue.js

@@ -0,0 +1,26 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, computeLabel, computeLabelClass } from "./index";
+const api = ["state", "handleClick", "computeLabel", "computeLabelStyle", "computeLabelClass"];
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject }, { emit, parent }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    label: computed(() => api2.computeLabel()),
+    type: props.type,
+    color: props.color,
+    size: props.size,
+    labelClass: computed(() => api2.computeLabelClass()),
+    isRequired: props.isRequired
+  });
+  const api2 = {
+    state,
+    handleClick: handleClick({ emit, state }),
+    computeLabel: computeLabel(props),
+    // computeLabelStyle: computeLabelStyle(props, state),
+    computeLabelClass: computeLabelClass(props)
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/mask/index.js

@@ -0,0 +1,13 @@
+import "../chunk-G2ADBYYC.js";
+const handleTouch = ({ props, emit }) => (event) => {
+  if (props.cancelTouch) {
+    event.preventDefault();
+    event.stopPropagation();
+  } else {
+    emit("update:visible", false);
+  }
+  emit("click", props.visible);
+};
+export {
+  handleTouch
+};

package/mask/vue.js

@@ -0,0 +1,18 @@
+import "../chunk-G2ADBYYC.js";
+import { handleTouch } from "./index";
+const api = ["state", "handleTouch"];
+const renderless = (props, { reactive, computed }, { emit }) => {
+  const api2 = {};
+  const state = reactive({
+    calcStyle: computed(() => ({ zIndex: props.zIndex }))
+  });
+  Object.assign(api2, {
+    state,
+    handleTouch: handleTouch({ props, emit })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/numeric/index.js

@@ -219,9 +219,19 @@ const handleInput = ({ state, api, emit, props }) => (event) => {
   state.lastInput = value;
   state.userInput = value;
 };
-const handleInputChange = ({ api }) => (event) => {
-  const value = event.target.value;
-  api.setCurrentValue(value === "-" ? 0 : value);
+const handleInputChange = ({ api, state, props }) => (event) => {
+  var _a, _b;
+  const value = ((_a = event.target) == null ? void 0 : _a.value) === "-" ? 0 : (_b = event.target) == null ? void 0 : _b.value;
+  if (props.stepStrictly) {
+    const previousValue = Number((props.mouseWheel ? state.displayValue : props.modelValue) || 0);
+    if (Math.abs(previousValue - value) % Number(props.step) === 0)
+      return api.setCurrentValue(value);
+    const step = Number(props.step);
+    const difference = value - previousValue;
+    const sign = difference >= 0 ? 1 : -1;
+    return api.setCurrentValue(sign * Math.round(Math.abs(difference) / step) * step + previousValue);
+  }
+  api.setCurrentValue(value);
 };
 const select = (refs) => () => refs.input.select();
 const mounted = ({ constants, parent, props, state }) => () => {

package/numeric/vue.js

@@ -91,7 +91,7 @@ const initApi = ({
     displayValue: displayValue({ props, state }),
     internalDecrease: internalDecrease({ api: api2, state }),
     internalIncrease: internalIncrease({ api: api2, state }),
-    handleInputChange: handleInputChange({ api: api2 }),
+    handleInputChange: handleInputChange({ api: api2, state, props }),
     mouseEvent: mouseEvent({ api: api2, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api: api2 }),
     watchValue: watchValue({ api: api2, state, nextTick }),
@@ -108,6 +108,11 @@ const initWatch = ({
   props,
   api: api2
 }) => {
+  watch(() => [props.max, props.min], ([curMax, curMin]) => {
+    if (curMax < curMin) {
+      throw new Error("[Numeric]: The maximum value should not be less than to the minimum value");
+    }
+  }, { immediate: true });
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
   watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
 };

package/option/index.js

@@ -32,9 +32,8 @@ const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
     select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
   }
 };
-const queryChange = ({ select, props, state }) => (query) => {
+const queryChange = ({ props, state }) => (query) => {
   state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || props.created;
-  select.state.filteredOptionsCount += state.visible ? 1 : -1;
 };
 const toggleEvent = ({ props, vm, type }) => {
   const optionEl = vm.$refs.option;

package/option/vue.js

@@ -49,7 +49,7 @@ const initApi = ({ api: api2, props, state, select, constants, vm }) => {
     isEqual: isEqual({ select, state }),
     contains: contains({ select, state }),
     hoverItem: hoverItem({ select, vm, props, state }),
-    queryChange: queryChange({ select, props, state }),
+    queryChange: queryChange({ props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
     handleGroupDisabled: handleGroupDisabled(state),
     initValue: initValue({ select, props, constants, vm })
@@ -76,6 +76,12 @@ const initWatch = ({ watch, props, state, select, constants }) => {
       }
     }
   );
+  watch(
+    () => state.visible,
+    () => {
+      select.state.filteredOptionsCount += state.visible ? 1 : -1;
+    }
+  );
 };
 const initOnMounted = ({ onMounted, props, api: api2, vm, state, constants, select }) => {
   onMounted(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.12.1",
+  "version": "3.13.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

package/pager/index.js

@@ -0,0 +1,358 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { emitEvent } from "../common/event";
+const computedShowPager = ({ props, state }) => () => {
+  const hidePager = props.hideOnSinglePage && (!state.internalPageCount || state.internalPageCount === 1);
+  return state.internalLayout.length > 0 && !hidePager;
+};
+const computedInternalLayout = ({ props }) => () => {
+  let layout = "";
+  if (props.mode && !props.layout) {
+    props.mode === "number" && (layout = "total, sizes, prev, pager, next, jumper");
+    props.mode === "simple" && (layout = "sizes, total, prev, current, next");
+    props.mode === "complete" && (layout = "sizes, total, prev, pager, next, jumper");
+    props.mode === "fixed" && (layout = "prev,pager,next");
+  } else if (!props.mode && props.layout || props.mode && props.layout) {
+    layout = props.layout;
+  } else {
+    layout = "total, prev, pager, next, jumper";
+  }
+  if (!layout) {
+    return [];
+  } else {
+    const components = layout.split(",").map((item) => item.trim());
+    return components;
+  }
+};
+const computedTotalText = ({ props, t }) => () => {
+  if (typeof props.customTotal === "string")
+    return props.customTotal;
+  const totals = Number(props.total);
+  if (isNaN(totals))
+    return "0";
+  const HUNDRED_THOUSAND = 1e5;
+  const MILLION = 1e6;
+  const TEN_MILLION = 1e7;
+  if (totals <= HUNDRED_THOUSAND) {
+    return String(totals);
+  } else if (totals <= MILLION) {
+    return t("ui.page.hundredThousand");
+  } else if (totals <= TEN_MILLION) {
+    return t("ui.page.million");
+  } else {
+    return t("ui.page.tenMillion");
+  }
+};
+const computedInternalPageCount = ({ props, state }) => () => {
+  if (typeof props.total === "number") {
+    return Math.max(1, Math.ceil(props.total / state.internalPageSize));
+  } else if (typeof props.pageCount === "number") {
+    return Math.max(1, props.pageCount);
+  }
+  return null;
+};
+const handleJumperFocus = ({ state }) => (e) => {
+  var _a;
+  state.jumperBackup = (_a = e.target) == null ? void 0 : _a.value;
+};
+const watchInternalCurrentPage = ({ state, emit }) => (currentPage) => {
+  const value = String(currentPage);
+  if (state.jumperValue !== value) {
+    state.jumperValue = value;
+  }
+  emit("update:currentPage", 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];
+  }
+};
+const watchCurrentPage = ({ state, api }) => (curPage) => {
+  state.internalCurrentPage = api.getValidCurrentPage(curPage);
+};
+const watchInternalPageCount = ({ state, api }) => (pageCount) => {
+  const oldCurPage = state.internalCurrentPage;
+  if (pageCount && pageCount > 0 && oldCurPage === 0) {
+    state.internalCurrentPage = 1;
+  } else if (oldCurPage > Number(pageCount)) {
+    state.internalCurrentPage = pageCount || 1;
+    state.userChangePageSize && api.emitChange();
+  }
+  state.userChangePageSize = false;
+};
+const watchPageSize = ({ state }) => (pageSize) => {
+  state.internalPageSize = isNaN(pageSize) ? 10 : pageSize;
+};
+const watchTotal = ({ state }) => (total) => {
+  state.internalTotal = total;
+};
+const handleSizeChange = ({ props, state, api, emit, vm }) => (val) => {
+  val = Number(val);
+  if (val !== state.internalPageSize) {
+    const callback = () => {
+      if (!api.beforeChangeHandler()) {
+        return;
+      }
+      state.internalPageSize = val;
+      state.userChangePageSize = true;
+      state.showSizes = false;
+      emit("update:pageSize", val);
+      emit("size-change", val);
+      emit("page-change", {
+        currentPage: state.internalCurrentPage,
+        pageSize: val,
+        total: state.internalTotal
+      });
+      vm.$refs.sizesList[0].state.showPopper = false;
+    };
+    if (props.isBeforePageChange) {
+      let newPageSize = val;
+      let currentPageSize = state.internalPageSize;
+      let params = { newPageSize, currentPageSize, callback };
+      api.beforeSizeChangeHandler(params);
+    } else {
+      callback();
+    }
+  }
+};
+const handleJumperInput = ({ state }) => (e) => {
+  const target = e.target;
+  if (!target.value) {
+    state.jumperValue = "";
+  } else if (/^\d+$/.test(target.value)) {
+    state.jumperValue = target.value || "1";
+  }
+  target.value = state.jumperValue;
+};
+const handleJumperChange = ({ props, state, api }) => () => {
+  api.parseValueNumber();
+  const callback = () => {
+    api.handleJumperClick();
+  };
+  const rollback = () => {
+    state.jumperValue = String(state.jumperBackup);
+  };
+  const newPage = state.jumperValue;
+  const currentPage = state.jumperBackup;
+  if (props.isBeforePageChange && newPage !== currentPage) {
+    const params = { newPage, currentPage, callback, rollback };
+    api.beforePagerChangeHandler(params);
+  } else {
+    callback();
+  }
+};
+const handleJumperClick = ({ props, state, api }) => () => {
+  if (!api.canJumperGo() || props.disabled)
+    return;
+  state.internalCurrentPage = api.getValidCurrentPage(state.jumperValue);
+  api.emitChange();
+};
+const isValueNumber = ({ state }) => () => {
+  return !isNaN(Number(state.jumperValue));
+};
+const parseValueNumber = ({ state }) => () => {
+  let value = Number(
+    String(state.jumperValue).split(/[^0-9-+.]/).join("")
+  );
+  if (isNaN(value)) {
+    value = 1;
+  }
+  value = Number(value.toFixed(0));
+  const min = 1;
+  const max = state.internalPageCount || 1;
+  if (value >= max) {
+    state.jumperValue = String(max);
+  } else if (value <= min) {
+    state.jumperValue = String(min);
+  } else {
+    state.jumperValue = String(value);
+  }
+};
+const handleSizeShowPopover = ({ state, props }) => () => {
+  if (props.disabled) {
+    state.showSizes = false;
+    return;
+  }
+  state.showSizes = true;
+};
+const handleSizeHidePopover = ({ state }) => () => {
+  state.showSizes = false;
+};
+const canJumperGo = ({ props, state, vm }) => () => {
+  const inputValue = Number(vm.$refs.jumperInput[0].value || 0);
+  const currentPage = Number(state.internalCurrentPage || 0);
+  return props.accurateJumper ? inputValue !== currentPage : true;
+};
+const beforeSizeChangeHandler = ({ state, emit }) => (params) => {
+  const { newPageSize, currentPageSize, callback } = params;
+  const newPage = 1;
+  const currentPage = state.internalCurrentPage;
+  const temp = {
+    newPage,
+    newPageSize,
+    currentPage,
+    currentPageSize,
+    callback
+  };
+  emit("before-page-change", temp);
+};
+const beforePagerChangeHandler = ({ state, emit }) => (params) => {
+  const { newPage, currentPage, callback, rollback } = params;
+  const newPageSize = state.internalPageSize;
+  const currentPageSize = state.internalPageSize;
+  const temp = {
+    newPage,
+    newPageSize,
+    currentPage,
+    currentPageSize,
+    callback,
+    rollback
+  };
+  emit("before-page-change", temp);
+};
+const beforeJumperChangeHandler = ({ state, emit }) => (params) => {
+  const { newPage, currentPage, callback, rollback } = params;
+  const newPageSize = state.internalPageSize;
+  const currentPageSize = state.internalPageSize;
+  const temp = {
+    newPage,
+    newPageSize,
+    currentPage,
+    currentPageSize,
+    callback,
+    rollback
+  };
+  emit("before-page-change", temp);
+};
+const copyEmit = ({ emit }) => (...args) => {
+  emit(args[0], ...args.slice(1));
+};
+const beforeChangeHandler = ({ state, api }) => (val = -1) => {
+  return emitEvent(api.copyEmit, "before-change", state.internalCurrentPage, void 0, val);
+};
+const handleCurrentChange = ({ state, api }) => (val) => {
+  if (!api.beforeChangeHandler(val)) {
+    return;
+  }
+  state.internalCurrentPage = api.getValidCurrentPage(val);
+  state.userChangePageSize = true;
+  api.emitChange();
+};
+const prev = ({ state, props, api, emit }) => () => {
+  const callback = () => {
+    if (props.disabled || !api.beforeChangeHandler(state.internalCurrentPage - 1)) {
+      return;
+    }
+    const newVal = state.internalCurrentPage - 1;
+    state.internalCurrentPage = api.getValidCurrentPage(newVal);
+    emit("prev-click", state.internalCurrentPage);
+    api.emitChange();
+  };
+  if (props.isBeforePageChange) {
+    const newPage = state.internalCurrentPage - 1;
+    const temp = api.buildBeforePageChangeParam({ newPage, callback });
+    emit("before-page-change", temp);
+  } else {
+    callback();
+  }
+};
+const next = ({ props, state, api, emit }) => () => {
+  const callback = () => {
+    if (props.disabled || !api.beforeChangeHandler(state.internalCurrentPage + 1)) {
+      return;
+    }
+    const newVal = state.internalCurrentPage + 1;
+    state.internalCurrentPage = api.getValidCurrentPage(newVal);
+    emit("next-click", state.internalCurrentPage);
+    api.emitChange();
+  };
+  if (props.isBeforePageChange) {
+    const newPage = state.internalCurrentPage + 1;
+    const temp = api.buildBeforePageChangeParam({ newPage, callback });
+    emit("before-page-change", temp);
+  } else {
+    callback();
+  }
+};
+const buildBeforePageChangeParam = ({ state }) => (param) => {
+  const currentPage = state.internalCurrentPage;
+  const newPageSize = state.internalPageSize;
+  const currentPageSize = state.internalPageSize;
+  return __spreadValues({ currentPage, newPageSize, currentPageSize }, param);
+};
+const getValidCurrentPage = ({ state }) => (val) => {
+  const parseVal = Number(val);
+  const hasPageCount = typeof state.internalPageCount === "number";
+  let resetVal;
+  if (hasPageCount) {
+    if (parseVal < 1) {
+      resetVal = 1;
+    } else if (parseVal > (state.internalPageCount || 0)) {
+      resetVal = state.internalPageCount;
+    }
+  } else {
+    if (isNaN(parseVal) || parseVal < 1) {
+      resetVal = 1;
+    }
+  }
+  if (resetVal === void 0 && isNaN(parseVal)) {
+    resetVal = 1;
+  } else if (resetVal === 0) {
+    resetVal = 1;
+  }
+  return resetVal === void 0 ? parseVal : resetVal;
+};
+const emitChange = ({ state, nextTick, emit }) => () => {
+  nextTick(() => {
+    if (state.internalCurrentPage !== state.lastEmittedPage || state.userChangePageSize) {
+      emit("update:current-page", state.internalCurrentPage);
+      emit("page-change", {
+        currentPage: state.internalCurrentPage,
+        pageSize: state.internalPageSize,
+        total: state.internalTotal
+      });
+      state.lastEmittedPage = state.internalCurrentPage;
+      state.userChangePageSize = false;
+    }
+  });
+};
+const setTotal = ({ state }) => (val) => {
+  state.internalTotal = val;
+};
+export {
+  beforeChangeHandler,
+  beforeJumperChangeHandler,
+  beforePagerChangeHandler,
+  beforeSizeChangeHandler,
+  buildBeforePageChangeParam,
+  canJumperGo,
+  computedInternalLayout,
+  computedInternalPageCount,
+  computedShowPager,
+  computedTotalText,
+  copyEmit,
+  emitChange,
+  getValidCurrentPage,
+  handleCurrentChange,
+  handleJumperChange,
+  handleJumperClick,
+  handleJumperFocus,
+  handleJumperInput,
+  handleSizeChange,
+  handleSizeHidePopover,
+  handleSizeShowPopover,
+  isValueNumber,
+  next,
+  parseValueNumber,
+  prev,
+  setTotal,
+  watchCurrentPage,
+  watchInternalCurrentPage,
+  watchInternalPageCount,
+  watchPageSize,
+  watchPageSizes,
+  watchTotal
+};

package/pager/vue.js

@@ -1,7 +1,119 @@
 import "../chunk-G2ADBYYC.js";
-const api = [];
-const renderless = () => {
+import {
+  computedShowPager,
+  computedInternalLayout,
+  computedTotalText,
+  computedInternalPageCount,
+  handleJumperFocus,
+  handleSizeChange,
+  handleJumperInput,
+  handleJumperChange,
+  handleJumperClick,
+  isValueNumber,
+  parseValueNumber,
+  handleSizeShowPopover,
+  handleSizeHidePopover,
+  canJumperGo,
+  beforeSizeChangeHandler,
+  beforePagerChangeHandler,
+  copyEmit,
+  beforeChangeHandler,
+  handleCurrentChange,
+  prev,
+  next,
+  buildBeforePageChangeParam,
+  getValidCurrentPage,
+  emitChange,
+  setTotal,
+  watchInternalCurrentPage,
+  watchPageSizes,
+  watchCurrentPage,
+  watchInternalPageCount,
+  watchPageSize,
+  watchTotal
+} from "./index";
+const api = [
+  "state",
+  "handleJumperFocus",
+  "handleSizeChange",
+  "handleJumperInput",
+  "handleJumperChange",
+  "handleJumperClick",
+  "isValueNumber",
+  "parseValueNumber",
+  "handleSizeShowPopover",
+  "handleSizeHidePopover",
+  "canJumperGo",
+  "beforeSizeChangeHandler",
+  "beforePagerChangeHandler",
+  "beforeJumperChangeHandler",
+  "beforeChangeHandler",
+  "handleCurrentChange",
+  "prev",
+  "next",
+  "buildBeforePageChangeParam",
+  "getValidCurrentPage",
+  "emitChange",
+  "setTotal"
+];
+const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t }) => {
   const api2 = {};
+  const state = reactive({
+    showSizes: false,
+    internalCurrentPage: 1,
+    internalPageSize: props.pageSize,
+    lastEmittedPage: -1,
+    userChangePageSize: false,
+    internalTotal: props.total,
+    jumperValue: "1",
+    jumperBackup: "1",
+    showPager: computed(() => api2.computedShowPager()),
+    internalLayout: computed(() => api2.computedInternalLayout()),
+    totalText: computed(() => api2.computedTotalText()),
+    internalPageCount: computed(() => api2.computedInternalPageCount())
+  });
+  Object.assign(api2, {
+    state,
+    computedShowPager: computedShowPager({ props, state }),
+    computedInternalLayout: computedInternalLayout({ props }),
+    computedTotalText: computedTotalText({ props, t }),
+    computedInternalPageCount: computedInternalPageCount({ props, state }),
+    getValidCurrentPage: getValidCurrentPage({ state }),
+    handleJumperFocus: handleJumperFocus({ state }),
+    handleSizeChange: handleSizeChange({ props, state, api: api2, emit, vm }),
+    handleJumperInput: handleJumperInput({ state }),
+    handleJumperChange: handleJumperChange({ props, state, api: api2 }),
+    handleJumperClick: handleJumperClick({ props, state, api: api2 }),
+    isValueNumber: isValueNumber({ state }),
+    parseValueNumber: parseValueNumber({ state }),
+    handleSizeShowPopover: handleSizeShowPopover({ state, props }),
+    handleSizeHidePopover: handleSizeHidePopover({ state }),
+    canJumperGo: canJumperGo({ props, state, vm }),
+    beforeSizeChangeHandler: beforeSizeChangeHandler({ state, emit }),
+    beforePagerChangeHandler: beforePagerChangeHandler({ state, emit }),
+    copyEmit: copyEmit({ emit }),
+    beforeChangeHandler: beforeChangeHandler({ state, api: api2 }),
+    handleCurrentChange: handleCurrentChange({ state, api: api2 }),
+    prev: prev({ state, props, api: api2, emit }),
+    next: next({ props, state, api: api2, emit }),
+    buildBeforePageChangeParam: buildBeforePageChangeParam({ state }),
+    emitChange: emitChange({ state, nextTick, emit }),
+    setTotal: setTotal({ state }),
+    // watch
+    watchInternalCurrentPage: watchInternalCurrentPage({ state, emit }),
+    watchPageSizes: watchPageSizes({ state, props }),
+    watchCurrentPage: watchCurrentPage({ state, api: api2 }),
+    watchInternalPageCount: watchInternalPageCount({ state, api: api2 }),
+    watchPageSize: watchPageSize({ state }),
+    watchTotal: watchTotal({ state })
+  });
+  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
+  watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
+  watch(() => props.pageSizes, api2.watchPageSizes, { immediate: true });
+  watch(() => props.currentPage, api2.watchCurrentPage);
+  watch(() => state.internalPageCount, api2.watchInternalPageCount);
+  watch(() => props.pageSize, api2.watchPageSize, { immediate: true });
+  watch(() => props.total, api2.watchTotal);
   return api2;
 };
 export {

package/picker/index.js

@@ -305,7 +305,7 @@ const secondInputId = ({ props, state }) => () => {
   }
   return obj;
 };
-const focus = ({ api, props, vm }) => () => !props.ranged ? vm.$refs.reference.focus() : api.handleFocus();
+const focus = ({ api, props, vm }) => () => !props.isRange ? vm.$refs.reference.focus() : api.handleFocus();
 const blur = (state) => () => state.refInput.forEach((input) => input.blur());
 const parseValue = ({ api, props, state }) => (value) => {
   const isParsed = isDateObject(value) || Array.isArray(value) && value.every(isDateObject);