@opentiny/vue-renderless 3.14.0 → 3.15.0

package/dialog-box/index.js

@@ -141,25 +141,25 @@ const handleClose = ({
   if (!emitEvent(emit, "before-close", api.hide)) {
     return;
   }
-  api.hide();
+  api.hide(type);
 };
 const hide = ({ api, emit, state, props }) => (cancel) => {
   if (cancel !== false) {
     state.emitter.emit("boxclose", props.isFormReset);
     emit("update:visible", false);
     emit("change", false);
-    emit("close");
+    emit("close", cancel);
     state.closed = true;
     api.hideScrollbar();
   }
 };
 const handleConfirm = ({ api, emit }) => () => {
   emit("confirm");
-  api.handleClose();
+  api.handleClose("confirm");
 };
 const handleCancel = ({ api, emit }) => () => {
   emit("cancel");
-  api.handleClose();
+  api.handleClose("cancel");
 };
 const updatePopper = ({ api, constants }) => () => {
   api.broadcast(constants.SELECT_DROPDOWN, "updatePopper");
@@ -193,11 +193,17 @@ const closeAllPopover = (parent) => {
     component.state.visible = false;
   });
 };
-const handleDrag = ({ parent, props, state, emit }) => (event) => {
+const handleDrag = ({
+  parent,
+  props,
+  state,
+  emit,
+  vm
+}) => (event) => {
   if (!props.draggable) {
     return;
   }
-  let modalBoxElem = parent.$el.querySelector(".tiny-dialog-box");
+  let modalBoxElem = vm.$refs.dialog;
   event.preventDefault();
   let demMousemove = document.onmousemove;
   let demMouseup = document.onmouseup;

package/dialog-box/vue.js

@@ -119,7 +119,7 @@ const initApi = ({
     afterLeave: afterLeave(emit),
     hideScrollbar: hideScrollbar(lockScrollClass),
     showScrollbar: showScrollbar(lockScrollClass),
-    handleDrag: handleDrag({ parent, props, state, emit })
+    handleDrag: handleDrag({ parent, props, state, emit, vm })
   });
 };
 const initWatch = ({ watch, state, api: api2, props }) => {

package/dropdown-item/mf.js

@@ -43,7 +43,7 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
     dataStore2.showContent = false;
     dispatch("TinyDropdownMenu", "mouseleave-tips", [dataStore2.showContent, dataStore2.itemLabel]);
   };
-  const mouseEnter = ({ vm: vm2, dataStore: dataStore2 }) => (e) => {
+  const mouseEnter = ({ vm: vm2, dataStore: dataStore2, props: props2 }) => (e) => {
     const dom = e.target;
     const text = dom.textContent;
     const font = window.getComputedStyle(dom).font;
@@ -54,7 +54,7 @@ const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
       tooltip.state.referenceElm = dom;
       tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
       tooltip.doDestroy();
-      dataStore2.itemLabel = text;
+      dataStore2.itemLabel = props2.tooltipContent || text;
       if (vm2.$refs.level.scrollWidth > vm2.$refs.level.offsetWidth) {
         dataStore2.showContent = true;
       }

package/file-upload/index.js

@@ -88,7 +88,6 @@ const watchFileList = ({ constants, state, props, api }) => (fileList) => {
   let uploadFiles = fileList && fileList.map((file) => {
     file.uid = file.uid || Date.now() + state.tempIndex++;
     file.status = file.status || constants.FILE_STATUS.SUCESS;
-    file.type = api.getFileSourceType({ file });
     return file;
   });
   if ([constants.LIST_TYPE.PICTURE_SINGLE, constants.LIST_TYPE.DRAG_SINGLE].includes(props.listType)) {

package/grid/utils/dom.js

@@ -47,17 +47,34 @@ function getFixedLeft($table, from, column, body, offset) {
   }
   return scrollLeft;
 }
+function computeScrollLeft($table, td) {
+  const { tableBody } = $table.$refs;
+  const { visibleColumn } = $table;
+  const { scrollLeft: bodyLeft, clientWidth: bodyWidth } = tableBody.$el;
+  let leftWidth = 0;
+  let rightWidth = 0;
+  visibleColumn.forEach((column) => {
+    if (column.fixed === "left") {
+      leftWidth += column.renderWidth;
+    } else if (column.fixed === "right") {
+      rightWidth += column.renderWidth;
+    }
+  });
+  const tdLeft = td._accumulateRenderWidth || td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0);
+  const tdWidth = td._renderWidth || td.clientWidth;
+  let scrollLeft;
+  if (tdLeft < bodyLeft + leftWidth) {
+    scrollLeft = tdLeft - leftWidth;
+  } else if (tdLeft + tdWidth > bodyLeft + bodyWidth - rightWidth) {
+    scrollLeft = tdLeft + tdWidth - bodyWidth + rightWidth;
+  } else {
+    scrollLeft = bodyLeft;
+  }
+  return scrollLeft;
+}
 function setBodyLeft(body, td, $table, column, move) {
   const { isLeftArrow, isRightArrow, from } = move || {};
-  const bodyWidth = body.clientWidth;
-  const bodySrcollLeft = body.scrollLeft;
-  const tdOffsetLeft = td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0);
-  const tdWidth = td.clientWidth;
-  if (tdOffsetLeft < bodySrcollLeft || tdOffsetLeft > bodySrcollLeft + bodyWidth) {
-    from !== column && (body.scrollLeft = tdOffsetLeft);
-  } else if (tdOffsetLeft + tdWidth >= bodyWidth + bodySrcollLeft) {
-    body.scrollLeft = bodySrcollLeft + tdWidth;
-  }
+  body.scrollLeft = computeScrollLeft($table, td);
   if (from) {
     const direction = isLeftArrow ? "left" : isRightArrow ? "right" : null;
     const fixedDom = $table.elemStore[`${direction}-body-list`];
@@ -92,7 +109,10 @@ const colToVisible = ($table, column, move) => {
         }
         scrollLeft += visibleColumn[index].renderWidth;
       }
-      gridbodyEl.scrollLeft = scrollLeft;
+      gridbodyEl.scrollLeft = computeScrollLeft($table, {
+        _accumulateRenderWidth: scrollLeft,
+        _renderWidth: column.renderWidth
+      });
     }
   });
 };

