@opentiny/vue-renderless 3.18.6 → 3.19.0

package/date-panel/vue.js

@@ -44,7 +44,8 @@ import {
   computerTimeFormat,
   watchVisible,
   getDisabledNow,
-  getDisabledConfirm
+  getDisabledConfirm,
+  getNowTime
 } from "./index";
 import { getWeekNumber, extractDateFormat } from "../common/deps/date-util";
 import { DATEPICKER, DATE } from "../common";
@@ -72,9 +73,11 @@ const api = [
   "handleVisibleDateChange",
   "handleLeave",
   "handleShortcutClick",
-  "handleTimePickClose"
+  "handleTimePickClose",
+  "getNowTime"
 ];
-const initState = ({ reactive, computed, api: api2, i18n }) => {
+const initState = ({ reactive, computed, api: api2, i18n, designConfig }) => {
+  var _a, _b;
   const state = reactive({
     popperClass: "",
     date: /* @__PURE__ */ new Date(),
@@ -118,7 +121,9 @@ const initState = ({ reactive, computed, api: api2, i18n }) => {
     dateFormat: computed(() => state.format ? extractDateFormat(state.format.replace(state.timefmt, "")) : DATE.Date),
     lang: computed(() => i18n ? i18n.locale.replace(/_/g, "-") : "zh-CN"),
     isShowTz: computed(() => state.showTimezone && state.showTime),
-    isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView))
+    isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView)),
+    buttonType: ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.buttonType) || "default",
+    buttonSize: ((_b = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _b.buttonSize) || ""
   });
   state.needChangeTimezoneData = true;
   return state;
@@ -150,7 +155,7 @@ const initWatch = ({ watch, state, api: api2, nextTick }) => {
   );
   watch(() => state.visible, api2.watchVisible);
 };
-const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
+const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch, props }) => {
   Object.assign(api2, {
     t,
     state,
@@ -181,7 +186,7 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
     searchTz: searchTz({ api: api2, state }),
     handleEnter: handleEnter(api2),
     handleLeave: handleLeave({ api: api2, emit }),
-    changeToNow: changeToNow({ api: api2, state }),
+    changeToNow: changeToNow({ api: api2, state, props }),
     isValidValue: isValidValue({ api: api2, state }),
     handleClear: handleClear({ api: api2, state, emit }),
     watchValue: watchValue({ api: api2, state }),
@@ -198,14 +203,15 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch }) => {
     handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, vm, state, t }),
     computerTimeFormat: computerTimeFormat({ state }),
     getDisabledNow: getDisabledNow({ state }),
-    getDisabledConfirm: getDisabledConfirm({ state })
+    getDisabledConfirm: getDisabledConfirm({ state }),
+    getNowTime: getNowTime({ props })
   });
 };
-const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n }) => {
+const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n, designConfig }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2, i18n });
-  initApi({ api: api2, state, t, emit, nextTick, vm, watch });
+  const state = initState({ reactive, computed, api: api2, i18n, designConfig });
+  initApi({ api: api2, state, t, emit, nextTick, vm, watch, props });
   initWatch({ watch, state, api: api2, nextTick });
   return api2;
 };

package/dialog-select/index.js

@@ -124,6 +124,80 @@ const selectedBoxClear = ({ props, state, vm }) => () => {
   state.selectedDatas = [];
   state.selectedChanged = true;
 };
