@opentiny/vue-renderless 3.13.2 → 3.14.1

package/numeric/vue.js

@@ -25,7 +25,10 @@ import {
   initService,
   dispatchDisplayedValue,
   getDisplayedValue,
-  getDisplayOnlyText
+  getDisplayOnlyText,
+  filterValue,
+  handleClear,
+  handleChange
 } from "./index";
 const api = [
   "state",
@@ -37,9 +40,19 @@ const api = [
   "handleInputChange",
   "mouseEvent",
   "focus",
-  "select"
+  "select",
+  "handleClear",
+  "handleChange"
 ];
-const initState = ({ reactive, computed, props, api: api2, $service, parent }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  api: api2,
+  $service,
+  constants,
+  parent
+}) => {
   const state = reactive({
     currentValue: props.modelValue,
     userInput: props.modelValue,
@@ -57,8 +70,13 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
+    filterMenu: constants.FILTER_OPTION,
+    filterValue: computed(() => api2.filterValue()),
+    handleClear: computed(() => api2.handleClear()),
+    handleChange: computed(() => api2.handleClear()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    displayOnlyText: computed(() => api2.getDisplayOnlyText())
+    displayOnlyText: computed(() => api2.getDisplayOnlyText()),
+    controls: props.controls
   });
   return state;
 };
@@ -67,7 +85,7 @@ const initApi = ({
   props,
   state,
   parent,
-  refs,
+  vm,
   emit,
   dispatch,
   constants,
@@ -75,30 +93,33 @@ const initApi = ({
 }) => {
   Object.assign(api2, {
     state,
-    focus: focus(refs),
-    select: select(refs),
+    focus: focus(vm),
+    select: select(vm),
     getPrecision: getPrecision(),
     toPrecision: toPrecision(state),
     updated: updated({ constants, parent, state }),
     mounted: mounted({ constants, parent, props, state }),
     unmounted: unmounted({ parent, state }),
     getDecimal: getDecimal(props),
-    handleFocus: handleFocus({ emit, state, props, api: api2, refs }),
+    handleFocus: handleFocus({ emit, state, props, api: api2, vm }),
     decrease: decrease({ api: api2, props, state }),
     increase: increase({ api: api2, props, state }),
     handleInput: handleInput({ state, api: api2, emit, props }),
     getNumPecision: getNumPecision({ api: api2, props }),
-    displayValue: displayValue({ props, state }),
+    displayValue: displayValue({ props, state, api: api2 }),
     internalDecrease: internalDecrease({ api: api2, state }),
     internalIncrease: internalIncrease({ api: api2, state }),
     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 }),
+    watchValue: watchValue({ api: api2, props, state, nextTick }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
     dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
     getDisplayedValue: getDisplayedValue({ state, props }),
-    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state })
+    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
+    filterValue: filterValue({ state }),
+    handleClear: handleClear({ state, emit }),
+    handleChange: handleChange({ state, emit })
   });
   api2.getDecimal(0);
 };
@@ -108,20 +129,24 @@ 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.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);
 };
