@opentiny/vue-renderless 3.11.8 → 3.12.1

package/qr-code/vue.js

@@ -0,0 +1,31 @@
+import "../chunk-G2ADBYYC.js";
+import { change, draw } from ".";
+const api = ["state"];
+const renderless = (props, { reactive, watch, onMounted }, { vm, emit }, { QRCode }) => {
+  const api2 = {};
+  const state = reactive({
+    sizeStr: "",
+    iconSizeStr: "",
+    iconBackgroudColor: ""
+  });
+  Object.assign(api2, {
+    state,
+    draw: draw({ props, state, vm, QRCode }),
+    change: change(emit)
+  });
+  onMounted(() => {
+    api2.draw();
+  });
+  watch(
+    () => [props.level, props.value],
+    () => {
+      api2.draw();
+      api2.change();
+    }
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/radio/index.js

@@ -43,7 +43,7 @@ const setModel = ({
   dispatch,
   emit,
   props,
-  refs,
+  vm,
   state
 }) => (val) => {
   if (state.isGroup) {
@@ -51,13 +51,15 @@ const setModel = ({
   } else {
     emit("update:modelValue", val);
   }
-  refs.radio && (refs.radio.checked = state.model === props.label);
+  vm.$refs.radio && (vm.$refs.radio.checked = state.model === props.label);
 };
-const toggleEvent = ({ props, refs, type }) => {
-  const radioEl = refs.radio;
-  Object.keys(props.events).forEach((ev) => {
-    radioEl[type + "EventListener"](ev, props.events[ev]);
-  });
+const toggleEvent = ({ props, vm, type }) => {
+  const radioEl = vm.$refs.radio;
+  if (radioEl) {
+    Object.keys(props.events).forEach((ev) => {
+      radioEl[type + "EventListener"](ev, props.events[ev]);
+    });
+  }
 };
 const dispatchDisplayedValue = ({ state, dispatch, api }) => () => {
   if (state.isDisplayOnly) {

package/radio/vue.js

@@ -13,7 +13,7 @@ import {
   getDisplayedValue
 } from "./index";
 const api = ["state", "handleChange"];
-const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inject, watch }, { refs, vm, parent, emit, constants, nextTick, dispatch }) => {
+const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inject, watch }, { vm, parent, emit, constants, nextTick, dispatch }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const api2 = {};
   const state = reactive({
@@ -40,7 +40,7 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
     tabIndex: tabIndex({ props, state }),
     isDisabled: isDisabled({ props, state }),
     isDisplayOnly: isDisplayOnly({ props }),
-    setModel: setModel({ constants, dispatch, emit, props, refs, state }),
+    setModel: setModel({ constants, dispatch, emit, props, vm, state }),
     handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
     dispatchDisplayedValue: dispatchDisplayedValue({ state, api: api2, dispatch }),
     getDisplayedValue: getDisplayedValue({ vm, state, props })
@@ -49,10 +49,10 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
   onMounted(() => {
     api2.dispatchDisplayedValue();
     dispatch("Tooltip", "tooltip-update");
-    toggleEvent({ props, refs, type: "add" });
+    toggleEvent({ props, vm, type: "add" });
   });
   onBeforeUnmount(() => {
-    toggleEvent({ props, refs, type: "remove" });
+    toggleEvent({ props, vm, type: "remove" });
   });
   return api2;
 };

package/radio-button/index.js

@@ -37,8 +37,8 @@ const getStyle = (state) => () => {
     color: ((_d = state.radioGroup) == null ? void 0 : _d.textColor) || ""
   };
 };
-const toggleEvents = ({ refs, props }) => (isUnBind = false) => {
-  const radioEl = refs.radio;
+const toggleEvents = ({ vm, props }) => (isUnBind = false) => {
+  const radioEl = vm.$refs.radio;
   Object.keys(props.events).forEach((ev) => {
     radioEl[(isUnBind ? "remove" : "add") + "EventListener"](ev, props.events[ev]);
   });

package/radio-button/vue.js

@@ -11,10 +11,10 @@ import {
   handleBlur
 } from "./index";
 const api = ["state", "handleChange", "keydownHandle", "handleFocus", "handleBlur"];
-const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, inject }, { emit, parent, dispatch, constants, nextTick, refs }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, inject }, { parent, dispatch, constants, nextTick, vm }) => {
   const api2 = {
     getGroup: getGroup({ constants, parent }),
-    toggleEvents: toggleEvents({ refs, props })
+    toggleEvents: toggleEvents({ vm, props })
   };
   const state = reactive({
     focus: false,

package/radio-group/vue.js

@@ -25,6 +25,7 @@ const renderless = (props, { computed, onMounted, reactive, watch, provide }, {
   onMounted(api2.onMounted);
   provide("radioVertical", props.vertical);
   provide("showTips", props.showTips);
+  provide("size", props.size);
   return api2;
 };
 export {

package/rich-text-edtior/index.js

@@ -53,42 +53,22 @@ const setLink = (editor) => {
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   };
 };
-const handleMove = (state, box) => {
-  return (e) => {
-    let { x, y } = box.value[0].getBoundingClientRect();
-    state.flagX = Math.ceil((e.x - x) / 30);
-    state.flagY = Math.ceil((e.y - y) / 30);
-  };
+const tableMouseMove = (state, vm) => (e) => {
+  let { x, y } = vm.$refs.tablePanelRef[0].getBoundingClientRect();
+  state.flagX = Math.ceil((e.x - x) / 30);
+  state.flagY = Math.ceil((e.y - y) / 30);
 };
-const handleClickOutside = (state, box) => {
-  return (e) => {
-    var _a;
-    if (!((_a = box.value[0]) == null ? void 0 : _a.contains(e.target))) {
-      state.isShow = false;
-      removeClickOutside(state, box)();
-    }
-  };
+const tableChoose = (state, vm) => (e) => {
+  if (state.flagX && state.flagY) {
+    state.editor.chain().focus().insertTable({ rows: state.flagY, cols: state.flagX, withHeaderRow: true }).run();
+  }
+  state.isShowTable = false;
 };
-const removeClickOutside = (state, box) => {
-  return () => {
-    window.removeEventListener("click", handleClickOutside(state, box));
-  };
+const toggleTablePanel = (state) => () => {
+  state.isShowTable = !state.isShowTable;
 };
-const handleClick = (state, box) => {
-  return (e) => {
-    e.stopPropagation();
-    if (state.isShow) {
-      if (state.flagX && state.flagY) {
-        state.editor.chain().focus().insertTable({ rows: state.flagY, cols: state.flagX, withHeaderRow: true }).run();
-      }
-      state.flagX = 0;
-      state.flagY = 0;
-      removeClickOutside(state, box)();
-    } else {
-      window.addEventListener("click", handleClickOutside(state, box));
-    }
-    state.isShow = !state.isShow;
-  };
+const closeTablePanel = (state) => () => {
+  state.isShowTable && (state.isShowTable = false);
 };
 const shouldShow = ({ editor, view, state, oldState, from, to }) => {
   return editor.isActive("table");
@@ -242,13 +222,13 @@ const Active = (item) => {
 };
 export {
   Active,
+  closeTablePanel,
   eventClick,
   eventImg,
   handleChange,
-  handleClick,
-  handleClickOutside,
-  handleMove,
-  removeClickOutside,
   setLink,
-  shouldShow
+  shouldShow,
+  tableChoose,
+  tableMouseMove,
+  toggleTablePanel
 };

package/rich-text-edtior/vue.js

@@ -5,32 +5,29 @@ import {
 import {
   handleChange,
   setLink,
-  handleMove,
-  handleClickOutside,
-  removeClickOutside,
-  handleClick,
+  tableMouseMove,
+  tableChoose,
+  toggleTablePanel,
+  closeTablePanel,
   shouldShow,
   eventImg,
   eventClick,
   Active
 } from "./index";
 const api = [
-  "toolBar",
   "state",
   "setLink",
   "handleChange",
-  "box",
-  "handleMove",
-  "handleClickOutside",
-  "removeClickOutside",
-  "handleClick",
+  "tableMouseMove",
+  "tableChoose",
+  "toggleTablePanel",
+  "closeTablePanel",
   "shouldShow",
-  "fontSize",
   "eventImg",
   "eventClick",
   "Active"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref }, { vm, emit, parent }, {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref, markRaw }, { vm, emit, parent }, {
   Editor,
   StarterKit,
   Table,
@@ -53,15 +50,10 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
   CodeBlockLowlight,
   lowlight,
   VueNodeViewRenderer,
-  // CodehighComp,
-  // NodeViewContent,
-  // nodeViewProps,
-  // NodeViewWrapper,
   Placeholder,
   codeHighlight
 }) => {
-  var _a;
-  let toolBar = [
+  let defaultToolBar = [
     "bold",
     "italic",
     "underline",
@@ -74,31 +66,35 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
     "taskList",
     "subscript",
     "superscript",
-    // 'nodeDelete',
     "undo",
     "redo",
     "left",
     "center",
     "right",
+    "formatClear",
+    "link",
     "h-box",
+    //
     "font-size",
+    //
     "line-height",
+    //
     "highlight",
     "color",
+    //
     "backgroundColor",
-    "formatClear",
-    "link",
+    //
     "unlink",
+    //
     "img",
+    //
     "table"
+    //
   ];
-  if (props.customToolBar) {
-    toolBar = props.customToolBar;
-  }
   const CustomImage = Image.extend({
     addAttributes() {
-      var _a2;
-      return __spreadProps(__spreadValues({}, (_a2 = this.parent) == null ? void 0 : _a2.call(this)), {
+      var _a;
+      return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
         type: {
           default: "img"
         }
@@ -224,71 +220,64 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref
         }
       }).configure({ lowlight }),
       Placeholder.configure({
-        placeholder: (_a = props.placeholder) != null ? _a : "Write something \u2026"
+        placeholder: props.placeholder
       })
     ],
-    content: "",
+    content: props.modelValue,
     autofocus: true,
     editable: true,
     injectCSS: false,
     // 事件
-    onBeforeCreate({ editor: editor2 }) {
-      emit("beforeCreate", { editor: editor2 });
+    onBeforeCreate({ editor }) {
+      emit("beforeCreate", { editor });
     },
-    onCreate({ editor: editor2 }) {
-      emit("create", { editor: editor2 });
+    onCreate({ editor }) {
+      emit("create", { editor });
     },
-    onUpdate({ editor: editor2 }) {
-      const json = editor2.getJSON();
-      const html = editor2.getHTML();
-      const text = editor2.getText();
-      const lineText = editor2.getText({ blockSeparator: "--" });
-      emit("update", { editor: editor2 });
+    onUpdate({ editor }) {
+      const json = editor.getJSON();
+      const html = editor.getHTML();
+      const text = editor.getText();
+      const lineText = editor.getText({ blockSeparator: "--" });
+      emit("update", { editor });
       emit("update:modelValue", html);
     },
-    onFocus({ editor: editor2, event }) {
-      emit("focus", { editor: editor2, event });
+    onFocus({ editor, event }) {
+      emit("focus", { editor, event });
     },
-    onBlur({ editor: editor2, event }) {
-      emit("blur", { editor: editor2, event });
+    onBlur({ editor, event }) {
+      emit("blur", { editor, event });
     },
-    onSelectionUpdate({ editor: editor2 }) {
-      emit("selectionUpdate", { editor: editor2 });
+    onSelectionUpdate({ editor }) {
+      emit("selectionUpdate", { editor });
     },
-    onTransaction({ editor: editor2, transaction }) {
-      emit("transaction", { editor: editor2, transaction });
+    onTransaction({ editor, transaction }) {
+      emit("transaction", { editor, transaction });
     },
     onDestroy() {
       emit("destroy");
     }
   }, props.options);
-  let options = props.options ? Object.assign(defaultOptions, props.options) : defaultOptions;
-  const editor = new Editor(options);
-  const box = ref(null);
-  const fontSize = ref("16px");
+  let options = Object.assign(defaultOptions, props.options);
   const state = reactive({
-    editor: null,
+    editor: markRaw(new Editor(options)),
+    toolbar: computed(() => props.customToolBar.length ? props.customToolBar : defaultToolBar),
     // table 变量
-    isShow: false,
+    isShowTable: false,
     flagX: 0,
     flagY: 0
   });
-  state.editor = editor;
   const api2 = {
-    toolBar,
     state,
-    setLink: setLink(editor),
-    handleChange: handleChange(editor),
+    setLink: setLink(state.editor),
+    handleChange: handleChange(state.editor),
     // table处理函数
-    box,
-    handleMove: handleMove(state, box),
-    handleClickOutside: handleClickOutside(state, box),
-    removeClickOutside: removeClickOutside(state, box),
-    handleClick: handleClick(state, box),
+    tableMouseMove: tableMouseMove(state, vm),
+    toggleTablePanel: toggleTablePanel(state),
+    closeTablePanel: closeTablePanel(state),
+    tableChoose: tableChoose(state, vm),
     // bubble 菜单
     shouldShow,
-    //
-    fontSize,
     eventImg,
     eventClick,
     Active

package/select/index.js

@@ -204,10 +204,16 @@ const getOption = ({ props, state }) => (value) => {
     }
   }
   if (option) {
-    if (!option.currentLabel) {
-      option.currentLabel = option[props.textField];
+    if (props.optimization) {
+      const cloneOption = extend(true, {}, option);
+      cloneOption.currentLabel = cloneOption[props.textField];
+      return cloneOption;
+    } else {
+      if (!option.currentLabel) {
+        option.currentLabel = option[props.textField];
+      }
+      return option;
     }
-    return option;
   }
   let label = "";
   if (!isObject(value) && !isNull(value) && !props.clearNoMatchValue) {
@@ -367,8 +373,8 @@ const handleFocus = ({ emit, props, state, api }) => (event) => {
   } else {
     state.softFocus = false;
   }
-  if (props.remote && state.filterOrSearch && state.firstAutoSeach) {
-    state.firstAutoSeach = false;
+  if (props.remote && state.filterOrSearch && state.firstAutoSearch) {
+    state.firstAutoSearch = false;
     api.resetFilter();
   }
 };
@@ -1139,8 +1145,6 @@ const buildRadioConfig = ({ props, state }) => () => {
   return __spreadValues(__spreadValues({}, radioConfig), { checkRowKey, highlight });
 };
 const onMouseenterNative = ({ state }) => (e) => {
-  if (e.target === e.currentTarget)
-    return;
   state.inputHovering = true;
   if (state.searchSingleCopy && state.selectedLabel) {
     state.softFocus = true;

package/slide-bar/index.js

@@ -1,19 +1,19 @@
 import "../chunk-G2ADBYYC.js";
 import { emitEvent } from "../common/event";
-const leftClick = ({ api, props, refs, state }) => () => {
+const leftClick = ({ api, props, vm, state }) => () => {
   if (state.leftLength >= 0) {
     return;
   }
   state.leftLength = state.leftLength + (state.blockWidth + state.blockMargin) * props.wheelBlocks;
-  refs.insider.style.left = state.leftLength + "px";
+  vm.$refs.insider.style.left = state.leftLength + "px";
   api.changeState();
 };
-const rightClick = ({ api, props, refs, state }) => () => {
+const rightClick = ({ api, props, vm, state }) => () => {
   if (state.blockWrapper < Math.abs(state.leftLength) + state.wrapperWidth) {
     return;
   }
   state.leftLength = state.leftLength - (state.blockWidth + state.blockMargin) * props.wheelBlocks;
-  refs.insider.style.left = state.leftLength + "px";
+  vm.$refs.insider.style.left = state.leftLength + "px";
   api.changeState();
 };
 const blockClick = ({ emit, state }) => ({ item, index }) => {
@@ -39,8 +39,8 @@ const mouseEvent = ({ api, state }) => (e) => {
     }
   }
 };
-const changeSize = ({ props, state, refs }) => () => {
-  state.wrapperWidth = refs.wrapper.offsetWidth;
+const changeSize = ({ props, state, vm }) => () => {
+  state.wrapperWidth = vm.$refs.wrapper.offsetWidth;
   state.blockWidth = parseInt((1 - (props.initBlocks - 1) * 0.02) / props.initBlocks * state.wrapperWidth, 10);
   state.blockMargin = parseInt(state.wrapperWidth * 0.02, 10);
   state.blockWrapper = props.modelValue.length * state.blockWidth + (props.modelValue.length - 1) * state.blockMargin;

package/slide-bar/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { leftClick, rightClick, blockClick, changeState, changeSize, mouseEvent } from "./index";
 const api = ["state", "mouseEvent", "rightClick", "leftClick", "blockClick"];
-const renderless = (props, { onMounted, reactive }, { refs, parent, emit }) => {
+const renderless = (props, { onMounted, reactive }, { vm, parent, emit }) => {
   const api2 = {};
   const state = reactive({
     leftLength: 0,
@@ -18,10 +18,10 @@ const renderless = (props, { onMounted, reactive }, { refs, parent, emit }) => {
     state,
     blockClick: blockClick({ emit, state }),
     changeState: changeState({ props, state }),
-    changeSize: changeSize({ props, refs, state }),
-    leftClick: leftClick({ api: api2, props, refs, state }),
-    mouseEvent: mouseEvent({ api: api2, props, refs, state }),
-    rightClick: rightClick({ api: api2, parent, props, refs, state })
+    changeSize: changeSize({ props, vm, state }),
+    leftClick: leftClick({ api: api2, props, vm, state }),
+    mouseEvent: mouseEvent({ api: api2, props, vm, state }),
+    rightClick: rightClick({ api: api2, parent, props, vm, state })
   });
   onMounted(api2.changeSize);
   return api2;

package/slider/index.js

@@ -8,8 +8,8 @@ const bindEvent = (api) => () => {
   api.bindResize();
 };
 const unBindEvent = (api) => () => off(window, "resize", api.bindResize);
-const bindResize = ({ parent, props, state }) => () => {
-  const handleEl = parent.$el.querySelector("div.tiny-slider");
+const bindResize = ({ vm, props, state }) => () => {
+  const handleEl = vm.$refs.slider;
   state.sliderSize = handleEl["client" + (props.vertical ? "Height" : "Width")];
   state.sliderOffset = handleEl.getBoundingClientRect();
 };
@@ -63,8 +63,17 @@ const bindMouseDown = ({
     return;
   }
   const handleEl = event.target;
-  const isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode));
-  const isClickBtn = hasClass(handleEl, constants.buttonCls(mode)) || hasClass(handleEl, constants.leftSvgCls(mode)) || hasClass(handleEl, constants.rightSvgCls(mode));
+  let isClickBar = false;
+  let isClickBtn = false;
+  if (mode === "mobile-first") {
+    const role = Array.from(handleEl.attributes).find((attr) => attr.name === "role");
+    const name = role && role.value;
+    isClickBar = name === constants.PC_SLIDER_CLS || name === constants.PC_RANGE_CLS;
+    isClickBtn = name === constants.PC_BUTTON_CLS;
+  } else {
+    isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode));
+    isClickBtn = hasClass(handleEl, constants.buttonCls(mode)) || hasClass(handleEl, constants.leftSvgCls(mode)) || hasClass(handleEl, constants.rightSvgCls(mode));
+  }
   if (state.disabled || !isClickBtn && !isClickBar) {
     state.activeIndex = -1;
     return;
@@ -126,7 +135,7 @@ const hideTip = (state) => () => !state.isDrag && (state.showTip = false);
 const setTipStyle = ({
   constants,
   mode,
-  parent,
+  vm,
   props,
   state
 }) => () => {
@@ -134,19 +143,25 @@ const setTipStyle = ({
     return;
   }
   const tipStyle = { top: 0, left: 0 };
-  const tipEl = parent.$el.querySelector("." + constants.tipCls(mode));
+  const tipEl = vm.$refs.sliderTip;
   const moveSize = (state.activeValue - props.min) / state.rangeDiff * state.sliderSize;
   if (props.vertical) {
     tipStyle.top = state.sliderSize - moveSize - constants.BUTTON_SIZE - constants.TIP_HEIGHT / 2 + constants.HALF_BAR_HEIGHT;
-    tipStyle.left = -tipEl.clientWidth / 2 + constants.HALF_BAR_HEIGHT;
+    tipStyle.left = -tipEl.getBoundingClientRect().width / 2 + constants.HALF_BAR_HEIGHT;
   } else {
     tipStyle.top = -constants.TIP_HEIGHT - constants.BUTTON_SIZE / 2 + constants.HALF_BAR_HEIGHT;
-    tipStyle.left = moveSize - constants.HALF_BAR_HEIGHT - tipEl.clientWidth / 2;
+    tipStyle.left = moveSize - tipEl.getBoundingClientRect().width / 2;
+  }
+  if (mode === "mobile-first") {
+    state.tipStyle = {
+      left: tipStyle.left + "px"
+    };
+  } else {
+    state.tipStyle = {
+      top: tipStyle.top + "px",
+      left: tipStyle.left + "px"
+    };
   }
-  state.tipStyle = {
-    top: tipStyle.top + "px",
-    left: tipStyle.left + "px"
-  };
 };
 const getActiveButtonIndexFlag = ({
   state,
@@ -156,7 +171,13 @@ const getActiveButtonIndexFlag = ({
 }) => {
   const cls = constants.buttonCls(mode);
   const { previousElementSibling } = event.target;
-  return state.isDouble && (hasClass(previousElementSibling, cls) || event.target.className.baseVal === "tiny-slider-right-svg");
+  if (mode === "mobile-first") {
+    const role = Array.from(previousElementSibling.attributes).find((attr) => attr.name === "role");
+    const name = role && role.value;
+    return state.isDouble && name === constants.PC_BUTTON_CLS;
+  } else {
+    return state.isDouble && (hasClass(previousElementSibling, cls) || event.target.className.baseVal === "tiny-slider-right-svg");
+  }
 };
 const getActiveButtonIndex = ({ constants, mode, state }) => (event) => {
   const flag = getActiveButtonIndexFlag({ state, event, constants, mode });
@@ -200,6 +221,7 @@ const calcCurrentValue = ({
 };
 const setActiveButtonValue = ({ api, emit, props, state }) => (value) => {
   if (Array.isArray(value)) {
+    ;
     [state.leftBtnValue, state.rightBtnValue] = value;
   } else {
     let currentValue = calcCurrentValue({ currentValue: value, props, state });
@@ -244,6 +266,8 @@ const setBarStyle = ({ props, state }) => () => {
   }
 };
 const initSlider = ({ api, props, state }) => (value) => {
+  if (state.isDrag)
+    return;
   state.isDouble = Array.isArray(value);
   const sliders = state.isDouble ? value : [value];
   sliders.length > 2 && (sliders.length = 2);
@@ -262,8 +286,13 @@ const initSlider = ({ api, props, state }) => (value) => {
   state.isInit = false;
   api.setBarStyle();
 };
-const calculateValue = ({ props, state }) => (event) => {
+const calculateValue = ({ props, state, vm }) => (event) => {
   let currentValue = 0;
+  if (state.sliderSize == 0) {
+    const handleEl = vm.$refs.slider;
+    state.sliderSize = handleEl["client" + (props.vertical ? "Height" : "Width")];
+    state.sliderOffset = handleEl.getBoundingClientRect();
+  }
   const offset = state.sliderOffset;
   if (event.type === "touchmove" || event.type === "touchstart" || event.type === "touchend") {
     if (props.vertical) {
@@ -300,6 +329,9 @@ const customBeforeAppearHook = (props) => (el) => {
     el.style.width = "0%";
   }
 };
+const customAppearHook = () => (el) => {
+  el.style.transition = "all 0.5s";
+};
 const customAfterAppearHook = ({ state, props }) => (el) => {
   const minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent);
   const maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent);
@@ -396,6 +428,7 @@ export {
   calculateValue,
   changeActiveValue,
   customAfterAppearHook,
+  customAppearHook,
   customBeforeAppearHook,
   displayTip,
   formatTipValue,