+const setTreeSelection = ({ api, state, vm, props }) => (keys, value) => {
+  const tree = vm.$refs.multiTree;
+  if (!tree) {
+    return;
+  }
+  if (value) {
+    keys.forEach((key) => {
+      if (!state.selectedValues.includes(key)) {
+        tree.setCheckedByNodeKey(key, true);
+        const datas = getTreeSelect({ vm, props });
+        const values = datas.map((item) => item[props.valueField]);
+        state.selectedDatas = datas;
+        state.selectedValues = values;
+      }
+    });
+  } else {
+    keys.forEach((key) => {
+      if (state.selectedValues.includes(key)) {
+        tree.setCheckedByNodeKey(key, false);
+        const datas = getTreeSelect({ vm, props });
+        const values = datas.map((item) => item[props.valueField]);
+        state.selectedDatas = datas;
+        state.selectedValues = values;
+      }
+    });
+  }
+  api.selectedBoxInit();
+};
+const setGridSelection = ({ api, state, vm }) => (keys, value) => {
+  const grid = vm.$refs.multiGrid;
+  if (!grid) {
+    return;
+  }
+  const gridRows = [];
+  if (value) {
+    keys.forEach((key) => {
+      if (!state.selectedValues.includes(key)) {
+        const row = grid.getRowById(key);
+        state.selectedValues = [...state.selectedValues, key];
+        state.selectedDatas = [...state.selectedDatas, row];
+        gridRows.push(row);
+      }
+    });
+  } else {
+    keys.forEach((key) => {
+      if (state.selectedValues.includes(key)) {
+        const index = state.selectedValues.indexOf(key);
+        state.selectedValues.splice(index, 1);
+        state.selectedDatas.splice(index, 1);
+        gridRows.push(grid.getRowById(key));
+      }
+    });
+  }
+  grid.setSelection(gridRows, Boolean(value));
+  api.selectedBoxInit();
+};
+const setSelection = ({ props, api }) => (data, value) => {
+  const { multi, popseletor, valueField } = props;
+  if (!multi) {
+    return;
+  }
+  const dataArr = Array.isArray(data) ? data : [data];
+  const keys = dataArr.map((i) => i[valueField]).filter((i) => i);
+  if (keys.length === 0) {
+    return;
+  }
+  if (popseletor === "grid") {
+    return api.setGridSelection(keys, value);
+  }
+  if (popseletor === "tree") {
+    return api.setTreeSelection(keys, value);
+  }
+};
+const getSelection = ({ state }) => () => state.selectedDatas;
 const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
   const { multi, popseletor } = props;
   if (multi && popseletor === "grid") {
@@ -376,6 +450,7 @@ export {
   doMultiTreeFilter,
   emitChange,
   emitClose,
+  getSelection,
   multiGridRadioChange,
   multiGridSelectAll,
   multiGridSelectChange,
@@ -393,5 +468,8 @@ export {
   selectedBoxDrag,
   selectedBoxInit,
   setChecked,
+  setGridSelection,
+  setSelection,
+  setTreeSelection,
   watchMulti
 };

package/dialog-select/vue.js

@@ -24,7 +24,11 @@ import {
   multiTreeRadio,
   multiGridRadioChange,
   watchMulti,
-  clearStatus
+  clearStatus,
+  setGridSelection,
+  setTreeSelection,
+  setSelection,
+  getSelection
 } from "./index";
 const api = [
   "state",
@@ -45,9 +49,11 @@ const api = [
   "onFooterConfirm",
   "multiTreeRadio",
   "multiGridRadioChange",
-  "clearStatus"
+  "clearStatus",
+  "setSelection",
+  "getSelection"
 ];
-const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }) => {
+const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit, constants, designConfig }) => {
   const state = reactive({
     splitValue: 0,
     gridColumns: computed(() => api2.computedGridColumns()),
@@ -71,7 +77,15 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
     lookupStore: {
       datas: []
     },
-    theme: vm.theme
+    theme: vm.theme,
+    isBorder: computed(() => {
+      if (typeof props.gridOp.border === "boolean") {
+        return props.gridOp.border;
+      } else {
+        return vm.theme !== "saas";
+      }
+    }),
+    constants: (designConfig == null ? void 0 : designConfig.constants) || constants
   });
   state.temporary = {};
   const api2 = {
@@ -102,11 +116,19 @@ const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }
     setChecked: setChecked({ api: api2, props, state }),
     multiTreeRadio: multiTreeRadio({ api: api2, props }),
     watchMulti: watchMulti({ api: api2, state, props }),
-    clearStatus: clearStatus(api2)
+    clearStatus: clearStatus(api2),
+    setSelection: setSelection({ api: api2, props }),
+    getSelection: getSelection({ state }),
+    setTreeSelection: setTreeSelection({ api: api2, state, vm, props }),
+    setGridSelection: setGridSelection({ api: api2, state, vm })
   });
   watch(
     () => props.visible,
-    (value) => value && !state.multiGridStore.inited && api2.queryGridData()
+    (value) => {
+      if (value && !state.multiGridStore.inited) {
+        api2.queryGridData();
+      }
+    }
   );
   watch(
     () => props.multi,

package/drawer/index.js

@@ -13,7 +13,19 @@ const computedWidth = ({
   }
   return props.width || ((_a = designConfig == null ? void 0 : designConfig.constants) == null ? void 0 : _a.DEFAULT_WIDTH) || constants.DEFAULT_WIDTH;
 };
-const close = ({ api }) => (force = false) => {
+const computedHeight = ({
+  state,
+  designConfig,
+  props,
+  constants
+}) => () => {
+  var _a;
+  if (state.height) {
+    return state.height + "px";
+  }
+  return props.height || ((_a = designConfig == null ? void 0 : designConfig.constants) == null ? void 0 : _a.DEFAULT_HEIGHT) || constants.DEFAULT_HEIGHT;
+};
+const close = ({ api }) => (force = true) => {
   api.handleClose("close", typeof force === "boolean" ? force : false);
 };
 const watchVisible = ({ state, api }) => (value) => {
@@ -116,6 +128,7 @@ const hideScrollbar = (lockScrollClass) => () => {
 export {
   addDragEvent,
   close,
+  computedHeight,
   computedWidth,
   confirm,
   handleClose,

package/drawer/vue.js

@@ -12,11 +12,11 @@ import {
   hideScrollbar,
   handleClose,
   computedWidth,
+  computedHeight,
   open
 } from "./index";
 const api = ["state", "close", "confirm", "handleClose", "open"];
 const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants, designConfig }) => {
-  var _a;
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const api2 = {};
   const state = reactive({
@@ -25,7 +25,7 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     height: 0,
     dragEvent: { x: 0, y: 0, isDrag: false, offsetWidth: 0, offsetHeight: 0 },
     computedWidth: computed(() => api2.computedWidth()),
-    btnOrderReversed: vm.theme === "saas" || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.btnOrderReversed)
+    computedHeight: computed(() => api2.computedHeight())
   });
   Object.assign(api2, {
     state,
@@ -41,7 +41,8 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
     watchVisible: watchVisible({ state, api: api2 }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
-    computedWidth: computedWidth({ state, designConfig, props, constants })
+    computedWidth: computedWidth({ state, designConfig, props, constants }),
+    computedHeight: computedHeight({ state, designConfig, props, constants })
   });
   onMounted(() => {
     props.dragable && api2.addDragEvent();

package/dropdown-item/index.js

@@ -109,7 +109,7 @@ const handleClick = ({
 const computedGetIcon = ({ constants, designConfig }) => (name = "leftWardArrow") => {
   return (designConfig == null ? void 0 : designConfig.icons[name]) || (constants == null ? void 0 : constants.ICON_MAP[name]);
 };
-const getTip = ({ props, vm }) => {
+const computedTip = ({ props, vm }) => () => {
   if (props.tip && typeof props.tip === "function") {
     return props.tip({ itemData: props.itemData, vm });
   }
@@ -123,10 +123,10 @@ export {
   close,
   closed,
   computedGetIcon,
+  computedTip,
   confirm,
   getItemStyle,
   getOptionStyle,
-  getTip,
   getTitle,
   handleClick,
   onScroll,

package/dropdown-item/vue.js

@@ -18,7 +18,7 @@ import {
   getItemStyle,
   handleClick,
   computedGetIcon,
-  getTip
+  computedTip
 } from "./index";
 const api = [
   "state",
@@ -35,9 +35,9 @@ const api = [
   "close",
   "closed",
   "handleClick",
-  "getTip"
+  "computedTip"
 ];
-const initState = ({ reactive, computed, api: api2, props, parent, dropdownMenuVm }) => {
+const initState = ({ reactive, computed, api: api2, props, parent, dropdownMenuVm, dropdownVm }) => {
   const state = reactive({
     checkedStatus: dropdownMenuVm == null ? void 0 : dropdownMenuVm.checkedStatus,
     sort: props.modelValue,
@@ -57,8 +57,10 @@ const initState = ({ reactive, computed, api: api2, props, parent, dropdownMenuV
     currentIndex: props.currentIndex,
     textField: (dropdownMenuVm == null ? void 0 : dropdownMenuVm.textField) || props.textField,
     popperClass: (dropdownMenuVm == null ? void 0 : dropdownMenuVm.popperClass) || "",
+    sizeClass: (dropdownVm == null ? void 0 : dropdownVm.size) ? `tiny-dropdown-item--${dropdownVm == null ? void 0 : dropdownVm.size}` : "",
     getIcon: computed(() => api2.computedGetIcon()),
-    children: []
+    children: [],
+    computedTip: computed(() => api2.computedTip())
   });
   return state;
 };
@@ -83,13 +85,14 @@ const initApi = ({ api: api2, state, emit, props, parent, dispatch, vm, constant
     confirm: confirm({ emit, props, state }),
     handleClick: handleClick({ state, props, dispatch, vm, emit }),
     computedGetIcon: computedGetIcon({ constants, designConfig }),
-    getTip: getTip({ props, vm })
+    computedTip: computedTip({ props, vm })
   });
 };
 const renderless = (props, { computed, onMounted, reactive, watch, inject }, { parent, emit, vm, dispatch, constants, designConfig }) => {
   const api2 = {};
   const dropdownMenuVm = inject("dropdownMenuVm", null);
-  const state = initState({ reactive, computed, api: api2, props, parent, dropdownMenuVm });
+  const dropdownVm = inject("dropdownVm", null);
+  const state = initState({ reactive, computed, api: api2, props, parent, dropdownMenuVm, dropdownVm });
   initApi({ api: api2, state, emit, props, parent, dispatch, vm, constants, designConfig });
   watch(() => state.showPopup, api2.bindScroll);
   onMounted(() => {

package/espace/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common";
+import { xss } from "../common/xss";
 const getUserHref = ({ api, props }) => (item) => {
   const type = item.type ? String(item.type).toLocaleLowerCase() : "";
   const value = item.value ? String(item.value).toLocaleLowerCase() : "";

package/fall-menu/index.js

@@ -2,13 +2,16 @@ import "../chunk-G2ADBYYC.js";
 import { REFRESH_INTERVAL } from "../common";
 import { on, off } from "../common/deps/dom";
 import PopupManager from "../common/deps/popup-manager";
-import { xss } from "../common/xss.js";
+import { xss } from "../common/xss";
 const arrowClick = (state) => (opt) => {
   state.pager += opt;
 };
 const overContent = (state) => (on2) => {
   state.isActive = on2;
 };
+const clickActive = (state) => (index) => {
+  state.active = index;
+};
 const mouseover = ({ fall, props, state }) => (index) => {
   const popupBox = fall.value;
   state.activeNode = index;
@@ -85,6 +88,7 @@ const computeData = ({ props }) => () => {
 export {
   arrowClick,
   beforeDestroy,
+  clickActive,
   computeData,
   computeLeft,
   computePx,

package/fall-menu/vue.js

@@ -2,6 +2,7 @@ import "../chunk-G2ADBYYC.js";
 import {
   mouseover,
   mouseout,
+  clickActive,
   computePx,
   reRender,
   arrowClick,
@@ -11,7 +12,17 @@ import {
   computeLeft,
   computeData
 } from "./index";
-const api = ["state", "fall", "arrowClick", "mouseover", "mouseout", "overContent", "reRender", "left"];
+const api = [
+  "state",
+  "fall",
+  "arrowClick",
+  "mouseover",
+  "mouseout",
+  "clickActive",
+  "overContent",
+  "reRender",
+  "left"
+];
 const initState = ({
   reactive,
   computed,
@@ -25,7 +36,8 @@ const initState = ({
     isActive: props.value,
     pagerData: { data: [], offset: [], index: [] },
     left: computed(() => api2.computeLeft()),
-    data: computed(() => api2.computeData())
+    data: computed(() => api2.computeData()),
+    active: 0
   });
   return state;
 };
@@ -48,6 +60,7 @@ const initApi = ({
     overContent: overContent(state),
     mouseout: mouseout(state),
     mouseover: mouseover({ props, fall, state }),
+    clickActive: clickActive(state),
     reRender: reRender({ api: api2, state })
   });
 };

package/filter-box/vue.js

@@ -1,8 +1,11 @@
 import "../chunk-G2ADBYYC.js";
 import { handleClear, handeClick } from "./index";
 const api = ["state", "handleClear", "focus", "blur", "handeClick"];
-const renderless = (props, { reactive }, { dispatch, emit }) => {
-  const state = reactive({});
+const renderless = (props, { reactive }, { dispatch, emit, designConfig }) => {
+  var _a;
+  const state = reactive({
+    expandButtonIcon: ((_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.expandButton) || "IconDownWard"
+  });
   const api2 = {};
   Object.assign(api2, {
     state,

package/floatbar/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { xss } from "../common/xss.js";
+import { xss } from "../common/xss";
 const computeData = ({ props }) => {
   if (Array.isArray(props.data) && props.data.length) {
     props.data.forEach((item) => {

package/form/index.js

@@ -22,11 +22,11 @@ const computedAutoLabelWidth = ({ state }) => () => {
 };
 const computedHideRequiredAsterisk = ({ props, designConfig }) => () => {
   var _a, _b;
-  return (_b = (_a = props.hideRequiredAsterisk) != null ? _a : designConfig == null ? void 0 : designConfig.hideRequiredAsterisk) != null ? _b : false;
+  return (_b = (_a = props.hideRequiredAsterisk) != null ? _a : designConfig == null ? void 0 : designConfig.hideRequiredAsterisk) != null ? _b : true;
 };
 const computedValidateIcon = ({ props, designConfig }) => () => {
   var _a, _b, _c;
-  return (_c = (_b = props.validateIcon) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.validateIcon) != null ? _c : null;
+  return (_c = (_b = props.validateIcon) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.validateIcon) != null ? _c : "icon-error";
 };
 const computedIsErrorInline = ({ props, designConfig }) => () => {
   if (props.messageType) {
@@ -35,13 +35,16 @@ const computedIsErrorInline = ({ props, designConfig }) => () => {
   if (typeof props.inlineMessage === "boolean") {
     return props.inlineMessage;
   }
-  return (designConfig == null ? void 0 : designConfig.messageType) === "inline" || false;
+  return (designConfig == null ? void 0 : designConfig.messageType) === "inline";
 };
 const computedIsErrorBlock = ({ props, designConfig }) => () => {
   if (props.messageType) {
     return props.messageType === "block";
   }
-  return (designConfig == null ? void 0 : designConfig.messageType) === "block" || false;
+  if (designConfig && Object.hasOwnProperty.call(designConfig, "messageType")) {
+    return designConfig.messageType === "block";
+  }
+  return true;
 };
 const created = ({ parent, state }) => () => {
   parent.$on("form:addField", (field) => {

package/form/vue.js

@@ -63,7 +63,7 @@ const renderless = (props, { computed, inject, provide, reactive, watch, onBefor
     }),
     labelWidth: computed(() => {
       var _a;
-      return props.labelWidth || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.labelWidth) || "80px";
+      return props.labelWidth || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.labelWidth) || "84px";
     }),
     tooltipType: computed(() => {
       var _a;

package/grid/plugins/export.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../../chunk-G2ADBYYC.js";
-import { xss } from "../../common/xss.js";
+import { xss } from "../../common/xss";
 import browser from "../../common/browser";
 import { toTreeArray } from "../static";
 import { getCellValue, getFuncText } from "../utils";

package/grid/utils/dom.js

@@ -74,7 +74,9 @@ function computeScrollLeft($table, td) {
 }
 function setBodyLeft(body, td, $table, column, move) {
   const { isLeftArrow, isRightArrow, from } = move || {};
-  body.scrollLeft = computeScrollLeft($table, td);
+  const bodyScollLeft = computeScrollLeft($table, td);
+  $table.scrollTo(bodyScollLeft);
+  $table.lastScrollLeft = bodyScollLeft;
   if (from) {
     const direction = isLeftArrow ? "left" : isRightArrow ? "right" : null;
     const fixedDom = $table.elemStore[`${direction}-body-list`];

package/guide/index.js

@@ -51,6 +51,9 @@ const mounted = ({ state, api }) => () => {
     api.createShepherd();
   }
 };
+const beforeUnmount = (state) => () => {
+  state.tour.hide();
+};
 const getItemCopy = (props, tour, result) => {
   const { domData } = props;
   result = domData.map((item) => {
@@ -65,9 +68,9 @@ const getItemCopy = (props, tour, result) => {
   return result;
 };
 const newTour = (state, Shepherd, offset, designConfig) => {
-  var _a;
+  var _a, _b;
   const tour = new Shepherd.Tour({
-    useModalOverlay: !((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.isUseModalOverlay),
+    useModalOverlay: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.isUseModalOverlay) != null ? _b : false,
     defaultStepOptions: {
       modalOverlayOpeningPadding: state.modalOverlayOpeningPadding,
       modalOverlayOpeningRadius: state.modalOverlayOpeningRadius,
@@ -117,6 +120,17 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
         const currentStep = Shepherd.activeTour && Shepherd.activeTour.getCurrentStep();
         const currentStepElement = currentStep && currentStep.getElement();
         const footer = currentStepElement && currentStepElement.querySelector(".shepherd-footer");
+        const cancelIcon = currentStepElement && currentStepElement.querySelector(".shepherd-header .shepherd-cancel-icon span");
+        const cloesIcon = `<svg  viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <desc fill="none">
+            Created with Pixso.
+        </desc>
+        <defs fill="none" />
+        <g>
+          <path id="path" d="M12.49 3.3C12.66 3.47 12.66 3.74 12.54 3.92L8.58 7.89L12.49 11.77C12.7 11.96 12.72 12.25 12.54 12.48C12.37 12.67 12.05 12.72 11.83 12.54L7.88 8.58L4 12.49C3.82 12.66 3.5 12.67 3.32 12.5C3.13 12.33 3.08 12.05 3.24 11.83L7.17 7.89L3.29 4C3.12 3.79 3.13 3.48 3.33 3.29C3.5 3.15 3.75 3.13 3.91 3.24L7.88 7.17L11.78 3.3C11.96 3.08 12.29 3.08 12.49 3.3Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+        </g>
+      </svg>`;
+        cancelIcon.innerHTML = cloesIcon;
         const progress = document.createElement("span");
         progress.classList.add("progress-style");
         progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour && Shepherd.activeTour.steps.length}`;
@@ -164,6 +178,7 @@ const callBack = (step, item, tour) => {
   });
 };
 export {
+  beforeUnmount,
   createShepherd,
   mounted
 };

package/guide/vue.js

@@ -2,9 +2,9 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { createShepherd, mounted } from "./index";
+import { createShepherd, mounted, beforeUnmount } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, onMounted, watch }, { designConfig }, { Shepherd, offset }) => {
+const renderless = (props, { reactive, onMounted, onBeforeUnmount, watch }, { designConfig }, { Shepherd, offset }) => {
   const state = reactive({
     tour: null,
     tour1: null,
@@ -24,10 +24,12 @@ const renderless = (props, { reactive, onMounted, watch }, { designConfig }, { S
     createShepherd: createShepherd({ state, props, Shepherd, offset, designConfig })
   };
   const api2 = __spreadProps(__spreadValues({}, baseApi), {
-    mounted: mounted({ state, api: baseApi })
+    mounted: mounted({ state, api: baseApi }),
+    beforeUnmount: beforeUnmount(state)
   });
   watch(() => props.showStep, api2.createShepherd);
   onMounted(api2.mounted);
+  onBeforeUnmount(api2.beforeUnmount);
   return api2;
 };
 export {

package/image-viewer/vue.js

@@ -80,7 +80,7 @@ const initState = ({ reactive, computed, api: api2, mode, props, constants, inje
     infinite: true,
     loading: false,
     transform: { scale: 1, deg: 0, offsetX: 0, offsetY: 0, objfit: "contain", enableTransition: false },
-    urlList: props.urlList || inject("urlList", null),
+    urlList: props.urlList || Array.isArray(inject("urlList")) && inject("urlList").length !== 0 ? inject("urlList") : null,
     mode: constants.MODE.CONTAIN,
     previewVisible: props.previewVisible,
     fullScreen: props.imageFullCurrent,

package/input/index.js

@@ -202,10 +202,8 @@ const handleCompositionEnd = ({ api, state }) => (event) => {
     api.handleInput(event);
   }
 };
-const calcIconOffset = ({ CLASS_PREFIX, parent }) => (place) => {
-  const elList = [].slice.call(
-    parent.$el.querySelectorAll(`.${CLASS_PREFIX.Input}${place}`) || []
-  );
+const calcIconOffset = ({ vm, parent }) => (place) => {
+  const elList = vm.$refs[place] ? [vm.$refs[place]] : [];
   if (!elList.length) {
     return;
   }
@@ -222,10 +220,10 @@ const calcIconOffset = ({ CLASS_PREFIX, parent }) => (place) => {
   const pendantMap = { suffix: "append", prefix: "prepend" };
   const pendant = pendantMap[place];
   if (parent.$slots[pendant]) {
-    const dom = parent.$el.querySelector(`.${CLASS_PREFIX.InputGroup}${pendant}`);
+    const dom = vm.$refs[pendant];
     let transform;
     if (place === "suffix") {
-      transform = `translateX(-${dom.offsetWidth}px)`;
+      transform = `translateX(-${dom.offsetWidth}px) translateY(-50%)`;
     } else if (place === "prefix") {
       transform = `translate(${dom.offsetWidth}px, -50%)`;
     }
@@ -284,7 +282,8 @@ const handleEnterDisplayOnlyContent = ({ state, props }) => ($event, type) => {
       const font = window.getComputedStyle(target).font;
       const rect = target.getBoundingClientRect();
       const iconWidth = 16 + 15;
-      isOverTextWhenMask = omitText(text, font, rect.width - iconWidth).o;
+      const calcText = (text == null ? void 0 : text.trim()) || "";
+      isOverTextWhenMask = omitText(calcText, font, rect.width - iconWidth).o;
     }
     if (isOverTextWhenMask) {
       state.displayOnlyTooltip = props.displayOnlyContent || state.nativeInputValue;