@opentiny/vue-renderless 3.29.0 → 3.30.0

package/anchor/index.js

@@ -160,11 +160,21 @@ const onItersectionObserver = ({ state, props, api, vm, emit }) => () => {
   );
   addObserver({ props, state });
 };
-const linkClick = ({ state, vm, emit, props, api }) => (e, item) => {
+const linkClick = ({
+  state,
+  vm,
+  emit,
+  props,
+  api,
+  framework
+}) => (e, item) => {
   state.isScroll = true;
   const { link, title } = item;
   const emitLink = { link, title };
   emit("linkClick", e, emitLink);
+  if (framework === "vue2" || framework === "vue2.7") {
+    emit("link-click", e, emitLink);
+  }
   const isChangeHash = setCurrentHash({ state });
   const { scrollContainer } = state;
   state.currentLink = link;

package/anchor/vue.js

@@ -19,7 +19,7 @@ const api = [
   "setScrollContainer",
   "getCurrentAnchor"
 ];
-const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive, watch }, { vm, emit, nextTick }) => {
+const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive, watch }, { vm, emit, nextTick, framework }) => {
   const api2 = {};
   const state = reactive({
     currentLink: "",
@@ -38,7 +38,7 @@ const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive, watch
     updated: updated({ api: api2 }),
     unmounted: unmounted({ state, api: api2 }),
     getContainer: getContainer({ props }),
-    linkClick: linkClick({ state, vm, emit, props, api: api2 }),
+    linkClick: linkClick({ state, vm, emit, props, api: api2, framework }),
     onItersectionObserver: onItersectionObserver({ state, props, api: api2, vm, emit }),
     setScrollContainer: setScrollContainer({ state, api: api2 }),
     getCurrentAnchor: getCurrentAnchor({ vm, state, emit }),

package/calendar-view/index.js

@@ -59,8 +59,48 @@ const isSelectedDate = ({ state }) => (day) => {
 const getDayBgColor = ({ props }) => (day) => {
   const date = day.year + "-" + day.month + "-" + day.value;
   const isFunction = props.setDayBgColor instanceof Function;
-  const bgColor = isFunction ? props.setDayBgColor(date) : "white";
-  return bgColor;
+  if (isFunction) {
+    const result = props.setDayBgColor(date);
+    if (typeof result === "object") {
+      return result;
+    }
+    if (typeof result === "string" && (result.startsWith("#") || result.startsWith("rgb"))) {
+      return { backgroundColor: result };
+    }
+    return result;
+  }
+  return "white";
+};
+const isColorValue = (value) => {
+  if (typeof value !== "string")
+    return false;
+  if (value.startsWith("#"))
+    return true;
+  if (value.startsWith("rgb"))
+    return true;
+  return false;
+};
+const getDayBgRawValue = ({ props, day }) => {
+  const date = day.year + "-" + day.month + "-" + day.value;
+  const isFunction = props.setDayBgColor instanceof Function;
+  if (isFunction) {
+    return props.setDayBgColor(date);
+  }
+  return "";
+};
+const getDayBgClass = ({ props }) => (day) => {
+  const result = getDayBgRawValue({ props, day });
+  if (typeof result === "string" && !isColorValue(result) && result) {
+    return "bg-" + result;
+  }
+  return "";
+};
+const getDayBgStyle = ({ props }) => (day) => {
+  const result = getDayBgRawValue({ props, day });
+  if (isColorValue(result)) {
+    return { backgroundColor: result };
+  }
+  return {};
 };
 const parseDate = (time) => {
   let date = {};
@@ -642,7 +682,9 @@ export {
   getCurWeekEvent,
   getDatesOfNextWeek,
   getDatesOfPreviousWeek,
+  getDayBgClass,
   getDayBgColor,
+  getDayBgStyle,
   getEventByDate,
   getEventByMonth,
   getEventByTime,

package/calendar-view/vue.js

@@ -25,6 +25,8 @@ import {
   isSelectedDate,
   isStartOrEndDay,
   getDayBgColor,
+  getDayBgStyle,
+  getDayBgClass,
   isShowNewSchedule,
   genDayTimes,
   isShowMark,
@@ -62,6 +64,8 @@ const api = [
   "isSelectedDate",
   "isStartOrEndDay",
   "getDayBgColor",
+  "getDayBgStyle",
+  "getDayBgClass",
   "isShowNewSchedule",
   "isShowMark",
   "handleCascaderChange",
@@ -281,6 +285,8 @@ const initApi = ({ vm, api: api2, state, t, props, emit, nextTick }) => {
     isSelectedDate: isSelectedDate({ state }),
     isStartOrEndDay: isStartOrEndDay({ state }),
     getDayBgColor: getDayBgColor({ props }),
+    getDayBgStyle: getDayBgStyle({ props }),
+    getDayBgClass: getDayBgClass({ props }),
     isShowNewSchedule: isShowNewSchedule({ props }),
     genDayTimes: genDayTimes({ props }),
     isShowMark: isShowMark({ props }),

package/drawer/index.js

@@ -33,8 +33,14 @@ const closed = ({ state, emit }) => () => {
     emit("closed");
   }
 };
-const watchVisible = ({ state, api }) => (value) => {
+const watchVisible = ({ props, parent, api }) => (value) => {
   value ? api.open() : api.close();
+  if (value) {
+    const el = parent.$el;
+    if (props.appendToBody) {
+      document.body.appendChild(el);
+    }
+  }
 };
 const open = ({ state, emit, vm }) => () => {
   if (!state.visible) {

package/drawer/vue.js

@@ -20,7 +20,7 @@ import {
   removeKeydownEvent
 } from "./index";
 const api = ["state", "close", "closed", "confirm", "handleClose", "open"];
-const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants, designConfig }) => {
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, parent, constants, designConfig }) => {
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const api2 = {};
   const state = reactive({
@@ -46,13 +46,17 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     removeKeydownEvent: removeKeydownEvent({ api: api2 }),
     addDragEvent: addDragEvent({ api: api2, vm }),
     removeDragEvent: removeDragEvent({ api: api2, vm }),
-    watchVisible: watchVisible({ state, api: api2 }),
+    watchVisible: watchVisible({ props, parent, api: api2 }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
     computedWidth: computedWidth({ state, designConfig, props, constants }),
     computedHeight: computedHeight({ state, designConfig, props, constants })
   });
   onMounted(() => {
+    const el = parent.$el;
+    if (props.appendToBody && el && el.parentNode !== document.body) {
+      document.body.appendChild(el);
+    }
     props.dragable && api2.addDragEvent();
     api2.addKeydownEvent();
     if (props.lockScroll && props.visible) {
@@ -63,6 +67,10 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     props.dragable && api2.removeDragEvent();
     api2.removeKeydownEvent();
     props.lockScroll && api2.hideScrollbar();
+    const el = parent.$el;
+    if (props.appendToBody && el && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
   });
   watch(() => props.visible, api2.watchVisible, { immediate: true });
   watch(

package/fluent-editor/index.js

@@ -7,6 +7,15 @@ import { xss } from "@opentiny/utils";
 import { set } from "../chart-core/deps/utils";
 import { on, off } from "@opentiny/utils";
 import { PopupManager } from "@opentiny/utils";
+const isSafeLinkUrl = (url) => /^(https?:|mailto:|tel:|\/|#)/i.test((url || "").trim());
+const openLink = (url, target = "_blank") => {
+  if (target === "_blank") {
+    const popup = window.open(url, "_blank", "noopener,noreferrer");
+    popup && (popup.opener = null);
+    return;
+  }
+  window.location.assign(url);
+};
 const init = ({
   api,
   emit,
@@ -60,6 +69,8 @@ const init = ({
   const quill = new FluentEditor(vm.$refs.editor, state.innerOptions);
   quill.emitter.on("file-change", api.fileOperationToSev);
   state.quill = Object.freeze(quill);
+  state.linkClickHandler = api.handleLinkClick;
+  on(state.quill.root, "click", state.linkClickHandler);
   setTimeout(api.setToolbarTitle);
   let insertTableButton = vm.$el.querySelector(".ql-better-table");
   const tableModule = state.quill.getModule("better-table");
@@ -201,12 +212,18 @@ const redoHandler = ({ state }) => () => {
 const lineheightHandler = ({ state, FluentEditor }) => (value) => {
   state.quill.format("lineheight", value, FluentEditor.sources.USER);
 };
-const fileHandler = ({ api, state }) => () => {
+const fileHandler = ({ api, state, props }) => () => {
+  if (props.disabled) {
+    return;
+  }
   const option = state.quill.options.uploadOption;
   const accept = option && option.fileAccept;
   api.inputFileHandler("file", accept);
 };
-const imageHandler = ({ api, state }) => () => {
+const imageHandler = ({ api, state, props }) => () => {
+  if (props.disabled) {
+    return;
+  }
   const option = state.quill.options.uploadOption;
   const accept = option && option.imageAccept;
   api.inputFileHandler("image", accept);
@@ -233,7 +250,10 @@ const inputFileHandler = ({ state, UploaderDfls }) => (type, accept) => {
   }
   fileInput.click();
 };
-const uploaderDflsHandler = ({ api, modules }) => (range, files, fileFlags, rejectFlags) => {
+const uploaderDflsHandler = ({ api, modules, props }) => (range, files, fileFlags, rejectFlags) => {
+  if (props.disabled) {
+    return;
+  }
   const fileArr = [];
   const imgArr = [];
   files.forEach((file, index) => fileFlags[index] ? fileArr.push(file) : imgArr.push(file));
@@ -391,7 +411,15 @@ const handleUploadImage = ({ state, api, FluentEditor, Delta, UploaderDfls }) =>
     state.promisesData.push({
       imageEnableMultiUpload
     });
-    state.promises.push(api.uploadImageToSev(result));
+    const toRead = imageEnableMultiUpload ? files : [file];
+    const readFileToBlob = (f) => f.arrayBuffer().then((ab) => new Blob([ab], { type: f.type }));
+    const uploadPromise = Promise.all(toRead.map(readFileToBlob)).then((blobs) => {
+      result.file = blobs[0];
+      result.fileName = file.name;
+      result.data.files = blobs;
+      api.uploadImageToSev(result);
+    });
+    state.promises.push(uploadPromise);
   } else {
     const promises = files.map((fileItem) => {
       return new Promise((resolve) => {
@@ -432,7 +460,7 @@ const insertImageToEditor = ({ state, FluentEditor, Delta }) => (range, { data }
   state.quill.updateContents(newContent, FluentEditor.sources.USER);
 };
 const uploadImageToSev = ({ state }) => (event) => {
-  const { file, hasRejectedImage, callback } = event;
+  const { file, fileName, hasRejectedImage, callback } = event;
   const { files } = event.data;
   if (hasRejectedImage) {
     return;
@@ -448,7 +476,7 @@ const uploadImageToSev = ({ state }) => (event) => {
     return;
   }
   let { fd = new FormData(), xhr = new XMLHttpRequest() } = {};
-  fd.append(name, file, file.name);
+  fd.append(name, file, fileName || file.name || "file");
   options.csrf && fd.append(options.csrf.token, options.csrf.hash);
   xhr.withCredentials = options.withCredentials !== false;
   xhr.open(method, url, true);
@@ -633,9 +661,44 @@ const beforeUnmount = ({ state, api, vm }) => () => {
   api.removeHandleComposition();
   state.quill.off("selection-change", api.selectionChange);
   state.quill.off("text-change", api.textChange);
+  off(state.quill.root, "click", state.linkClickHandler);
+  state.linkClickHandler = null;
   state.quill = null;
   delete state.quill;
 };
+const handleLinkClick = ({ props, state }) => (event) => {
+  var _a;
+  const anchor = ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.closest) && event.target.closest("a[href]");
+  if (!anchor) {
+    return;
+  }
+  const rawHref = anchor.getAttribute("href") || "";
+  const href = xss.filterUrl(rawHref);
+  event.preventDefault();
+  if (!href || !isSafeLinkUrl(href)) {
+    return;
+  }
+  const payload = {
+    url: href,
+    rawUrl: rawHref,
+    target: anchor.getAttribute("target") || "_blank",
+    rel: anchor.getAttribute("rel") || "",
+    event,
+    quill: state.quill
+  };
+  const beforeLinkOpen = props.beforeLinkOpen;
+  if (typeof beforeLinkOpen !== "function") {
+    openLink(payload.url, payload.target);
+    return;
+  }
+  const open = (allow) => allow !== false && openLink(payload.url, payload.target);
+  try {
+    const result = beforeLinkOpen(payload);
+    result && typeof result.then === "function" ? result.then(open).catch(() => {
+    }) : open(result);
+  } catch (_) {
+  }
+};
 const computePreviewOptions = ({ props, state, constants, api }) => () => {
   if (props.picPreview && state.previewImgUrl) {
     let previewOptions = typeof props.picPreview === "boolean" ? constants.PIC_PREVIEW_OPTIONS : props.picPreview;
@@ -742,6 +805,7 @@ export {
   handleCompositionend,
   handleCompositionstart,
   handleDblclick,
+  handleLinkClick,
   handleUploadFile,
   handleUploadImage,
   handlers,

package/fluent-editor/vue.js

@@ -37,7 +37,8 @@ import {
   handleCompositionend,
   removeHandleComposition,
   checkTableISEndElement,
-  alignHandler
+  alignHandler,
+  handleLinkClick
 } from "./index";
 import { defaultOption, iconOption, iconOptionMobileFirst, simpleToolbar } from "./options";
 const api = ["state", "init", "initContent", "selectionChange", "textChange", "doPreview", "handleDblclick"];
@@ -50,6 +51,7 @@ const initState = ({ api: api2, reactive, computed, props }) => {
     innerContent: "",
     fileUploadUrl: props.fileUpload && props.fileUpload.url || "",
     quill: null,
+    linkClickHandler: null,
     fileInput: null,
     previewOptions: computed(() => api2.computePreviewOptions()),
     previewImgUrl: "",
@@ -109,7 +111,12 @@ const initApi = ({ api: api2, state, service, emit, props, nextTick, FluentEdito
     uploadImageToSev: uploadImageToSev({ state }),
     doPreview: doPreview({ props, state, nextTick }),
     stringToJson: stringToJson({ props }),
-    setToolbarTips: setToolbarTips({ api: api2, vm, FluentEditor, iconOption: mode === "mobile-first" ? iconOptionMobileFirst : iconOption }),
+    setToolbarTips: setToolbarTips({
+      api: api2,
+      vm,
+      FluentEditor,
+      iconOption: mode === "mobile-first" ? iconOptionMobileFirst : iconOption
+    }),
     getOuterHTML: getOuterHTML(),
     setToolbarTitle: setToolbarTitle({ state, t })
   });
@@ -118,11 +125,23 @@ const mergeApi = (args) => {
   let { api: api2, state, service, emit, props, vm, i18n, watch, nextTick, useBreakpoint } = args;
   let { constants, FluentEditor, UploaderDfls, Delta, defaultOptions } = args;
   Object.assign(api2, {
-    init: init({ api: api2, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm, useBreakpoint, simpleToolbar }),
+    init: init({
+      api: api2,
+      emit,
+      props,
+      service,
+      state,
+      FluentEditor,
+      UploaderDfls,
+      defaultOptions,
+      vm,
+      useBreakpoint,
+      simpleToolbar
+    }),
     initContent: initContent({ state, props, api: api2, nextTick }),
-    fileHandler: fileHandler({ api: api2, state }),
-    imageHandler: imageHandler({ api: api2, state }),
-    uploaderDflsHandler: uploaderDflsHandler({ api: api2, modules: defaultOptions.modules }),
+    fileHandler: fileHandler({ api: api2, state, props }),
+    imageHandler: imageHandler({ api: api2, state, props }),
+    uploaderDflsHandler: uploaderDflsHandler({ api: api2, modules: defaultOptions.modules, props }),
     handleUploadFile: handleUploadFile({ api: api2, UploaderDfls }),
     handleUploadImage: handleUploadImage({ state, api: api2, FluentEditor, Delta, UploaderDfls }),
     handlers: handlers({ api: api2 }),
@@ -138,7 +157,8 @@ const mergeApi = (args) => {
     handleComposition: handleComposition({ state, api: api2 }),
     handleCompositionstart: handleCompositionstart({ state }),
     handleCompositionend: handleCompositionend({ state }),
-    removeHandleComposition: removeHandleComposition({ state, api: api2 })
+    removeHandleComposition: removeHandleComposition({ state, api: api2 }),
+    handleLinkClick: handleLinkClick({ props, state })
   });
 };
 const initWatch = ({ watch, state, api: api2, props, vm }) => {
@@ -172,7 +192,7 @@ const initWatch = ({ watch, state, api: api2, props, vm }) => {
 const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { service, emit, i18n, constants, nextTick, vm, t, useBreakpoint, mode }, { FluentEditor }) => {
   const api2 = {};
   const { DEFAULTS: UploaderDfls } = FluentEditor.imports["modules/uploader"];
-  const Delta = FluentEditor.imports["delta"];
+  const Delta = FluentEditor.imports.delta;
   const state = initState({ reactive, computed, api: api2, props });
   const defaultOptions = defaultOption({ FluentEditor, state, mentionObj: props.mentionObj });
   initApi({ api: api2, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t, mode });

package/input/vue.js

@@ -41,7 +41,7 @@ import {
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 import { on, off } from "@opentiny/utils";
-import { debounce } from "@opentiny/utils";
+import { debounceBoth } from "@opentiny/utils";
 const api = [
   "blur",
   "showBox",
@@ -222,7 +222,8 @@ const mergeApi = ({
     }),
     handleFocus: handleFocus({ api: api2, emit, state }),
     handleInput: handleInput({ api: api2, emit, nextTick, state }),
-    resizeTextarea: debounce(200, true, resizeTextarea({ api: api2, parent, vm, state, props })),
+    resizeTextarea: debounceBoth(200, resizeTextarea({ api: api2, parent, vm, state, props })),
+    // 抖动的首尾都要执行一次
     updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
       api: api2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.29.0",
+  "version": "3.30.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,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.29.0",
-    "@opentiny/vue-hooks": "~3.29.0",
+    "@opentiny/utils": "~3.30.0",
+    "@opentiny/vue-hooks": "~3.30.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/rate/index.js

@@ -114,8 +114,7 @@ const showDecimalIcon = ({ props, state }) => (item) => {
   const showWhenAllowHalf = props.allowHalf && state.pointerAtLeftHalf && item - 0.5 <= state.currentValue && item > state.currentValue;
   return showWhenDisabled || showWhenAllowHalf;
 };
-const getIconStyle = ({ api, props, state }) => (item) => {
-  const isHalf = api.showDecimalIcon(item);
+const getIconStyle = ({ props, state }) => (item) => {
   const voidColor = props.disabled ? props.disabledVoidColor : props.voidColor;
   if (props.radio) {
     return {
@@ -124,7 +123,7 @@ const getIconStyle = ({ api, props, state }) => (item) => {
     };
   }
   return {
-    fill: isHalf ? "transparent" : item <= state.currentValue ? state.activeColor : voidColor,
+    fill: item <= state.currentValue ? state.activeColor : voidColor,
     "font-size": props.size || "18px"
   };
 };

package/rate/vue.js

@@ -120,7 +120,7 @@ const renderless = (props, { computed, reactive, toRefs, watch, onMounted, onUnm
     computedActiveColor: computedActiveColor(props),
     computedActiveClass: computedActiveClass(props),
     showDecimalIcon: showDecimalIcon({ props, state }),
-    getIconStyle: getIconStyle({ api: api2, props, state })
+    getIconStyle: getIconStyle({ props, state })
   }, changeValue.api));
   return api2;
 };

package/rich-text/index.js

@@ -106,6 +106,26 @@ const initQuill = ({ api, emit, props, vm, service, state, Quill, ImageDrop, Ima
   }
   emit("ready", state.quill);
   api.setToolbarTips();
+  api.setTooltipI18n();
+  state.tooltipI18nHandler = () => setTimeout(() => {
+    api.setTooltipI18n();
+    api.adjustTooltipPosition();
+  });
+  state.tooltipResizeHandler = () => api.adjustTooltipPosition();
+  vm.$el.addEventListener("click", state.tooltipI18nHandler);
+  vm.$el.addEventListener("keyup", state.tooltipI18nHandler);
+  window.addEventListener("resize", state.tooltipResizeHandler);
+  if (typeof MutationObserver !== "undefined") {
+    state.tooltipObserver = new MutationObserver(() => {
+      requestAnimationFrame(() => api.adjustTooltipPosition());
+    });
+    state.tooltipObserver.observe(vm.$el, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class", "data-mode"]
+    });
+  }
 };
 const handleClick = ({ state, Quill }) => (event) => {
   const el = event.target;
@@ -138,6 +158,64 @@ const setToolbarTips = ({ t, vm }) => () => {
     });
   }
 };
+const setTooltipI18n = ({ t, vm }) => () => {
+  const richTextEl = vm.$el;
+  const tips = richTextEl.querySelectorAll(".ql-container .ql-tooltip");
+  const getPlaceholderByMode = (mode) => {
+    if (mode === "video")
+      return t("ui.richText.enterVideo");
+    if (mode === "formula")
+      return t("ui.richText.enterFormula");
+    return t("ui.richText.enterLink");
+  };
+  if (tips.length) {
+    Array.prototype.slice.call(tips).forEach((tip) => {
+      const mode = tip.getAttribute("data-mode") || "link";
+      const input = tip.querySelector("input[type='text']");
+      tip.setAttribute("data-visit-url-text", `${t("ui.richText.visitUrl")}:`);
+      tip.setAttribute("data-edit-text", t("ui.richText.edit"));
+      tip.setAttribute("data-remove-text", t("ui.richText.remove"));
+      tip.setAttribute("data-save-text", t("ui.richText.save"));
+      tip.setAttribute("data-enter-link-text", `${t("ui.richText.enterLink")}:`);
+      tip.setAttribute("data-enter-formula-text", `${t("ui.richText.enterFormula")}:`);
+      tip.setAttribute("data-enter-video-text", `${t("ui.richText.enterVideo")}:`);
+      if (input) {
+        input.setAttribute("placeholder", getPlaceholderByMode(mode));
+      }
+    });
+  }
+};
+const adjustTooltipPosition = ({ vm }) => () => {
+  const container = vm.$el.querySelector(".ql-container");
+  const tips = vm.$el.querySelectorAll(".ql-container .ql-tooltip");
+  const minGap = 8;
+  if (!container) {
+    return;
+  }
+  const containerRect = container.getBoundingClientRect();
+  if (tips.length) {
+    Array.prototype.slice.call(tips).forEach((tip) => {
+      if (!tip.classList.contains("ql-editing")) {
+        return;
+      }
+      const offsetParent = tip.offsetParent || tip.parentElement;
+      if (!offsetParent) {
+        return;
+      }
+      const parentRect = offsetParent.getBoundingClientRect();
+      const currentLeft = parseFloat(tip.style.left || "0");
+      const safeCurrentLeft = Number.isFinite(currentLeft) ? currentLeft : 0;
+      const minLeft = containerRect.left - parentRect.left + minGap;
+      const maxLeft = containerRect.right - parentRect.left - tip.offsetWidth - minGap;
+      if (maxLeft <= minLeft) {
+        tip.style.left = `${minLeft}px`;
+        return;
+      }
+      const clampedLeft = Math.min(Math.max(safeCurrentLeft, minLeft), maxLeft);
+      tip.style.left = `${clampedLeft}px`;
+    });
+  }
+};
 const setPlaceholder = ({ state, props }) => () => {
   if (state.quill) {
     state.quill.root.setAttribute("data-placeholder", props.options.placeholder);
@@ -220,17 +298,27 @@ const mounted = ({ api, props, state, i18n, watch }) => () => {
     api.initQuill();
   }
   if (i18n) {
-    watch(() => i18n.locale, api.setToolbarTips);
+    watch(() => i18n.locale, () => {
+      api.setToolbarTips();
+      api.setTooltipI18n();
+      api.adjustTooltipPosition();
+    });
   }
 };
-const beforeUnmount = ({ api, state }) => () => {
+const beforeUnmount = ({ api, state, vm }) => () => {
   state.quill.off("selection-change", api.selectionChange);
   state.quill.off("text-change", api.textChange);
   state.quill.root.removeEventListener("click", api.handleClick);
+  state.tooltipI18nHandler && vm.$el.removeEventListener("click", state.tooltipI18nHandler);
+  state.tooltipI18nHandler && vm.$el.removeEventListener("keyup", state.tooltipI18nHandler);
+  state.tooltipResizeHandler && window.removeEventListener("resize", state.tooltipResizeHandler);
+  state.tooltipObserver && state.tooltipObserver.disconnect();
+  state.tooltipObserver = null;
   state.quill = null;
   delete state.quill;
 };
 export {
+  adjustTooltipPosition,
   beforeUnmount,
   getFileUploadUrl,
   handleClick,
@@ -243,5 +331,6 @@ export {
   selectionChange,
   setPlaceholder,
   setToolbarTips,
+  setTooltipI18n,
   textChange
 };

package/rich-text/vue.js

@@ -3,6 +3,8 @@ import {
   initContent,
   initQuill,
   setToolbarTips,
+  setTooltipI18n,
+  adjustTooltipPosition,
   setPlaceholder,
   getFileUploadUrl,
   selectionChange,
@@ -19,6 +21,8 @@ const api = [
   "initContent",
   "initQuill",
   "setToolbarTips",
+  "setTooltipI18n",
+  "adjustTooltipPosition",
   "setPlaceholder",
   "selectionChange",
   "textChange",
@@ -32,7 +36,10 @@ const initState = ({ reactive, props, computed, api: api2 }) => {
     content: props.modelValue || props.content,
     maxLength: computed(() => api2.maxLength()),
     pasteCanceled: false,
-    isDisplayOnly: computed(() => api2.isDisplayOnly())
+    isDisplayOnly: computed(() => api2.isDisplayOnly()),
+    tooltipI18nHandler: null,
+    tooltipResizeHandler: null,
+    tooltipObserver: null
   });
   return state;
 };
@@ -44,12 +51,14 @@ const initApi = (args) => {
     initContent: initContent({ state, props, nextTick }),
     initQuill: initQuill({ service, emit, props, api: api2, state, vm, ImageDrop, FileUpload, ImageUpload, Quill }),
     setToolbarTips: setToolbarTips({ t, vm }),
+    setTooltipI18n: setTooltipI18n({ t, vm }),
+    adjustTooltipPosition: adjustTooltipPosition({ vm }),
     setPlaceholder: setPlaceholder({ state, props }),
     getFileUploadUrl: getFileUploadUrl({ service }),
     selectionChange: selectionChange({ emit, state }),
     textChange: textChange({ emit, vm, state, Modal, t }),
     mounted: mounted({ api: api2, props, state, i18n, watch }),
-    beforeUnmount: beforeUnmount({ api: api2, state }),
+    beforeUnmount: beforeUnmount({ api: api2, state, vm }),
     maxLength: maxLength({ props, constants }),
     handlePaste: handlePaste({ state }),
     isDisplayOnly: isDisplayOnly({ state, props, parent, nextTick }),

package/select/index.js

@@ -1131,6 +1131,11 @@ const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMod
         vm.$refs.scrollbar.handleScroll();
       }
     }
+    if (value && state.device === "mb" && state.breakpoint === "default") {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
+    }
   }, props.updateDelay);
   if (!value && props.shape === "filter") {
     state.softFocus = false;

package/tabs-mf/index.js

@@ -39,7 +39,9 @@ const canLeave = (props) => (newTab, oldTab) => {
   }
 };
 const changeCurrentName = ({ emit, state }) => (name) => {
-  state.items.forEach((item) => item.selected = item.name === name);
+  state.items.forEach((item) => {
+    item.selected = item.name === name;
+  });
   emit("update:activeName", name);
   emit("update:modelValue", name);
 };
@@ -111,7 +113,13 @@ const removeItem = ({ props, state, emit, api }) => (name, silent = false) => {
     state.navs = [...state.navs];
     if (isCurrent) {
       const nextName = nextNav ? nextNav.name : ((_a = state.items[0]) == null ? void 0 : _a.name) || "";
-      api.changeCurrentName(nextName);
+      if (silent) {
+        state.items.forEach((item) => {
+          item.selected = item.name === nextName;
+        });
+      } else {
+        api.changeCurrentName(nextName);
+      }
       state.currentItem = state.items.find((item) => item.name === nextName) || null;
     }
     if (!silent) {

package/time-spinner/index.js

@@ -75,7 +75,7 @@ const handleScroll = ({ api, vm, state }) => (type) => {
   api.modifyDateField(type, value);
 };
 const selectDateScroll = ({ state, props }) => (type, value) => {
-  if (Object.keys(props.endDate).length !== 0) {
+  if (props.endDate instanceof Date) {
     const endHours = props.endDate.getHours();
     const endMinutes = props.endDate.getMinutes();
     const endSeconds = props.endDate.getSeconds();
@@ -86,7 +86,7 @@ const selectDateScroll = ({ state, props }) => (type, value) => {
     } else {
       value = state.hours === endHours && state.minutes === endMinutes && value > endSeconds ? state.seconds : value;
     }
-  } else if (Object.keys(props.startDate).length !== 0) {
+  } else if (props.startDate instanceof Date) {
     const startHours = props.startDate.getHours();
     const startMinutes = props.startDate.getMinutes();
     const startSeconds = props.startDate.getSeconds();

package/tree-select/index.js

@@ -3,18 +3,35 @@ import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
 import { find } from "@opentiny/utils";
+const getSingleSelectedData = ({ props, data }) => __spreadProps(__spreadValues({}, data), {
+  currentLabel: data[props.textField],
+  value: data[props.valueField],
+  state: {
+    currentLabel: data[props.textField]
+  }
+});
+const updateSingleSelected = ({ props, vm, data }) => {
+  var _a;
+  vm.$refs.baseSelectRef.updateSelectedData(data);
+  const baseState = vm.$refs.baseSelectRef.state;
+  if (!baseState)
+    return;
+  const currentLabel = (_a = data == null ? void 0 : data[props.textField]) != null ? _a : "";
+  baseState.selectedLabel = currentLabel;
+  if (props.filterable || props.searchable) {
+    baseState.query = currentLabel;
+  }
+};
 const filter = ({ vm }) => (value) => {
   vm.$refs.treeRef.filter(value);
 };
 const nodeClick = ({ props, vm, emit }) => (data) => {
   if (!props.multiple) {
-    vm.$refs.baseSelectRef.updateSelectedData(__spreadProps(__spreadValues({}, data), {
-      currentLabel: data[props.textField],
-      value: data[props.valueField],
-      state: {
-        currentLabel: data[props.textField]
-      }
-    }));
+    updateSingleSelected({
+      props,
+      vm,
+      data: getSingleSelectedData({ props, data })
+    });
     emit("change", data[props.valueField]);
     emit("update:modelValue", data[props.valueField]);
     vm.$refs.baseSelectRef.hidePanel();
@@ -114,17 +131,35 @@ const mounted = ({ api, state, props, vm }) => () => {
     const data = options && options.length > 0 ? options[0] : null;
     if (!data)
       return;
-    vm.$refs.baseSelectRef.updateSelectedData(__spreadProps(__spreadValues({}, data), {
-      currentLabel: data[props.textField],
-      value: data[props.valueField],
-      state: {
-        currentLabel: data[props.textField]
-      }
-    }));
+    updateSingleSelected({
+      props,
+      vm,
+      data: getSingleSelectedData({ props, data })
+    });
     state.currentKey = data[props.valueField];
   }
 };
 const watchValue = ({ api, props, vm, state }) => (newValue, oldValue) => {
+  if (!props.multiple) {
+    if (newValue === oldValue || newValue === state.currentKey)
+      return;
+    if (newValue === null || newValue === void 0 || newValue === "") {
+      updateSingleSelected({ props, vm, data: {} });
+      state.currentKey = "";
+      return;
+    }
+    const options = api.getPluginOption(newValue);
+    const data = options && options.length > 0 ? options[0] : null;
+    if (!data)
+      return;
+    updateSingleSelected({
+      props,
+      vm,
+      data: getSingleSelectedData({ props, data })
+    });
+    state.currentKey = data[props.valueField];
+    return;
+  }
   if (props.multiple) {
     const xorResult = oldValue.filter((item) => !newValue.includes(item));
     const tagId = xorResult[0];

package/types/action-menu.type.d.ts

@@ -26,6 +26,10 @@ declare const actionMenuProps: {
         type: StringConstructor;
         default: string;
     };
+    placement: {
+        type: StringConstructor;
+        default: string;
+    };
     popperClass: {
         type: StringConstructor;
         default: string;

package/types/anchor.type.d.ts

@@ -49,7 +49,7 @@ declare const mounted: ({ state, api, props, nextTick }: Pick<IAnchorRenderlessP
 declare const updated: ({ api }: Pick<IAnchorRenderlessParams, 'api'>) => () => void;
 declare const unmounted: ({ state, api }: Pick<IAnchorRenderlessParams, 'state' | 'api'>) => () => void;
 declare const onItersectionObserver: ({ state, props, api, vm, emit }: Pick<IAnchorRenderlessParams, 'state' | 'props' | 'api' | 'vm' | 'emit'>) => () => void;
-declare const linkClick: ({ state, vm, emit, props, api }: Pick<IAnchorRenderlessParams, 'state' | 'vm' | 'emit' | 'props' | 'api'>) => (e: Event, item: IAnchorLinkItem) => void;
+declare const linkClick: ({ state, vm, emit, props, api, framework }: Pick<IAnchorRenderlessParams, 'state' | 'vm' | 'emit' | 'props' | 'api' | 'framework'>) => (e: Event, item: IAnchorLinkItem) => void;
 
 type IAnchorObject = HTMLElement | null;
 interface IAnchorState {

package/types/drawer.type.d.ts

@@ -15,6 +15,10 @@ declare const drawerProps: {
             DEFAULT_HEIGHT: string;
         };
     };
+    appendToBody: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     visible: {
         type: BooleanConstructor;
         default: boolean;
@@ -81,7 +85,7 @@ declare const close: ({ api }: {
     api: IDrawerApi;
 }) => (force?: boolean) => void;
 declare const closed: ({ state, emit }: Pick<IDrawerRenderlessParams, 'state' | 'emit'>) => () => void;
-declare const watchVisible: ({ state, api }: Pick<IDrawerRenderlessParams, 'state' | 'api'>) => (value: boolean) => void;
+declare const watchVisible: ({ props, parent, api }: Pick<IDrawerRenderlessParams, 'props' | 'parent' | 'api'>) => (value: boolean) => void;
 declare const open: ({ state, emit, vm }: Pick<IDrawerRenderlessParams, 'state' | 'emit' | 'vm'>) => () => void;
 declare const confirm: ({ api }: {
     api: IDrawerApi;

package/types/file-upload.type.d.ts

@@ -1,3 +1,3 @@
 import 'vue';
-export { C as IFileUploadAfterDownload, m as IFileUploadApi, D as IFileUploadBatchSegmentDownload, y as IFileUploadBatchSegmentUpload, a as IFileUploadConstants, w as IFileUploadDownloadFileInner, x as IFileUploadDownloadFileSingle, u as IFileUploadDownloadFileSingleInner, t as IFileUploadEdmDownload, s as IFileUploadFile, A as IFileUploadGetFormData, v as IFileUploadLargeDocumentDownload, r as IFileUploadModalVm, o as IFileUploadProps, p as IFileUploadRenderlessParamUtils, q as IFileUploadRenderlessParams, z as IFileUploadSegmentUploadInner, n as IFileUploadService, B as IFileUploadSetWriterFile, E as IFileUploadSliceDownloadChunk, l as IFileUploadState, F as IFileUploadStreamsaver, I as IFileUploadVm } from './upload-list.type-d5ff675d.js';
+export { C as IFileUploadAfterDownload, m as IFileUploadApi, D as IFileUploadBatchSegmentDownload, y as IFileUploadBatchSegmentUpload, a as IFileUploadConstants, w as IFileUploadDownloadFileInner, x as IFileUploadDownloadFileSingle, u as IFileUploadDownloadFileSingleInner, t as IFileUploadEdmDownload, s as IFileUploadFile, A as IFileUploadGetFormData, v as IFileUploadLargeDocumentDownload, r as IFileUploadModalVm, o as IFileUploadProps, p as IFileUploadRenderlessParamUtils, q as IFileUploadRenderlessParams, z as IFileUploadSegmentUploadInner, n as IFileUploadService, B as IFileUploadSetWriterFile, E as IFileUploadSliceDownloadChunk, l as IFileUploadState, F as IFileUploadStreamsaver, I as IFileUploadVm } from './upload-list.type-36a8374a.js';
 import './shared.type.js';

package/types/input.type.d.ts

@@ -248,7 +248,7 @@ declare const calculateNodeStyling: () => (targetElement: HTMLElement) => {
     borderSize: number;
     boxSizing: string;
 };
-declare const calcTextareaHeight: ({ api, hiddenTextarea, props, state, mode, constants }: Pick<IInputRenderlessParams, "state" | "props" | "mode" | "api" | "constants"> & {
+declare const calcTextareaHeight: ({ api, hiddenTextarea, props, state, mode, constants }: Pick<IInputRenderlessParams, "mode" | "props" | "state" | "api" | "constants"> & {
     hiddenTextarea: HTMLTextAreaElement | null;
 }) => (targetElement: HTMLTextAreaElement, minRows?: number, maxRows?: null) => {
     minHeight?: string | undefined;

package/types/popover.type.d.ts

@@ -93,7 +93,7 @@ declare const popoverProps: {
  *
  */
 
-declare const mounted: ({ api, state, constants, props, nextTick, mode }: Pick<IPopoverRenderlessParams, "state" | "props" | "nextTick" | "mode" | "api"> & {
+declare const mounted: ({ api, state, constants, props, nextTick, mode }: Pick<IPopoverRenderlessParams, "mode" | "props" | "state" | "api" | "nextTick"> & {
     constants: {
         IDPREFIX: string;
     };

package/types/rate.type.d.ts

@@ -164,8 +164,7 @@ declare const showDecimalIcon: ({ props, state }: {
     props: any;
     state: any;
 }) => (item: any) => any;
-declare const getIconStyle: ({ api, props, state }: {
-    api: any;
+declare const getIconStyle: ({ props, state }: {
     props: any;
     state: any;
 }) => (item: any) => {

package/types/transfer.type.d.ts

@@ -112,14 +112,14 @@ declare const getSourceData: ({ props, Tree }: Pick<ITransferRenderlessParams, "
     Tree: string;
 }) => () => unknown[];
 /** 返回右边的数据项 */
-declare const getTargetData: ({ props, state, Tree, Table }: Pick<ITransferRenderlessParams, "state" | "props"> & {
+declare const getTargetData: ({ props, state, Tree, Table }: Pick<ITransferRenderlessParams, "props" | "state"> & {
     Tree: string;
     Table: string;
 }) => () => unknown;
 declare const onSourceCheckedChange: ({ emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'state'>) => (val: string[], movedKeys: string[]) => void;
 declare const onTargetCheckedChange: ({ emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'state'>) => (val: string[], movedKeys: string[]) => void;
 declare const addToLeft: ({ emit, props, state }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) => (value: undefined | 'all') => void;
-declare const addToRight: ({ emit, refs, props, state, Tree }: Pick<ITransferRenderlessParams, "state" | "props" | "refs" | "emit"> & {
+declare const addToRight: ({ emit, refs, props, state, Tree }: Pick<ITransferRenderlessParams, "emit" | "props" | "state" | "refs"> & {
     Tree: string;
 }) => (value: undefined | 'all') => void;
 declare const clearQuery: (refs: ITransferRenderlessParams['refs']) => (which: 'left' | 'right') => void;
@@ -130,7 +130,7 @@ declare const logicFun: ({ props, emit, state, vm }: Pick<ITransferRenderlessPar
     pullMode?: "sort" | undefined;
 }) => void;
 /** 组件加载后，给左右面板初始化Sortable的功能 */
-declare const sortableEvent: ({ api, droppanel, props, queryDom, refs }: Pick<ITransferRenderlessParams, "props" | "refs" | "api"> & {
+declare const sortableEvent: ({ api, droppanel, props, queryDom, refs }: Pick<ITransferRenderlessParams, "props" | "api" | "refs"> & {
     droppanel: string;
     queryDom: string;
 }) => () => void;

package/types/upload-dragger.type.d.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from 'vue';
 import { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams } from './shared.type.js';
-import { I as IFileUploadVm, a as IFileUploadConstants } from './upload-list.type-d5ff675d.js';
+import { I as IFileUploadVm, a as IFileUploadConstants } from './upload-list.type-36a8374a.js';
 
 declare const UploadDraggerProps: {
     disabled: BooleanConstructor;

package/types/{upload-list.type-d5ff675d.d.ts → upload-list.type-36a8374a.d.ts}

@@ -489,7 +489,7 @@ declare const sliceDownloadChunk: ({ state }: Pick<IFileUploadRenderlessParams,
 declare const batchSegmentDownload: ({ state, api }: Pick<IFileUploadRenderlessParams, 'state' | 'api'>) => ({ batchIndex, batches, docId, isBatch, isLessThan17G }: IFileUploadBatchSegmentDownload) => void;
 declare const downloadFileInner: ({ api, props, state }: Pick<IFileUploadRenderlessParams, 'api' | 'props' | 'state'>) => ({ batchIndex, file, range, isBatch, isChunk, isLessThan17G }: IFileUploadDownloadFileInner) => void;
 declare const afterDownload: ({ api, state }: Pick<IFileUploadRenderlessParams, 'api' | 'state'>) => ({ batchIndex, range, data, file, isBatch, isChunk, isLessThan17G }: IFileUploadAfterDownload) => void;
-declare const setWriterFile: ({ state, emit, Streamsaver }: Pick<IFileUploadRenderlessParams, "state" | "emit"> & {
+declare const setWriterFile: ({ state, emit, Streamsaver }: Pick<IFileUploadRenderlessParams, "emit" | "state"> & {
     Streamsaver: IFileUploadStreamsaver;
 }) => ({ data, index, isLessThan17G, file }: IFileUploadSetWriterFile) => Function;
 declare const getFormData$1: ({ constants, props, state }: Pick<IFileUploadRenderlessParams, 'constants' | 'props' | 'state'>) => ({ formData, file, type }: IFileUploadGetFormData) => IUploadFormData;

package/types/upload-list.type.d.ts

@@ -1,3 +1,3 @@
 import 'vue';
-export { H as IUploadListApi, J as IUploadListProps, K as IUploadListRenderlessParamUtils, L as IUploadListRenderlessParams, G as IUploadListState, M as IUploadListVideoParam } from './upload-list.type-d5ff675d.js';
+export { H as IUploadListApi, J as IUploadListProps, K as IUploadListRenderlessParamUtils, L as IUploadListRenderlessParams, G as IUploadListState, M as IUploadListVideoParam } from './upload-list.type-36a8374a.js';
 import './shared.type.js';

package/types/upload.type.d.ts

@@ -1,3 +1,3 @@
 import 'vue';
-export { d as IUploadApi, i as IUploadFormData, k as IUploadOptionsOfHwh5, j as IUploadOptionsOfPost, e as IUploadProps, h as IUploadRenderlessOtherParams, f as IUploadRenderlessParamUtils, g as IUploadRenderlessParams, c as IUploadState, b as IUploadStateHeader } from './upload-list.type-d5ff675d.js';
+export { d as IUploadApi, i as IUploadFormData, k as IUploadOptionsOfHwh5, j as IUploadOptionsOfPost, e as IUploadProps, h as IUploadRenderlessOtherParams, f as IUploadRenderlessParamUtils, g as IUploadRenderlessParams, c as IUploadState, b as IUploadStateHeader } from './upload-list.type-36a8374a.js';
 import './shared.type.js';

package/user/index.js

@@ -286,7 +286,7 @@ const userChange = ({ api, emit, props, state, dispatch, constants }) => (value,
 const syncCacheIds = ({ props, state }) => (ids, queryIds, cacheData) => {
   const { cacheFields, cacheKey } = props;
   const { valueField } = state;
-  const cacheUsers = toJson(window.localStorage.getItem(cacheKey)) || {};
+  const cacheUsers = toJson(window.sessionStorage.getItem(cacheKey)) || {};
   const caseCacheUsers = getLowerCaseObj(cacheUsers);
   ids.forEach((id) => {
     const caseId = toLowerCase(id);
@@ -294,7 +294,7 @@ const syncCacheIds = ({ props, state }) => (ids, queryIds, cacheData) => {
     if (cacheUser2) {
       const textField = state.textField === "userCN" || state.textField === "userId" || state.textField === "dept" ? "" : state.textField;
       if (textField !== "" && !cacheUser2.a) {
-        window.localStorage.removeItem(cacheKey);
+        window.sessionStorage.removeItem(cacheKey);
         queryIds.push(id);
       }
       const user = {
@@ -344,7 +344,7 @@ const getUsers = ({ api, props, state, emit }) => (value) => {
   });
 };
 const updateCache = ({ props, state }) => () => {
-  const users = toJson(window.localStorage.getItem(props.cacheKey)) || {};
+  const users = toJson(window.sessionStorage.getItem(props.cacheKey)) || {};
   const currDate = toDateStr(/* @__PURE__ */ new Date(), "yyyyMMdd");
   if (currDate !== users.t) {
     users.t = currDate;
@@ -362,12 +362,12 @@ const updateCache = ({ props, state }) => () => {
   state.cache = users;
 };
 const saveCache = ({ props }) => (cache) => {
-  window.localStorage.setItem(props.cacheKey, toJsonStr(cache));
+  window.sessionStorage.setItem(props.cacheKey, toJsonStr(cache));
 };
 const cacheUser = ({ api, props, service, state }) => (users) => {
   const { cacheKey } = props;
   const { valueField } = state;
-  const cacheUser2 = toJson(window.localStorage.getItem(cacheKey)) || {};
+  const cacheUser2 = toJson(window.sessionStorage.getItem(cacheKey)) || {};
   const cacheFields = service.userCache;
   let user;
   for (let i = 0; i < users.length; i++) {