-const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, refs, constants, dispatch, service, nextTick }) => {
+const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, vm, constants, dispatch, service, nextTick }) => {
   const api2 = {};
   const $service = initService(service);
-  const state = initState({ reactive, computed, props, api: api2, $service, parent });
+  const state = initState({ reactive, computed, props, api: api2, constants, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, state, parent, refs, emit, dispatch, constants, nextTick });
+  initApi({ api: api2, props, state, parent, vm, emit, dispatch, constants, nextTick });
   initWatch({ state, watch, props, api: api2 });
   onMounted(() => {
     api2.dispatchDisplayedValue();

package/option/index.js

@@ -1,5 +1,6 @@
 import "../chunk-G2ADBYYC.js";
 import { getObj } from "../common/object";
+import { omitText } from "../common/string";
 const escapeRegexpString = (value = "") => String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
 const isEqual = ({ select, state }) => (a, b) => {
   if (!state.isObject) {
@@ -14,15 +15,26 @@ const contains = ({ select, state }) => (arr = [], target = null) => {
     return arr && arr.includes(target);
   } else {
     const valueKey = select.valueKey;
-    return arr && arr.some((item) => getObj(item, valueKey) === getObj(target, valueKey));
+    return arr && arr.some((item) => {
+      return getObj(item, valueKey) === getObj(target, valueKey);
+    });
   }
 };
-const handleGroupDisabled = (state) => (val) => {
+const handleGroupDisabled = ({ state, vm }) => (val) => {
   state.groupDisabled = val;
+  vm.groupDisabled = val;
 };
-const hoverItem = ({ select, props, state, vm }) => () => {
-  if (!props.disabled && !state.groupDisabled) {
-    select.state.hoverIndex = select.state.options.indexOf(vm);
+const hoverItem = ({ select, props, state }) => (e) => {
+  const dom = e.target;
+  const text = dom.textContent;
+  const style = window.getComputedStyle(dom);
+  const font = style.font;
+  const rect = dom.getBoundingClientRect();
+  const textWidth = rect.width - parseInt(style.paddingLeft || 0) - parseInt(style.paddingRight || 0);
+  const res = omitText(text, font, textWidth);
+  state.showTitle = res.o;
+  if (!props.disabled && !state.groupDisabled && !select.state.disabledOptionHover) {
+    select.state.hoverIndex = select.state.optionIndexArr.indexOf(state.index);
   }
 };
 const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
@@ -32,14 +44,19 @@ const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
     select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
   }
 };
-const queryChange = ({ props, state }) => (query) => {
-  state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || props.created;
+const queryChange = ({ select, props, state }) => (query) => {
+  const oldVisible = state.visible;
+  const newVisible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || !!props.created;
+  if (oldVisible !== newVisible) {
+    state.visible = newVisible;
+    select.state.filteredOptionsCount += newVisible ? 1 : -1;
+  }
 };
 const toggleEvent = ({ props, vm, type }) => {
   const optionEl = vm.$refs.option;
-  Object.keys(props.events).forEach((ev) => {
+  for (let ev in props.events) {
     optionEl[type + "EventListener"](ev, props.events[ev]);
-  });
+  }
 };
 const initValue = ({ select, props, constants, vm }) => () => {
   if (select.multiple && props.required) {
@@ -48,6 +65,7 @@ const initValue = ({ select, props, constants, vm }) => () => {
 };
 export {
   contains,
+  escapeRegexpString,
   handleGroupDisabled,
   hoverItem,
   initValue,

package/option/vue.js

@@ -1,4 +1,7 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import {
   isEqual,
   contains,
@@ -16,30 +19,33 @@ 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.hoverValue === state.index),
     visible: true,
     hitState: false,
     groupDisabled: false,
-    disabled: computed(() => props.disabled),
+    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)),
+    showTitle: false,
     currentValue: computed(() => props.value || props.label || ""),
     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;
       }
     }),
-    selectCls: computed(() => state.itemSelected ? "checked-sur" : "check")
+    selectCls: computed(() => {
+      return state.itemSelected ? "checked-sur" : "check";
+    })
   });
   return state;
 };
@@ -48,10 +54,10 @@ const initApi = ({ api: api2, props, state, select, constants, vm }) => {
     state,
     isEqual: isEqual({ select, state }),
     contains: contains({ select, state }),
-    hoverItem: hoverItem({ select, vm, props, state }),
-    queryChange: queryChange({ props, state }),
+    hoverItem: hoverItem({ select, props, state }),
+    queryChange: queryChange({ select, props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
-    handleGroupDisabled: handleGroupDisabled(state),
+    handleGroupDisabled: handleGroupDisabled({ state, vm }),
     initValue: initValue({ select, props, constants, vm })
   });
 };
@@ -87,20 +93,33 @@ const initOnMounted = ({ onMounted, props, api: api2, vm, state, constants, sele
   onMounted(() => {
     state.el = vm.$el;
     toggleEvent({ props, vm, type: "add" });
-    select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
+    if (!select.optimization) {
+      select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
+    }
     api2.initValue();
   });
 };
-const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm }) => {
+const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm, state }) => {
   onBeforeUnmount(() => {
-    const index = select.state.cachedOptions.indexOf(vm);
+    let selectedOptions = select.multiple ? select.state.selected : [select.state.selected];
+    const index = select.state.cachedOptions.findIndex((opt) => opt.state === state);
+    const selectedIndex = selectedOptions.findIndex((opt) => opt.state === state);
     toggleEvent({ props, vm, type: "remove" });
-    if (index === -1) {
+    if (index > -1 && selectedIndex < 0) {
       select.state.cachedOptions.splice(index, 1);
     }
-    select.onOptionDestroy(select.state.options.indexOf(vm));
+    select.onOptionDestroy(select.state.options.findIndex((opt) => opt.state === state));
   });
 };
+const initSelectState = ({ state, select, markRaw, props }) => {
+  let vm = __spreadProps(__spreadValues({}, props), { state });
+  select.state.options.push(markRaw(vm));
+  select.state.cachedOptions.push(markRaw(vm));
+  select.state.optionsIndex++;
+  state.index = select.state.optionsIndex;
+  select.state.optionsCount++;
+  select.state.filteredOptionsCount++;
+};
 const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw }, { vm, parent }) => {
   const api2 = {};
   const select = inject("select");
@@ -109,12 +128,9 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
   initApi({ api: api2, props, state, select, constants, vm });
   initWatch({ watch, props, state, select, constants });
   initOnMounted({ onMounted, props, api: api2, vm, state, constants, select });
-  initOnBeforeUnmount({ onBeforeUnmount, props, select, vm });
-  select.state.options.push(markRaw(vm));
-  select.state.cachedOptions.push(markRaw(vm));
-  select.state.optionsCount++;
-  select.state.filteredOptionsCount++;
-  vm.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
+  initOnBeforeUnmount({ onBeforeUnmount, props, select, vm, state });
+  initSelectState({ state, select, markRaw, props });
+  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.13.2",
+  "version": "3.14.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

@@ -34,11 +34,11 @@ const computedTotalText = ({ props, t }) => () => {
   const HUNDRED_THOUSAND = 1e5;
   const MILLION = 1e6;
   const TEN_MILLION = 1e7;
-  if (totals <= HUNDRED_THOUSAND) {
+  if (totals < HUNDRED_THOUSAND) {
     return String(totals);
-  } else if (totals <= MILLION) {
+  } else if (totals < MILLION) {
     return t("ui.page.hundredThousand");
-  } else if (totals <= TEN_MILLION) {
+  } else if (totals < TEN_MILLION) {
     return t("ui.page.million");
   } else {
     return t("ui.page.tenMillion");
@@ -61,7 +61,7 @@ const watchInternalCurrentPage = ({ state, emit }) => (currentPage) => {
   if (state.jumperValue !== value) {
     state.jumperValue = value;
   }
-  emit("update:currentPage", currentPage);
+  emit("update:current-page", currentPage);
   emit("current-change", currentPage);
   state.lastEmittedPage = -1;
 };
@@ -89,6 +89,17 @@ const watchPageSize = ({ state }) => (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) {
@@ -322,6 +333,7 @@ const emitChange = ({ state, nextTick, emit }) => () => {
 const setTotal = ({ state }) => (val) => {
   state.internalTotal = val;
 };
+const clickSizes = () => (e) => e.stopPropagation();
 export {
   beforeChangeHandler,
   beforeJumperChangeHandler,
@@ -329,6 +341,7 @@ export {
   beforeSizeChangeHandler,
   buildBeforePageChangeParam,
   canJumperGo,
+  clickSizes,
   computedInternalLayout,
   computedInternalPageCount,
   computedShowPager,
@@ -354,5 +367,6 @@ export {
   watchInternalPageCount,
   watchPageSize,
   watchPageSizes,
+  watchShowSizes,
   watchTotal
 };

package/pager/vue.js

@@ -25,12 +25,14 @@ import {
   getValidCurrentPage,
   emitChange,
   setTotal,
+  clickSizes,
   watchInternalCurrentPage,
   watchPageSizes,
   watchCurrentPage,
   watchInternalPageCount,
   watchPageSize,
-  watchTotal
+  watchTotal,
+  watchShowSizes
 } from "./index";
 const api = [
   "state",
@@ -54,9 +56,11 @@ const api = [
   "buildBeforePageChangeParam",
   "getValidCurrentPage",
   "emitChange",
-  "setTotal"
+  "setTotal",
+  "clickSizes"
 ];
-const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t }) => {
+const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick, t, designConfig }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
   const api2 = {};
   const state = reactive({
     showSizes: false,
@@ -70,7 +74,11 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     showPager: computed(() => api2.computedShowPager()),
     internalLayout: computed(() => api2.computedInternalLayout()),
     totalText: computed(() => api2.computedTotalText()),
-    internalPageCount: computed(() => api2.computedInternalPageCount())
+    internalPageCount: computed(() => api2.computedInternalPageCount()),
+    showJumperSufix: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.showJumperSufix) != null ? _b : true,
+    align: props.align || ((_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.align) || "left",
+    totalI18n: ((_d = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _d.totalI18n) || "totals",
+    totalFixedLeft: (_g = (_f = props.totalFixedLeft) != null ? _f : (_e = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _e.totalFixedLeft) != null ? _g : false
   });
   Object.assign(api2, {
     state,
@@ -99,13 +107,15 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     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 })
+    watchTotal: watchTotal({ state }),
+    watchShowSizes: watchShowSizes({ nextTick, vm })
   });
   state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
@@ -114,6 +124,7 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
   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 {