@opentiny/vue-renderless 3.12.1 → 3.13.1

package/alert/index.js

@@ -1,4 +1,33 @@
 import "../chunk-G2ADBYYC.js";
+const ALERT_TIMEOUT = 2e3;
+const watchAutoHide = ({ api, props }) => (newVal) => {
+  if (props.autoHide && newVal) {
+    const timer = setTimeout(() => {
+      api.handleClose();
+      clearTimeout(timer);
+    }, ALERT_TIMEOUT);
+  }
+};
+const computedClass = ({ props, mode }) => () => {
+  const { type, size, center } = props;
+  if (mode === "mobile") {
+    const alertClass = ["tiny-mobile-alert", "tiny-mobile-alert--" + type, "tiny-mobile-alert--" + size];
+    if (center) {
+      alertClass.push("is-center");
+    }
+    return alertClass;
+  }
+  return [];
+};
+const computedStyle = ({ props, mode }) => () => {
+  if (mode === "mobile") {
+    const style = {
+      top: isNaN(props.offset) ? props.offset : `${props.offset}px`
+    };
+    return style;
+  }
+  return null;
+};
 const handleClose = ({ emit, state }) => () => {
   state.show = false;
   emit("close");
@@ -26,9 +55,29 @@ const handleHeaderClick = ({ state, props, vm }) => () => {
     }
   }
 };
+const getEl = (node) => {
+  return node.$el || node;
+};
+const handlerTargetNode = ({ props, parent, vm, nextTick }) => () => {
+  const { target } = props;
+  const { $parent } = parent;
+  nextTick(() => {
+    const alertParentNode = $parent == null ? void 0 : $parent.$refs[target];
+    if (!target || !alertParentNode) {
+      return;
+    }
+    const targetNode = Array.isArray(alertParentNode) ? alertParentNode[0] : alertParentNode;
+    getEl(targetNode).insertBefore(vm.$el, getEl(targetNode).firstChild);
+  });
+};
 export {
+  ALERT_TIMEOUT,
+  computedClass,
   computedGetIcon,
   computedGetTitle,
+  computedStyle,
   handleClose,
-  handleHeaderClick
+  handleHeaderClick,
+  handlerTargetNode,
+  watchAutoHide
 };

package/alert/vue.js

@@ -1,24 +1,51 @@
 import "../chunk-G2ADBYYC.js";
-import { handleClose, computedGetIcon, computedGetTitle, handleHeaderClick } from "./index";
+import {
+  computedGetIcon,
+  computedGetTitle,
+  computedStyle,
+  computedClass,
+  handleClose,
+  handleHeaderClick,
+  watchAutoHide,
+  handlerTargetNode
+} from "./index";
 const api = ["handleClose", "state", "handleHeaderClick"];