package/image/index.js

@@ -42,6 +42,9 @@ const handleError = ({ state, emit }) => (event) => {
   state.error = true;
   emit("error", event);
 };
+const handleSwitch = ({ emit }) => (index) => {
+  emit("change-index", index);
+};
 const handleLazyLoad = ({ state, api, vm, nextTick }) => () => {
   if (isInContainer(vm.$el, state._scrollContainer)) {
     nextTick(() => state.show = true);
@@ -125,6 +128,7 @@ export {
   handleError,
   handleLazyLoad,
   handleLoad,
+  handleSwitch,
   loadImage,
   mounted,
   removeLazyLoadListener

package/image/vue.js

@@ -14,7 +14,8 @@ import {
   closeViewer,
   mounted,
   deleteHander,
-  filterImageUrl
+  filterImageUrl,
+  handleSwitch
 } from "./index";
 const api = [
   "state",
@@ -26,7 +27,8 @@ const api = [
   "closeViewer",
   "handleLoad",
   "handleError",
-  "deleteHander"
+  "deleteHander",
+  "handleSwitch"
 ];
 const initState = ({
   reactive,
@@ -78,7 +80,8 @@ const initApi = ({
     computedGetImageStyle: computedGetImageStyle({ api: api2, props }),
     addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm }),
     deleteHander: deleteHander(emit),
-    filterImageUrl: filterImageUrl(props)
+    filterImageUrl: filterImageUrl(props),
+    handleSwitch: handleSwitch({ emit })
   });
 };
 const initWatch = ({ watch, state, api: api2, props }) => {

package/image-viewer/vue.js

@@ -164,7 +164,9 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, vm }) => {
   watch(
     () => state.index,
     (value) => {
-      api2.reset();
+      if (!props.keepStyle) {
+        api2.reset();
+      }
       props.onSwitch(value);
     },
     { immediate: true }

package/input/index.js

@@ -55,7 +55,9 @@ const calcTextareaHeight = ({
   api,
   hiddenTextarea,
   props,
-  state
+  state,
+  mode,
+  constants
 }) => (targetElement, minRows = 1, maxRows = null) => {
   if (!targetElement) {
     return {
@@ -72,6 +74,9 @@ const calcTextareaHeight = ({
   hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
   let height = hiddenTextarea.scrollHeight;
   const textareaStyle = {};
+  if (mode === "mobile") {
+    height = Math.max(hiddenTextarea.scrollHeight, constants.TEXTAREA_HEIGHT_MOBILE);
+  }
   if (boxSizing === STYLE.ContentBox) {
     height = height - paddingSize;
   }

package/input/vue.js

@@ -95,8 +95,8 @@ const initState = ({
     checkedLabel: "",
     enteredTextarea: false,
     sheetvalue: props.modelValue,
-    inputSize: computed(() => props.size || state.formItemSize),
-    inputSizeMf: computed(() => props.size || (parent.tinyForm || {}).size),
+    inputSize: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
+    inputSizeMf: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
     showClear: computed(
       () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
     ),
@@ -179,7 +179,9 @@ const mergeApi = ({
   nextTick,
   parent,
   state,
-  vm
+  vm,
+  mode,
+  constants
 }) => {
   const { storageData, isMemoryStorage, addMemory, searchMemory, selectedMemory } = storages;
   return Object.assign(api2, {
@@ -208,7 +210,9 @@ const mergeApi = ({
       api: api2,
       hiddenTextarea: null,
       props,
-      state
+      state,
+      mode,
+      constants
     }),
     setNativeInputValue: setNativeInputValue({ api: api2, state }),
     handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
@@ -300,7 +304,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
   initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm, nextTick });
   const storages = useStorageBox({ api: api2, props, reactive, toRefs });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm });
+  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm, mode, constants });
   initWatch({ watch, state, api: api2, props, nextTick, emit, componentName, eventName });
   onMounted(() => {
     api2.setNativeInputValue();

package/modal/index.js

@@ -234,7 +234,7 @@ const handleGlobalKeydownEvent = (api) => (event) => {
   }
 };
 const handleHashChange = (api) => () => {
-  api.close("close");
+  api.close("hide");
 };
 const getBox = ({ vm }) => () => vm.$refs.modalBox;
 const maximize = ({

package/numeric/index.js

@@ -16,14 +16,11 @@ const initService = (service) => {
   };
 };
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
-const watchValue = ({ api, props, state, nextTick }) => (value) => {
+const watchValue = ({ api, props, state }) => (value) => {
   if (value === state.currentValue) {
     return;
   }
   api.setCurrentValue(value, props.changeCompat);
-  nextTick(() => {
-    api.dispatchDisplayedValue();
-  });
 };
 const toPrecision = (state) => ({ num, precision }) => {
   if (precision === void 0) {
@@ -61,7 +58,8 @@ const increase = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.maxDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : Number(state.userInput)) || 0;
+  const userInput = props.stringMode ? state.userInput : Number(state.userInput);
+  const value = (props.mouseWheel ? state.displayValue : userInput) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -79,7 +77,8 @@ const decrease = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.minDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : Number(state.userInput)) || 0;
+  const userInput = props.stringMode ? state.userInput : Number(state.userInput);
+  const value = (props.mouseWheel ? state.displayValue : userInput) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -130,10 +129,10 @@ const focus = (vm) => () => {
   vm.$refs.input.focus();
 };
 const getEmitValue = (args) => {
-  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args;
+  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue } = args;
   let { max, min, api, props, format, plugin, stringMode } = args;
   if (!newVal && newVal !== 0) {
-    emitValue = allowEmpty ? void 0 : defaultVal;
+    emitValue = allowEmpty ? emptyValue : defaultVal;
   } else if (bigNew.isNaN()) {
     emitValue = oldVal;
   } else {
@@ -164,7 +163,7 @@ const setCurrentValue = ({
   props,
   state
 }) => (newVal, emitChangeFlag = true) => {
-  const { max, min, allowEmpty, validateEvent, stringMode, plugin } = props;
+  const { max, min, allowEmpty, validateEvent, stringMode, plugin, emptyValue } = props;
   const { format } = state;
   const oldVal = state.currentValue;
   const bigNew = api.getDecimal(newVal);
@@ -174,7 +173,7 @@ const setCurrentValue = ({
     state.userInput = state.currentValue;
     return;
   }
-  let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal };
+  let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue };
   Object.assign(args, { max, min, api, props, format, plugin, stringMode });
   let ret = getEmitValue(args);
   newVal = ret.newVal;
@@ -319,14 +318,6 @@ const getUnitPrecision = ({
   rounding = isNumber(format.rounding) ? format.rounding : serFra.rounding;
   return __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, defaultFmt), { fraction, rounding }), serFmt), format);
 };
-const dispatchDisplayedValue = ({ state, api, dispatch }) => () => {
-  if (state.isDisplayOnly) {
-    dispatch("FormItem", "displayed-value-changed", { type: "numeric", val: api.getDisplayedValue() });
-  }
-};
-const getDisplayedValue = ({ state, props }) => () => {
-  return state.displayValue || state.displayValue === 0 ? state.displayValue + " " + (props.unit || "") : "-";
-};
 const getDisplayOnlyText = ({ parent, state, props }) => () => {
   const showEmptyValue = props.showEmptyValue || (parent.tinyForm || {}).showEmptyValue;
   if (showEmptyValue) {
@@ -354,13 +345,11 @@ const handleChange = ({ state, emit }) => () => {
 };
 export {
   decrease,
-  dispatchDisplayedValue,
   displayValue,
   filterValue,
   focus,
   getDecimal,
   getDisplayOnlyText,
-  getDisplayedValue,
   getNumPecision,
   getPrecision,
   getUnitPrecision,

package/numeric/vue.js

@@ -23,8 +23,6 @@ import {
   getDecimal,
   unmounted,
   initService,
-  dispatchDisplayedValue,
-  getDisplayedValue,
   getDisplayOnlyText,
   filterValue,
   handleClear,
@@ -112,10 +110,8 @@ const initApi = ({
     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, props, state, nextTick }),
+    watchValue: watchValue({ api: api2, props, state }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
-    dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
-    getDisplayedValue: getDisplayedValue({ state, props }),
     getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
     filterValue: filterValue({ state }),
     handleClear: handleClear({ state, emit }),
@@ -124,7 +120,6 @@ const initApi = ({
   api2.getDecimal(0);
 };
 const initWatch = ({
-  state,
   watch,
   props,
   api: api2
@@ -139,7 +134,6 @@ const initWatch = ({
     { 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, vm, constants, dispatch, service, nextTick }) => {
   const api2 = {};
@@ -147,11 +141,8 @@ const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reacti
   const state = initState({ reactive, computed, props, api: api2, constants, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
   initApi({ api: api2, props, state, parent, vm, emit, dispatch, constants, nextTick });
-  initWatch({ state, watch, props, api: api2 });
-  onMounted(() => {
-    api2.dispatchDisplayedValue();
-    api2.mounted();
-  });
+  initWatch({ watch, props, api: api2 });
+  onMounted(api2.mounted);
   onUpdated(api2.updated);
   onUnmounted(api2.unmounted);
   return api2;

package/option-group/index.js

@@ -10,6 +10,19 @@ const queryChange = ({ select, state, vm }) => () => {
     }
   }
 };
+const observeCallback = ({ state, api }) => (mutationsList) => {
+  for (let mutation of mutationsList) {
+    if (mutation.type === "childList") {
+      if (state.timer) {
+        clearTimeout(state.timer);
+      }
+      state.timer = setTimeout(() => {
+        api.queryChange();
+      }, 100);
+    }
+  }
+};
 export {
+  observeCallback,
   queryChange
 };

package/option-group/vue.js

@@ -1,16 +1,19 @@
 import "../chunk-G2ADBYYC.js";
-import { queryChange } from "./index";
+import { queryChange, observeCallback } from "./index";
 const api = ["state", "queryChange"];
-const renderless = (props, { onMounted, reactive, watch, inject }, { broadcast, vm }) => {
+const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject }, { broadcast, vm }) => {
   const select = inject("select");
   const constants = select._constants;
   const state = reactive({
-    visible: true
+    visible: true,
+    timer: null
   });
-  const api2 = {
+  const api2 = {};
+  Object.assign(api2, {
     state,
-    queryChange: queryChange({ select, state, vm })
-  };
+    queryChange: queryChange({ select, state, vm }),
+    observeCallback: observeCallback({ state, api: api2 })
+  });
   watch(
     () => props.disabled,
     (value) => {
@@ -19,11 +22,21 @@ const renderless = (props, { onMounted, reactive, watch, inject }, { broadcast,
     { immediate: true }
   );
   onMounted(() => {
+    if (select.filterable) {
+      const config = { attributes: false, childList: true, subtree: false };
+      api2.observer = new MutationObserver(api2.observeCallback);
+      if (vm.$refs.selectGroup) {
+        api2.observer.observe(vm.$refs.selectGroup, config);
+      }
+    }
     if (props.disabled) {
       broadcast(constants.COMPONENT_NAME.Option, constants.EVENT_NAME.handleGroupDisabled, props.disabled);
     }
     select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
   });
+  onBeforeUnmount(() => {
+    api2.observer && api2.observer.disconnect();
+  });
   return api2;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.14.0",
+  "version": "3.15.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": [
@@ -24,12 +24,6 @@
     "url": "https://github.com/opentiny/tiny-vue/issues"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "build:fast": "npm run build && npm run release",
-    "postversion": "pnpm build",
-    "release": "esno ./scripts/postbuild.ts && shx cp README.md dist"
-  },
   "dependencies": {
     "xss": "1.0.11",
     "color": "4.2.3"
@@ -37,5 +31,11 @@
   "devDependencies": {
     "esno": "^0.16.3",
     "tsup": "7.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:fast": "npm run build && npm run release",
+    "postversion": "pnpm build",
+    "release": "esno ./scripts/postbuild.ts && shx cp README.md dist"
   }
 }