@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/option/vue.js

@@ -16,7 +16,7 @@ const initState = ({ reactive, computed, props, api: api2, markRaw, select, pare
     created: computed(() => props.created),
     index: -1,
     select: markRaw(select),
-    hover: false,
+    hover: computed(() => !state.select.optimization && state.select.state.hoverIndex === state.index || false),
     visible: true,
     hitState: false,
     groupDisabled: false,
@@ -24,17 +24,18 @@ const initState = ({ reactive, computed, props, api: api2, markRaw, select, pare
     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 || ""),
+    showTitle: false,
     itemSelected: computed(() => {
       if (!select.multiple) {
-        return api2.isEqual(props.value, select.modelValue);
+        return api2.isEqual(props.value, select.state.modelValue);
       } else {
-        return api2.contains(select.modelValue, props.value);
+        return api2.contains(select.state.modelValue, props.value);
       }
     }),
     limitReached: computed(() => {
       if (select.multiple) {
         const multipleLimit = select.state.multipleLimit;
-        return !state.itemSelected && (select.modelValue || []).length >= multipleLimit && multipleLimit > 0;
+        return !state.itemSelected && (select.state.modelValue || []).length >= multipleLimit && multipleLimit > 0;
       } else {
         return false;
       }
@@ -49,9 +50,9 @@ 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),
+    handleGroupDisabled: handleGroupDisabled({ state, vm }),
     initValue: initValue({ select, props, constants, vm })
   });
 };
@@ -76,6 +77,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(() => {
@@ -106,9 +113,10 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
   initOnBeforeUnmount({ onBeforeUnmount, props, select, vm });
   select.state.options.push(markRaw(vm));
   select.state.cachedOptions.push(markRaw(vm));
+  state.index = select.state.optionsCount;
   select.state.optionsCount++;
   select.state.filteredOptionsCount++;
-  vm.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
+  parent.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
   return api2;
 };
 export {

package/option-group/index.js

@@ -2,9 +2,9 @@ import "../chunk-G2ADBYYC.js";
 const queryChange = ({ select, state, vm }) => () => {
   state.visible = true;
   if (Array.isArray(select.state.options)) {
-    const groupOptions = select.state.options.filter(
-      (option) => option.state.parent && vm && option.state.parent.label === vm.label
-    );
+    const groupOptions = select.state.options.filter((option) => {
+      return option.state.parent.$parent && vm && option.state.parent.$parent.label === vm.label;
+    });
     if (Array.isArray(groupOptions)) {
       state.visible = groupOptions.some((option) => option.visible === true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.12.0",
+  "version": "3.13.0-alpha.0",
   "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,372 @@
+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: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];
+  }
+};
+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 watchShowSizes = ({ nextTick, vm }) => (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      const width = vm.$refs.pageSize[0].getBoundingClientRect().width;
+      const popover = document.querySelectorAll(".tiny-pager__selector");
+      Array.from(popover).forEach((ele) => {
+        ele.style.width = width + "px";
+      });
+    });
+  }
+};
+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;
+};
+const clickSizes = () => (e) => e.stopPropagation();
+export {
+  beforeChangeHandler,
+  beforeJumperChangeHandler,
+  beforePagerChangeHandler,
+  beforeSizeChangeHandler,
+  buildBeforePageChangeParam,
+  canJumperGo,
+  clickSizes,
+  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,
+  watchShowSizes,
+  watchTotal
+};

package/pager/vue.js

@@ -1,7 +1,130 @@
 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,
+  clickSizes,
+  watchInternalCurrentPage,
+  watchPageSizes,
+  watchCurrentPage,
+  watchInternalPageCount,
+  watchPageSize,
+  watchTotal,
+  watchShowSizes
+} 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",
+  "clickSizes"
+];
+const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t, designConfig }) => {
+  var _a, _b, _c;
   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()),
+    showJumperSufix: (_a = designConfig == null ? void 0 : designConfig.state.showJumperSufix) != null ? _a : true,
+    align: props.align || (designConfig == null ? void 0 : designConfig.state.align) || "left",
+    totalI18n: (designConfig == null ? void 0 : designConfig.state.totalI18n) || "totals",
+    totalFixedLeft: (_c = (_b = props.totalFixedLeft) != null ? _b : designConfig == null ? void 0 : designConfig.state.totalFixedLeft) != null ? _c : false
+  });
+  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 }),
+    clickSizes: clickSizes(),
+    // 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 }),
+    watchShowSizes: watchShowSizes({ nextTick, vm })
+  });
+  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);
+  watch(() => state.showSizes, api2.watchShowSizes);
   return api2;
 };
 export {