-const renderless = (props, { computed, reactive }, { t, emit, constants, vm, designConfig }) => {
-  const state = reactive({
+const initState = ({ api: api2, computed, constants, reactive }) => {
+  return reactive({
     show: true,
-    getIcon: computed(() => api2.computedGetIcon()),
-    getTitle: computed(() => api2.computedGetTitle()),
     contentVisible: false,
     contentDescribeHeight: 0,
     contentDefaultHeight: 0,
     contentMaxHeight: constants.CONTENT_MAXHEUGHT,
-    scrollStatus: false
+    scrollStatus: false,
+    getIcon: computed(() => api2.computedGetIcon()),
+    getTitle: computed(() => api2.computedGetTitle()),
+    alertClass: computed(() => api2.computedClass()),
+    alertStyle: computed(() => api2.computedStyle())
   });
-  const api2 = {
+};
+const initApi = ({ api: api2, state, constants, props, designConfig, t, emit, vm, parent, nextTick, mode }) => {
+  Object.assign(api2, {
     state,
     computedGetIcon: computedGetIcon({ constants, props, designConfig }),
     computedGetTitle: computedGetTitle({ constants, props, t }),
+    computedClass: computedClass({ props, mode }),
+    computedStyle: computedStyle({ props, mode }),
     handleClose: handleClose({ emit, state }),
-    handleHeaderClick: handleHeaderClick({ state, props, vm })
-  };
+    handleHeaderClick: handleHeaderClick({ state, props, vm }),
+    watchAutoHide: watchAutoHide({ api: api2, props }),
+    handlerTargetNode: handlerTargetNode({ props, parent, vm, nextTick })
+  });
+};
+const initWatcher = ({ watch, props, api: api2 }) => {
+  watch(() => props.autoHide, api2.watchAutoHide, { immediate: true });
+  watch(() => props.target, api2.handlerTargetNode, { immediate: true });
+};
+const renderless = (props, { computed, reactive, watch }, { t, emit, constants, vm, designConfig, parent, nextTick, mode }) => {
+  const api2 = {};
+  const state = initState({ api: api2, computed, constants, reactive });
+  initApi({ api: api2, state, constants, props, designConfig, t, emit, vm, parent, nextTick, mode });
+  initWatcher({ watch, props, api: api2 });
   return api2;
 };
 export {

package/calendar-bar/index.js

@@ -53,7 +53,7 @@ const getBuildDay = (args) => (year, month, date) => {
 };
 const getPadCalendarDays = ({ calendarDays, buildDay }) => (flag, count, cur) => {
   const sign = flag === "s" ? -1 : 1;
-  Array.from({ length: count }).map((v, i) => {
+  Array.from({ length: count }).forEach((v, i) => {
     const d = new Date(cur.getTime() + (i + 1) * sign * 864e5);
     const year = d.getFullYear();
     const month = d.getMonth() + 1;
@@ -62,7 +62,7 @@ const getPadCalendarDays = ({ calendarDays, buildDay }) => (flag, count, cur) =>
   });
 };
 const equalArr = (arr1, arr2) => Array.isArray(arr1) && Array.isArray(arr2) && arr1.join(",") === arr2.join(",");
-const setDayRow = ({ calendarDays, state }) => calendarDays.map((day, i) => {
+const setDayRow = ({ calendarDays, state }) => calendarDays.forEach((day, i) => {
   day.row = Math.floor(i / state.dayOfWeek);
   if (day.isCur) {
     state.activeRow = day.row;

package/calendar-view/index.js

@@ -1,15 +1,9 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { cloneDeep } from "@opentiny/vue-renderless/chart-core/deps/utils";
-import { getDirection } from "@opentiny/vue-renderless/common/deps/touch";
-import {
-  getDays,
-  lastMonth,
-  nextMonth,
-  getCalendar,
-  transformArray
-} from "@opentiny/vue-renderless/common/calendar/calendar";
+import { cloneDeep } from "../chart-core/deps/utils";
+import { getDirection } from "../common/deps/touch";
+import { getDays, lastMonth, nextMonth, getCalendar, transformArray } from "../common/calendar/calendar";
 const getTime = (date) => new Date(date).getTime();
 const newSchedule = ({ emit }) => (date) => emit("new-schedule", date);
 const isShowNewSchedule = ({ props }) => (date) => props.showNewSchedule instanceof Function ? props.showNewSchedule(date) : false;
@@ -230,7 +224,7 @@ const getEventByMonth = ({ state }) => (year, month) => {
       day: state.weekDays[new Date(date).getDay()],
       events: []
     };
-    state.events.filter((item) => {
+    state.events.forEach((item) => {
       if (eventInThisTime(item, startTime, endTime)) {
         obj.events.push(item);
         state.monthEventsLength += 1;
@@ -276,7 +270,7 @@ const getEventByDate = ({ state }) => (date, events) => {
   const endTime = getTime(date + " " + state.dayEndTime);
   state.curWeekEvents[date] = [];
   events ? events = [] : state.curWeekEvents[date] = [];
-  state.events.filter((item) => {
+  state.events.forEach((item) => {
     if (eventInThisTime(item, startTime, endTime)) {
       events ? events.push(item) : state.curWeekEvents[date].push(item);
     }

package/calendar-view/vue.js

@@ -40,7 +40,7 @@ import {
   touchmove,
   touchend
 } from "./index";
-import throttle from "@opentiny/vue-renderless/common/deps/throttle";
+import throttle from "../common/deps/throttle";
 const api = [
   "state",
   "renderProxy",

package/cascader/index.js

@@ -268,7 +268,7 @@ const calcCollapseTags = ({ state, refs, nextTick }) => () => {
       const collapseTagWidth = tagsLength && parseFloat(collapseTagContentWidth) + parseFloat(marginRight) + parseFloat(marginLeft);
       const tags = Array.from(content.querySelectorAll(".tiny-tag"));
       let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
-      tags.some((tag, index) => {
+      tags.forEach((tag, index) => {
         if (tag !== tagsLength) {
           const { width: tagContentWidth, marginRight: marginRight2, marginLeft: marginLeft2 } = tag && window.getComputedStyle(tag);
           total += parseFloat(tagContentWidth) + parseFloat(marginRight2) + parseFloat(marginLeft2);
@@ -399,7 +399,8 @@ const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) =>
   }
   const tags = $el.querySelector(CASCADER.TagClass);
   let suggestionPanelEl = null;
-  if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
+  if (suggestionPanel) {
+    suggestionPanelEl = suggestionPanel.$el;
     const suggestionList = suggestionPanelEl.querySelector(CASCADER.ListClass);
     suggestionList.style.minWidth = inputInner.offsetWidth + "px";
   }

package/cascader-mobile/index.js

@@ -78,7 +78,7 @@ const selectOption = ({ emit, state, props, api }) => (option) => {
       option.loading = false;
       state.loading = false;
       option.loaded = true;
-      nodes.map((data) => {
+      nodes.forEach((data) => {
         state.store.append(data, option.data);
         index = waitLoadList.indexOf(data[valueField]);
         if (index !== -1) {

package/cascader-mobile/vue.js

@@ -53,7 +53,7 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     options: computed(() => {
       let arr;
       let list = [state.rootData];
-      state.navList.map((option) => {
+      state.navList.forEach((option) => {
         arr = option.childNodes;
         arr && arr.length && list.push(arr);
       });

package/cascader-view/index.js

@@ -62,7 +62,7 @@ const nodeExpand = ({ emit, state, props, api }) => (option) => {
       state.loading = false;
       option.loading = false;
       option.loaded = true;
-      nodes.map((data) => {
+      nodes.forEach((data) => {
         index = -1;
         state.store.append(data, option.data);
         waitLoadCheckList.some((item, i) => {

package/checkbox/vue.js

@@ -25,6 +25,7 @@ const initState = ({ reactive, computed, parent, api: api2, inject, props }) =>
   const state = reactive({
     size: props.size || inject("size", null),
     vertical: inject("vertical", null),
+    iconPosition: props.iconPosition || inject("iconPosition", "center"),
     focus: false,
     selfModel: false,
     showLabel: false,

package/checkbox-group/vue.js

@@ -19,6 +19,7 @@ const renderless = (props, { computed, reactive, watch, provide }, { dispatch, c
   );
   provide("size", props.size);
   provide("vertical", props.vertical);
+  provide("iconPosition", props.iconPosition);
   return api2;
 };
 export {

package/col/vue.js

@@ -1,12 +1,13 @@
 import "../chunk-G2ADBYYC.js";
 import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row } from "./index";
 const api = ["state"];
-const renderless = (props, { computed, reactive }, { parent }) => {
+const renderless = (props, { computed, reactive, inject }, { parent }) => {
   const api2 = {};
   const state = reactive({
     row: computed(() => api2.row()),
     style: computed(() => api2.getStyle()),
-    className: computed(() => api2.getClassName())
+    className: computed(() => api2.getClassName()),
+    layout: inject("layout")
   });
   Object.assign(api2, {
     state,

package/common/date.js

@@ -16,6 +16,7 @@ const dateFormatRegs = {
   "M{1,2}": /M{1,2}/,
   "d{1,2}": /d{1,2}/,
   "h{1,2}": /h{1,2}/,
+  "H{1,2}": /H{1,2}/,
   "m{1,2}": /m{1,2}/,
   "s{1,2}": /s{1,2}/,
   "S{1,3}": /S{1,3}/,
@@ -272,6 +273,7 @@ const format = function(date, dateFormat = "yyyy/MM/dd hh:mm:ss") {
         "M{1,2}": date.getMonth() + 1,
         "d{1,2}": date.getDate(),
         "h{1,2}": date.getHours(),
+        "H{1,2}": date.getHours(),
         "m{1,2}": date.getMinutes(),
         "s{1,2}": date.getSeconds(),
         "S{1,3}": date.getMilliseconds(),

package/common/deps/popper.js

@@ -68,6 +68,22 @@ const isScrollElement = (el) => {
   const scrollTypes = ["scroll", "auto"];
   return scrollTypes.includes(getStyleComputedProperty(el, "overflow")) || scrollTypes.includes(getStyleComputedProperty(el, "overflow-x")) || scrollTypes.includes(getStyleComputedProperty(el, "overflow-y"));
 };
+const getAdjustOffset = (parent) => {
+  const placeholder = document.createElement("div");
+  setStyle(placeholder, {
+    opacity: 0,
+    position: "fixed",
+    width: 1,
+    height: 1,
+    top: 0,
+    left: 0,
+    "z-index": "-99"
+  });
+  parent.appendChild(placeholder);
+  const result = getBoundingClientRect(placeholder);
+  parent.removeChild(placeholder);
+  return result;
+};
 const getScrollParent = (el) => {
   let parent = el.parentNode;
   if (!parent) {
@@ -84,9 +100,14 @@ const getScrollParent = (el) => {
   }
   return getScrollParent(parent);
 };
-const getOffsetRectRelativeToCustomParent = (el, parent, fixed) => {
+const getOffsetRectRelativeToCustomParent = (el, parent, fixed, popper) => {
   let { top, left, width, height } = getBoundingClientRect(el);
   if (fixed) {
+    if (popper.parentElement) {
+      const { top: adjustTop, left: adjustLeft } = getAdjustOffset(popper.parentElement);
+      top -= adjustTop;
+      left -= adjustLeft;
+    }
     return {
       top,
       left,
@@ -161,6 +182,9 @@ const getOffsetRect = (el) => {
   elementRect.bottom = elementRect.top + elementRect.height;
   return elementRect;
 };
+const stopFn = (ev) => {
+  ev.stopPropagation();
+};
 class Popper {
   constructor(reference, popper, options) {
     this.modifiers = {};
@@ -192,6 +216,7 @@ class Popper {
   }
   update() {
     let data = { instance: this, styles: {} };
+    this.stopEventBubble();
     this.popperOuterSize = null;
     data.placement = data._originalPlacement = this._options.placement;
     data.offsets = this._getRefPopOffsets(this._popper, this._reference, data.placement);
@@ -199,6 +224,15 @@ class Popper {
     data = this.runModifiers(data, this._options.modifierFns);
     typeof this.state.updateCallback === "function" && this.state.updateCallback(data);
   }
+  // 阻止popper的mousewheel等事件冒泡。 通过 onxxx 绑定，是为了避免重复绑定事件
+  stopEventBubble() {
+    if (!this._popper)
+      return;
+    if (!this._popper.onmousewheel)
+      this._popper.onmousewheel = stopFn;
+    if (!this._popper.onwheel)
+      this._popper.onwheel = stopFn;
+  }
   /** 按顺序执行Modifiers， 如果传入终点modifier,则执行到指定位置 */
   runModifiers(data, modifiers2, ends) {
     let modifiersToRun = modifiers2.slice();
@@ -206,7 +240,7 @@ class Popper {
     if (ends !== void 0) {
       modifiersToRun = this._options.modifierFns.slice(
         0,
-        _options.modifierFns.findIndex((m) => m == ends)
+        _options.modifierFns.findIndex((m) => m === ends)
       );
     }
     modifiersToRun.forEach((modifier) => {
@@ -416,7 +450,12 @@ class Popper {
     placement = placement.split("-")[0];
     let popperOffsets = { position: this.state.position };
     let isParentFixed = popperOffsets.position === "fixed";
-    let referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);
+    let referenceOffsets = getOffsetRectRelativeToCustomParent(
+      reference,
+      getOffsetParent(popper),
+      isParentFixed,
+      popper
+    );
     const { width, height } = this.popperOuterSize ? this.popperOuterSize : this.popperOuterSize = getOuterSizes(popper);
     if (~["right", "left"].indexOf(placement)) {
       popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - height / 2;

package/common/index.js

@@ -224,7 +224,7 @@ const CASCADER = {
   PropsHover: "hoverThreshold",
   MenuConnector: "cascader-menu-"
 };
-const version = "3.12.0";
+const version = "3.13.0";
 const log = (data, type = "log") => {
   uLog.logger[type](data);
 };

package/common/runtime.js

@@ -22,7 +22,7 @@ import vuePopup from "./deps/vue-popup";
 import validate from "./validate";
 import memorize from "./deps/memorize";
 import * as common from ".";
-const version = "3.12.0";
+const version = "3.13.0";
 const Renderless = {
   browser,
   array,

package/container/index.js

@@ -73,12 +73,28 @@ const computedFooterStyle = ({ constants, props }) => () => {
     height: transferWidthOrHeight(props.footerHeight)
   };
 };
+const computedLeftStyle = ({ constants, props }) => () => {
+  return {
+    width: transferWidthOrHeight(props.leftWidth)
+  };
+};
+const computedShowRight = ({ constants, props }) => () => {
+  return props.pattern === constants.DEFAULT ? false : true;
+};
+const computedRightStyle = ({ constants, props }) => () => {
+  return {
+    width: transferWidthOrHeight(props.rightWidth)
+  };
+};
 export {
   computedAsideStyle,
   computedFooterStyle,
   computedHeaderStyle,
+  computedLeftStyle,
   computedMainStyle,
+  computedRightStyle,
   computedShowAside,
   computedShowFooter,
-  computedShowHeader
+  computedShowHeader,
+  computedShowRight
 };

package/container/vue.js

@@ -6,7 +6,10 @@ import {
   computedHeaderStyle,
   computedAsideStyle,
   computedMainStyle,
-  computedFooterStyle
+  computedFooterStyle,
+  computedLeftStyle,
+  computedShowRight,
+  computedRightStyle
 } from "./index";
 const api = ["state"];
 const renderless = (props, { computed, reactive }, { constants }) => {
@@ -18,7 +21,10 @@ const renderless = (props, { computed, reactive }, { constants }) => {
     mainStyle: computed(() => api2.computedMainStyle()),
     asideStyle: computed(() => api2.computedAsideStyle()),
     headerStyle: computed(() => api2.computedHeaderStyle()),
-    footerStyle: computed(() => api2.computedFooterStyle())
+    footerStyle: computed(() => api2.computedFooterStyle()),
+    showRight: computed(() => api2.computedShowRight()),
+    leftStyle: computed(() => api2.computedLeftStyle()),
+    rightStyle: computed(() => api2.computedRightStyle())
   });
   Object.assign(api2, {
     state,
@@ -28,7 +34,10 @@ const renderless = (props, { computed, reactive }, { constants }) => {
     computedMainStyle: computedMainStyle({ constants, props }),
     computedAsideStyle: computedAsideStyle({ constants, props }),
     computedHeaderStyle: computedHeaderStyle({ constants, props }),
-    computedFooterStyle: computedFooterStyle({ constants, props })
+    computedFooterStyle: computedFooterStyle({ constants, props }),
+    computedLeftStyle: computedLeftStyle({ constants, props }),
+    computedShowRight: computedShowRight({ constants, props }),
+    computedRightStyle: computedRightStyle({ constants, props })
   });
   return api2;
 };

package/dropdown-item/vue.js

@@ -84,7 +84,7 @@ const initApi = ({ api: api2, state, emit, props, parent, dispatch, vm, constant
 };
 const renderless = (props, { computed, reactive, watch, inject }, { parent, emit, vm, dispatch, mode, constants, designConfig }) => {
   const api2 = {};
-  const dropdownMenuVm = inject("dropdownMenuVm");
+  const dropdownMenuVm = inject("dropdownMenuVm", null);
   if (mode === "mobile" && dropdownMenuVm) {
     dropdownMenuVm.state.children = [...dropdownMenuVm.state.children, vm];
   }

package/grid/utils/common.js

@@ -15,7 +15,11 @@ const getRowid = ($table, row) => {
 const getColumnList = (columns) => {
   const result = [];
   columns.forEach((column) => {
-    result.push.apply(result, column.children && column.children.length ? getColumnList(column.children) : [column]);
+    if (column.children && column.children.length) {
+      result.push(...getColumnList(column.children));
+    } else {
+      result.push(column);
+    }
   });
   return result;
 };
@@ -79,9 +83,10 @@ const destroyColumn = ($table, { columnConfig }) => {
   }
   $table.collectColumn = $table.collectColumn.slice(0);
 };
-const emitEvent = (vnode, type, args) => {
-  if (vnode.tableListeners[type]) {
-    vnode.$emit.apply(vnode, [type].concat(args));
+const emitEvent = (vm, type, args) => {
+  if (vm.tableListeners[type]) {
+    const params = [].concat(args);
+    vm.$emit(type, ...params);
   }
 };
 const assemColumn = ($table, $column, instance) => {
@@ -112,7 +117,7 @@ const getListeners = ($attrs, $listeners) => {
   Object.keys($attrs).forEach((name) => {
     const event = $attrs[name];
     if (regEventPrefix.test(name) && typeof event === "function") {
-      listeners[name.substr(2).replace(regHyphenate, "-$1").toLowerCase()] = event;
+      listeners[name.slice(2).replace(regHyphenate, "-$1").toLowerCase()] = event;
     }
   });
   return listeners;

package/input/index.js

@@ -37,6 +37,11 @@ const showBox = (state) => () => {
   }
   state.boxVisibility = true;
 };
+const inputStyle = ({ props }) => () => {
+  return {
+    textAlign: props.textAlign
+  };
+};
 const calculateNodeStyling = () => (targetElement) => {
   const style = window.getComputedStyle(targetElement);
   const boxSizing = style.getPropertyValue(STYLE.BoxSizing);
@@ -95,7 +100,7 @@ const calcTextareaHeight = ({
   hiddenTextarea = null;
   return textareaStyle;
 };
-const getInput = (refs) => () => refs.input || refs.textarea;
+const getInput = (vm) => () => vm.$refs.input || vm.$refs.textarea;
 const blur = (api) => () => api.getInput().blur();
 const focus = (api) => () => api.getInput().focus();
 const select = (api) => () => api.getInput().select();
@@ -229,7 +234,7 @@ const watchFormSelect = ({ emit, props, state }) => (value) => {
     emit("update:modelValue", value);
     emit("change", value);
     const filterData = props.selectMenu.length && props.selectMenu.filter((item) => item.id === value).shift();
-    state.checkedLable = filterData ? filterData.label : "";
+    state.checkedLabel = filterData ? filterData.label : "";
   }
 };
 const hasSelection = (api) => () => {
@@ -287,6 +292,7 @@ export {
   handlePasswordVisible,
   hasSelection,
   hiddenPassword,
+  inputStyle,
   resizeTextarea,
   select,
   setNativeInputValue,

package/input/vue.js

@@ -30,7 +30,8 @@ import {
   handleEnterDisplayOnlyContent,
   hiddenPassword,
   dispatchDisplayedValue,
-  getDisplayedValue
+  getDisplayedValue,
+  inputStyle
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 const api = [
@@ -63,7 +64,8 @@ const api = [
   "isMemoryStorage",
   "hasSelection",
   "handleEnterDisplayOnlyContent",
-  "hiddenPassword"
+  "hiddenPassword",
+  "inputStyle"
 ];
 const initState = ({
   reactive,
@@ -82,7 +84,7 @@ const initState = ({
     passwordVisible: false,
     boxVisibility: false,
     textareaCalcStyle: {},
-    checkedLable: "",
+    checkedLabel: "",
     sheetvalue: props.modelValue,
     inputSize: computed(() => props.size || state.formItemSize),
     showClear: computed(
@@ -98,8 +100,10 @@ const initState = ({
       () => props.disabled || (parent.tinyForm || {}).disabled || state.isDisplayOnly || (parent.tinyForm || {}).displayOnly
     ),
     validateState: computed(() => parent.formItem ? parent.formItem.validateState : ""),
+    inputStyle: computed(() => api2.inputStyle()),
     textareaStyle: computed(() => __spreadProps(__spreadValues({}, state.textareaCalcStyle), {
-      resize: props.resize
+      resize: props.resize,
+      textAlign: props.textAlign
     })),
     needStatusIcon: computed(() => parent.tinyForm ? parent.tinyForm.statusIcon : false),
     showPwdVisible: computed(
@@ -125,7 +129,7 @@ const initApi = ({
   dispatch,
   broadcast,
   emit,
-  refs,
+  vm,
   props,
   CLASS_PREFIX,
   parent
@@ -136,7 +140,7 @@ const initApi = ({
     broadcast,
     showBox: showBox(state),
     clear: clear(emit),
-    getInput: getInput(refs),
+    getInput: getInput(vm),
     handleChange: handleChange(emit),
     watchFormSelect: watchFormSelect({ emit, props, state }),
     calcIconOffset: calcIconOffset({ CLASS_PREFIX, parent }),
@@ -145,7 +149,8 @@ const initApi = ({
     handleCompositionStart: handleCompositionStart(state),
     handleCompositionUpdate: handleCompositionUpdate(state),
     dispatchDisplayedValue: dispatchDisplayedValue({ state, props, dispatch, api: api2 }),
-    getDisplayedValue: getDisplayedValue({ state, props })
+    getDisplayedValue: getDisplayedValue({ state, props }),
+    inputStyle: inputStyle({ props })
   });
 };
 const mergeApi = ({
@@ -266,7 +271,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
     InputGroup: constants.inputGroupMode(mode)
   };
   const state = initState({ reactive, computed, mode, props, parent, constants, api: api2 });
-  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent });
+  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm });
   const storages = useStorageBox({ api: api2, props, reactive, toRefs });
   parent.tinyForm = parent.tinyForm || inject("form", null);
   mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, refs });