@opentiny/vue-renderless 3.8.3 → 3.9.0

package/progress/index.js

@@ -3,7 +3,11 @@ const computedBarStyle = ({ api, props }) => () => ({
   width: props.percentage + "%",
   backgroundColor: api.getCurrentColor(props.percentage)
 });
-const computedRelativeStrokeWidth = ({ props }) => () => (props.strokeWidth / props.width * 100).toFixed(1);
+const computedRelativeStrokeWidth = ({ constants, state }) => () => {
+  if (state.width === 0 || state.strokeWidth === 0)
+    return constants.REL_STROKE_WIDTH;
+  return (state.strokeWidth / state.width * 100).toFixed(1);
+};
 const computedRadius = ({ constants, props, state }) => () => props.type === constants.PROGRESS_TYPE.CIRCLE || props.type === constants.PROGRESS_TYPE.DASHBOARD ? parseInt(50 - parseFloat(state.relativeStrokeWidth) / 2, 10) : 0;
 const computedTrackPath = ({ constants, props, state }) => () => {
   const radiusValue = state.radius;
@@ -22,23 +26,55 @@ const computedTrailPathStyle = ({ state }) => () => ({
   strokeDasharray: `${state.perimeter * state.rate}px, ${state.perimeter}px`,
   strokeDashoffset: state.strokeDashoffset
 });
+const computedCircleStyle = ({ state }) => () => state.width ? { height: state.width + "px", width: state.width + "px" } : {};
 const computedCirclePathStyle = ({ props, state }) => () => ({
   strokeDasharray: `${state.perimeter * state.rate * (props.percentage / 100)}px, ${state.perimeter}px`,
   strokeDashoffset: state.strokeDashoffset,
   transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease"
 });
 const computedStroke = ({ api, constants, props }) => () => props.color && api.getCurrentColor(props.percentage) || constants.STATUS_TO_COLOR[props.status] || constants.STATUS_DEFAULT_COLOR;
-const computedIconClass = ({ constants, props }) => () => {
+const computedIconClass = ({ constants, props, mode }) => () => {
   if (props.status === constants.PROGRESS_STATUS.SUCCESS) {
-    return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_SUCCESS : constants.ICON_CIRCLE_SUCCESS;
+    const iconClasses = props.type === constants.PROGRESS_TYPE.LINE ? [constants.ICON_SUCCESS, constants.ICON_CIRCLE_SUCCESS] : [constants.ICON_CIRCLE_SUCCESS, constants.ICON_SUCCESS];
+    return mode === "mobile-first" ? iconClasses[1] : iconClasses[0];
   } else if (props.status === constants.PROGRESS_STATUS.WARNING) {
     return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_WARNING : constants.ICON_CIRCLE_WARNING;
   } else if (props.status === constants.PROGRESS_STATUS.EXCEPTION) {
-    return props.type === constants.PROGRESS_TYPE.LINE ? constants.ICON_EXCEPTION : constants.ICON_CIRCLE_EXCEPTION;
+    const iconClasses = props.type === constants.PROGRESS_TYPE.LINE ? [constants.ICON_EXCEPTION, constants.ICON_CIRCLE_EXCEPTION] : [constants.ICON_CIRCLE_EXCEPTION, constants.ICON_EXCEPTION];
+    return mode === "mobile-first" ? iconClasses[1] : iconClasses[0];
+  }
+};
+const computedIconStyle = ({ constants, props, state }) => () => {
+  if (props.type === constants.PROGRESS_TYPE.LINE) {
+    return state.strokeWidth ? {
+      width: constants.TEXT_XS + state.strokeWidth * constants.STROKE_WIDTH_RATE,
+      height: constants.TEXT_XS + state.strokeWidth * constants.STROKE_WIDTH_RATE
+    } : {};
+  } else {
+    return state.width ? { width: state.width / constants.WIDTH_RATE_TWO, height: state.width / constants.WIDTH_RATE_TWO } : {};
+  }
+};
+const computedProgressTextSize = ({ constants, props, state, mode }) => () => {
+  if (mode === "mobile-first") {
+    let fontSize = constants.TEXT_XS;
+    const sizeWidthMap = {
+      small: constants.PROGRESS_SIZE_WIDTH.SMALL,
+      medium: constants.PROGRESS_SIZE_WIDTH.MEDIUM,
+      large: constants.PROGRESS_SIZE_WIDTH.LARGE
+    };
+    if (props.type === constants.PROGRESS_TYPE.LINE) {
+      fontSize = state.strokeWidth ? constants.TEXT_XS + state.strokeWidth * constants.STROKE_WIDTH_RATE : props.size === constants.PROGRESS_SIZE.SMALL ? constants.TEXT_XS : constants.TEXT_SM;
+    } else {
+      const width = state.width ? state.width : sizeWidthMap[props.size];
+      fontSize = width / constants.WIDTH_RATE_THREE;
+      state.percentTextSize = width / constants.WIDTH_RATE_SIX;
+    }
+    return fontSize;
+  } else {
+    return props.type === constants.PROGRESS_TYPE.LINE ? constants.TEXT_XS + state.strokeWidth * constants.STROKE_WIDTH_RATE : state.width * 0.111111 + 2;
   }
 };
-const computedProgressTextSize = ({ constants, props }) => () => props.type === constants.PROGRESS_TYPE.LINE ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
-const computedContent = ({ props }) => () => typeof props.format === "function" ? props.format(props.percentage) || "" : `${props.percentage}%`;
+const computedContent = ({ props }) => () => typeof props.format === "function" ? props.format() || "" : `${props.percentage}%`;
 const getCurrentColor = ({ api, props }) => (percentage) => {
   if (typeof props.color === "function") {
     return props.color(percentage);
@@ -91,8 +127,10 @@ const customAfterAppearHook = ({ state, props }) => (el) => {
 export {
   computedBarStyle,
   computedCirclePathStyle,
+  computedCircleStyle,
   computedContent,
   computedIconClass,
+  computedIconStyle,
   computedPerimeter,
   computedProgressTextSize,
   computedRadius,

package/progress/vue.js

@@ -8,9 +8,11 @@ import {
   computedRate,
   computedStrokeDashoffset,
   computedTrailPathStyle,
+  computedCircleStyle,
   computedCirclePathStyle,
   computedStroke,
   computedIconClass,
+  computedIconStyle,
   computedProgressTextSize,
   computedContent,
   getCurrentColor,
@@ -21,9 +23,10 @@ import {
   customAfterAppearHook
 } from "./index";
 const api = ["state", "getCurrentColor", "getLevelColor", "getColorArray", "customBeforeAppearHook", "customAppearHook", "customAfterAppearHook"];
-const renderless = (props, { computed, reactive }, { constants }) => {
+const renderless = (props, { computed, reactive }, { constants, mode }) => {
   const api2 = {};
   const state = reactive({
+    percentTextSize: constants.TEXT_XS,
     rate: computed(() => api2.computedRate()),
     radius: computed(() => api2.computedRadius()),
     stroke: computed(() => api2.computedStroke()),
@@ -32,10 +35,16 @@ const renderless = (props, { computed, reactive }, { constants }) => {
     trackPath: computed(() => api2.computedTrackPath()),
     perimeter: computed(() => api2.computedPerimeter()),
     iconClass: computed(() => api2.computedIconClass()),
+    iconStyle: computed(() => api2.computedIconStyle()),
+    circleStyle: computed(() => api2.computedCircleStyle()),
     trailPathStyle: computed(() => api2.computedTrailPathStyle()),
     circlePathStyle: computed(() => api2.computedCirclePathStyle()),
     progressTextSize: computed(() => api2.computedProgressTextSize()),
     strokeDashoffset: computed(() => api2.computedStrokeDashoffset()),
+    strokeWidth: computed(
+      () => mode === "mobile-first" ? props.strokeWidth : props.strokeWidth || constants.DEFAULT_STROKE_WIDTH
+    ),
+    width: computed(() => mode === "mobile-first" ? props.width : props.width || constants.DEFAULT_WIDTH),
     relativeStrokeWidth: computed(() => api2.computedRelativeStrokeWidth())
   });
   Object.assign(api2, {
@@ -47,12 +56,14 @@ const renderless = (props, { computed, reactive }, { constants }) => {
     computedPerimeter: computedPerimeter({ state }),
     computedRadius: computedRadius({ constants, props, state }),
     computedTrackPath: computedTrackPath({ constants, props, state }),
-    computedIconClass: computedIconClass({ constants, props }),
+    computedIconClass: computedIconClass({ constants, props, mode }),
+    computedIconStyle: computedIconStyle({ constants, props, state }),
+    computedCircleStyle: computedCircleStyle({ props, state }),
     computedCirclePathStyle: computedCirclePathStyle({ props, state }),
     computedStrokeDashoffset: computedStrokeDashoffset({ state }),
     computedTrailPathStyle: computedTrailPathStyle({ state }),
-    computedRelativeStrokeWidth: computedRelativeStrokeWidth({ props }),
-    computedProgressTextSize: computedProgressTextSize({ constants, props }),
+    computedRelativeStrokeWidth: computedRelativeStrokeWidth({ state, constants }),
+    computedProgressTextSize: computedProgressTextSize({ state, constants, props, mode }),
     customAfterAppearHook: customAfterAppearHook({ state, props }),
     customBeforeAppearHook: customBeforeAppearHook({ props, state }),
     getLevelColor: getLevelColor(api2),

package/radio/index.js

@@ -19,6 +19,7 @@ const isGroup = ({ constants, parent: $parent, state }) => () => {
 };
 const radioSize = ({ props, state }) => () => state.isGroup ? state.radioGroup.state.radioGroupSize || props.size : props.size;
 const isDisabled = ({ props, state }) => () => props.disabled || state.radioGroup.disabled || state.formDisabled;
+const isDisplayOnly = ({ props }) => () => props.displayOnly;
 const tabIndex = ({ props, state }) => () => state.isDisabled || state.isGroup && state.model !== props.label ? -1 : 0;
 const getModel = ({ props, state }) => () => state.isGroup ? state.radioGroup.modelValue : props.modelValue;
 const setModel = ({ constants, dispatch, emit, props, refs, state }) => (val) => {
@@ -56,6 +57,7 @@ export {
   getModel,
   handleChange,
   isDisabled,
+  isDisplayOnly,
   isGroup,
   radioSize,
   setModel,

package/radio/vue.js

@@ -4,6 +4,7 @@ import {
   isGroup,
   radioSize,
   isDisabled,
+  isDisplayOnly,
   tabIndex,
   getModel,
   setModel,
@@ -21,6 +22,7 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
     isGroup: computed(() => api2.isGroup()),
     radioSize: computed(() => api2.radioSize()),
     isDisabled: computed(() => api2.isDisabled()),
+    isDisplayOnly: computed(() => api2.isDisplayOnly() || (parent.auiForm || {}).displayOnly),
     tabIndex: computed(() => api2.tabIndex()),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     model: computed({
@@ -35,6 +37,7 @@ const renderless = (props, { onMounted, onBeforeUnmount, computed, reactive, inj
     isGroup: isGroup({ constants, parent, state }),
     tabIndex: tabIndex({ props, state }),
     isDisabled: isDisabled({ props, state }),
+    isDisplayOnly: isDisplayOnly({ props }),
     setModel: setModel({ constants, dispatch, emit, props, refs, state }),
     handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
     dispatchDisplayedValue: dispatchDisplayedValue({ state, api: api2, dispatch }),

package/record/index.js

@@ -95,31 +95,91 @@ class Record {
     onMediaProgress && onMediaProgress(this.analyser, this.audioContext);
   }
 }
-const toogleRecord = ({ state, api, emit, constants }) => () => {
-  if (state.record.status === constants.STATUS.READY) {
-    !state.recorder && (state.recorder = new Record({
-      onMediaProgress: api.renderAudioGraph,
-      onstop: (file) => emit("confirm", file)
-    }));
-    state.recorder.start().then((isSuccess) => {
-      if (!isSuccess) {
-        return emit("error");
-      }
-      state.record.status = constants.STATUS.RECORDING;
-    });
-  } else if (state.record.status === constants.STATUS.PAUSE) {
-    state.record.status = constants.STATUS.RECORDING;
-    state.recorder.resume();
+const calcRecordTime = ({ state }) => (recording = false) => {
+  state.record.now = Date.now();
+  if (!state.record.fn) {
+    state.record.fn = () => {
+      const cur = Date.now();
+      state.record.currentTime += (cur - state.record.now) / 1e3;
+      state.record.now = cur;
+    };
+  }
+  if (!recording) {
+    state.record.timer = setInterval(state.record.fn, 1e3);
+  } else {
+    clearInterval(state.record.timer);
+    state.record.timer = null;
+    state.record.fn();
+  }
+};
+const toogleRecord = ({ state, api, emit, constants, props }) => ($event) => {
+  const { READY, RECORDING, PAUSE } = constants.STATUS;
+  if (props.isHwh5) {
+    if (state.record.status === READY) {
+      api.triggerClick($event, constants.HWH5_STATUS.START, () => state.record.status = RECORDING);
+    } else if (state.record.status === PAUSE) {
+      api.triggerClick($event, constants.HWH5_STATUS.CONTINUE, () => state.record.status = RECORDING);
+    } else {
+      api.triggerClick($event, constants.HWH5_STATUS.PAUSE, () => state.record.status = PAUSE);
+    }
+  } else {
+    if (state.record.status === READY) {
+      !state.recorder && (state.recorder = new Record({
+        onMediaProgress: (analyser, audioContext) => {
+          state.record.currentTime = audioContext.currentTime;
+          state.voiceNum = calcVoice(analyser);
+        },
+        onstop: (file) => emit("confirm", file)
+      }));
+      state.recorder.start().then((isSuccess) => {
+        if (!isSuccess) {
+          return emit("error");
+        }
+        state.record.status = RECORDING;
+      });
+    } else if (state.record.status === PAUSE) {
+      state.record.status = RECORDING;
+      state.recorder.resume();
+    } else {
+      state.record.status = PAUSE;
+      state.recorder.pause();
+    }
+  }
+};
+const handleConfirm = ({ state, emit, props, constants, api }) => ($event) => {
+  if (props.isHwh5) {
+    api.triggerClick($event, constants.HWH5_STATUS.CANCEL, () => emit("update:modelValue", false));
   } else {
-    state.record.status = constants.STATUS.PAUSE;
-    state.recorder.pause();
+    state.isClickConfirm = true;
+    emit("update:modelValue", false);
   }
 };
-const handleConfirm = ({ state, emit }) => () => {
-  state.isClickConfirm = true;
-  emit("update:modelValue", false);
+const handleCancel = ({ emit, props, constants, api, state }) => ($event) => {
+  if (props.isHwh5) {
+    api.triggerClick($event, constants.HWH5_STATUS.CANCEL, () => emit("update:modelValue", false));
+  } else {
+    state.isClickConfirm = true;
+    emit("update:modelValue", false);
+  }
+};
+const triggerClick = ({ state }) => ($event, type, cb) => {
+  const res = state.listeners["trigger-click"] && state.listeners["trigger-click"]($event, type);
+  if (res && res.then) {
+    res.then(() => cb && cb());
+  } else {
+    cb && cb();
+  }
 };
 const watchModelValue = ({ api }) => (value) => !value && api.resetRecord();
+const watchRecordStatus = ({ api, props, constants, state }) => (val) => {
+  if (val === constants.STATUS.RECORDING) {
+    props.isHwh5 && api.calcRecordTime();
+    api.renderAudioGraph();
+  } else if (val === constants.STATUS.PAUSE) {
+    props.isHwh5 && api.calcRecordTime(true);
+  }
+  cancelAnimationFrame(state.handlerId);
+};
 const calcVoice = (analyser) => {
   const dataArray = new Uint8Array(analyser.fftSize);
   analyser.getByteTimeDomainData(dataArray);
@@ -130,61 +190,108 @@ const calcVoice = (analyser) => {
     lowValue += dataArray[i] < 128 ? 128 - dataArray[i] : 0;
   }
   let voiceNum = 1;
-  const voiceMatch = [0, 100, 500, 1e3, 1e4];
-  const ismatch = voiceMatch.some((val2, idx) => {
-    if (highValue <= val2) {
-      return voiceNum = idx + 1 + (val2 === 0 ? lowValue / 1e3 : highValue / val2);
+  const voiceMatch = [0, 500, 1e3, 5e3, 1e4];
+  const ismatch = voiceMatch.some((val, idx) => {
+    if (highValue <= val) {
+      return voiceNum = idx + 1 + (val === 0 ? lowValue / 1e3 : highValue / val);
     }
   });
   !ismatch && (voiceNum = 6);
-  const val = voiceNum * 5;
-  let result = [-val, 2 * val, -3 * val];
-  return result.concat(
-    result.slice().reverse().map((times) => -times)
-  );
+  return voiceNum;
+};
+const getOptions = ({ canvasCtx, width }) => {
+  const createStrokeStyle = ({ canvasCtx: canvasCtx2, width: width2, colors = [] }) => {
+    const grd = canvasCtx2.createLinearGradient(0, 0, width2, 0);
+    colors.forEach(({ n, color }) => grd.addColorStop(n, color));
+    return grd;
+  };
+  const optionList = [
+    { q: 0, a: 8, w: 1 / 35, speed: -0.05 },
+    { q: 4, a: 7, w: 1 / 35, speed: -0.1 },
+    { q: 10, a: 6, w: 1 / 35, speed: -0.3 }
+  ];
+  const colorOptions = [
+    [
+      { n: 0, color: "rgba(0, 109, 213, 0)" },
+      { n: 0.5, color: "rgba(0, 109, 213, 0.8)" },
+      { n: 1, color: "rgba(0, 109, 213, 0)" }
+    ],
+    [
+      { n: 0, color: "rgba(0, 14, 215, 0)" },
+      { n: 0.5, color: "rgba(0, 14, 215, 0.4)" },
+      { n: 1, color: "rgba(0, 14, 215, 0)" }
+    ],
+    [
+      { n: 0, color: "rgba(0, 109, 213, 0)" },
+      { n: 0.5, color: "rgba(0, 109, 213, 0.3)" },
+      { n: 1, color: "rgba(0, 109, 213, 0)" }
+    ]
+  ];
+  optionList.forEach((option, i) => {
+    option.strokeStyle = createStrokeStyle({
+      canvasCtx,
+      width,
+      colors: colorOptions[i]
+    });
+  });
+  return optionList;
 };
-const renderAudioGraph = ({ vm, state }) => (analyser, audioContext) => {
-  state.record.currentTime = audioContext.currentTime;
-  let canvas = vm.$refs.canvas;
-  if (canvas) {
-    const height = canvas.offsetHeight;
-    const width = canvas.offsetWidth;
-    canvas.height = height;
-    canvas.width = width;
-    const canvasCtx = canvas.getContext("2d");
-    canvasCtx.clearRect(0, 0, width, height);
-    canvasCtx.fillStyle = "#fff";
-    canvasCtx.fillRect(0, 0, width, height);
-    canvasCtx.lineWidth = 1;
-    const grd = canvasCtx.createLinearGradient(0, 0, width, 0);
-    grd.addColorStop(0, "rgba(0, 103, 209, 0.1)");
-    grd.addColorStop(0.5, "rgba(0, 103, 209, 1)");
-    grd.addColorStop(1, "rgba(0, 103, 209, 0.1)");
-    canvasCtx.strokeStyle = grd;
-    let x = 0;
-    canvasCtx.beginPath();
-    canvasCtx.moveTo(x, height / 2);
-    const tops = calcVoice(analyser);
-    const space = width / 12;
-    for (let j = 0; j < 6; j++) {
-      canvasCtx.quadraticCurveTo(x += space, height / 2 - tops[j], x += space, height / 2);
+const renderAudioGraph = ({ vm, nextTick, state, props }) => () => {
+  nextTick(() => {
+    let canvas = vm.$refs.canvas;
+    if (canvas) {
+      const height = canvas.offsetHeight;
+      const width = canvas.offsetWidth;
+      canvas.height = height;
+      canvas.width = width;
+      const canvasCtx = canvas.getContext("2d");
+      const optionList = getOptions({ canvasCtx, width });
+      const draw = () => {
+        state.handlerId = requestAnimationFrame(draw);
+        let voiceNum = 1;
+        if (!props.isHwh5 && state.voiceNum) {
+          voiceNum = state.voiceNum.toFixed(1);
+        }
+        canvasCtx.clearRect(0, 0, width, height);
+        canvasCtx.fillStyle = "#fff";
+        canvasCtx.fillRect(0, 0, width, height);
+        optionList.forEach((option) => {
+          const { a, w, speed, strokeStyle } = option;
+          canvasCtx.lineWidth = 1;
+          canvasCtx.strokeStyle = strokeStyle;
+          let x = 0;
+          canvasCtx.beginPath();
+          canvasCtx.moveTo(x, height / 2);
+          option.q += speed;
+          for (let x2 = 0; x2 <= width; x2++) {
+            const y = a * voiceNum * Math.sin(w * x2 + option.q) + height / 2;
+            canvasCtx.lineTo(x2, y);
+          }
+          canvasCtx.stroke();
+        });
+      };
+      draw();
     }
-    canvasCtx.lineTo(width, height / 2);
-    canvasCtx.stroke();
-  }
+  });
 };
 const resetRecord = ({ state, constants }) => () => {
   state.record.status = constants.STATUS.READY;
   state.record.currentTime = 0;
-  state.isClickConfirm && state.recorder && state.recorder.stop();
+  state.isClickConfirm && state.recorder && state.recorder.recorder && state.recorder.stop();
   state.isClickConfirm = false;
+  clearInterval(state.record.timer);
+  state.record.timer = null;
 };
 const unmounted = ({ api }) => () => api.resetRecord();
 export {
+  calcRecordTime,
+  handleCancel,
   handleConfirm,
   renderAudioGraph,
   resetRecord,
   toogleRecord,
+  triggerClick,
   unmounted,
-  watchModelValue
+  watchModelValue,
+  watchRecordStatus
 };

package/record/vue.js

@@ -1,8 +1,20 @@
 import "../chunk-PKUHTIDK.js";
-import { toogleRecord, handleConfirm, watchModelValue, renderAudioGraph, unmounted, resetRecord } from "./index";
-const api = ["state", "toogleRecord", "handleConfirm"];
-const initState = ({ api: api2, reactive, computed }) => {
+import {
+  toogleRecord,
+  handleConfirm,
+  watchModelValue,
+  renderAudioGraph,
+  unmounted,
+  resetRecord,
+  handleCancel,
+  triggerClick,
+  watchRecordStatus,
+  calcRecordTime
+} from "./index";
+const api = ["state", "toogleRecord", "handleConfirm", "handleCancel"];
+const initState = ({ vm, api: api2, reactive, computed }) => {
   const state = reactive({
+    listeners: vm.$listeners,
     record: {
       status: "ready",
       currentTime: 0
@@ -17,25 +29,30 @@ const initState = ({ api: api2, reactive, computed }) => {
   Object.assign(api2, { state });
   return state;
 };
-const initApi = ({ api: api2, state, emit, vm, constants }) => {
+const initApi = ({ api: api2, state, emit, vm, constants, props, nextTick }) => {
   Object.assign(api2, {
-    toogleRecord: toogleRecord({ state, api: api2, emit, constants }),
-    handleConfirm: handleConfirm({ state, emit }),
+    toogleRecord: toogleRecord({ state, api: api2, emit, constants, props }),
+    handleConfirm: handleConfirm({ state, emit, props, constants, api: api2 }),
     watchModelValue: watchModelValue({ api: api2 }),
-    renderAudioGraph: renderAudioGraph({ vm, state }),
+    renderAudioGraph: renderAudioGraph({ vm, nextTick, state, props }),
     unmounted: unmounted({ api: api2 }),
-    resetRecord: resetRecord({ state, constants })
+    resetRecord: resetRecord({ state, constants }),
+    handleCancel: handleCancel({ emit, props, constants, api: api2, state }),
+    triggerClick: triggerClick({ state }),
+    watchRecordStatus: watchRecordStatus({ api: api2, props, constants, state }),
+    calcRecordTime: calcRecordTime({ state })
   });
 };
-const initWatch = ({ watch, props, api: api2 }) => {
+const initWatch = ({ watch, props, api: api2, state }) => {
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(() => state.record.status, api2.watchRecordStatus);
 };
-const renderless = (props, { reactive, watch, computed, onUnmounted }, { emit, vm, constants }) => {
+const renderless = (props, { reactive, watch, computed, onUnmounted, nextTick }, { emit, vm, constants }) => {
   const api2 = {};
-  const state = initState({ api: api2, reactive, computed });
-  initApi({ api: api2, state, emit, vm, constants });
-  initWatch({ watch, props, api: api2 });
-  onUnmounted(() => api2.unmounted);
+  const state = initState({ vm, api: api2, reactive, computed });
+  initApi({ api: api2, state, emit, vm, constants, props, nextTick });
+  initWatch({ watch, props, api: api2, state });
+  onUnmounted(api2.unmounted);
   return api2;
 };
 export {

package/roles/index.js

@@ -37,15 +37,15 @@ const changeRole = ({ constants, emit, props, service, state }) => ({ roleId })
     });
   });
 };
-const initService = (service) => {
+const initService = (service, props) => {
   const { base = {}, common = {}, pushCustomized } = service || {};
   const noopFn = () => Promise.resolve(null);
   const commonNoopFn = () => Promise.reject(new Error("[Tiny Error][Roles] This component depends on @opentiny/vue-service"));
   return {
-    getEnvInfoSync: base.getEnvInfoSync || commonNoopFn,
-    getChangeRoleUrl: common.getChangeRoleUrl || commonNoopFn,
-    getCustomized: common.getCustomized || noopFn,
-    pushCustomized: pushCustomized || noopFn
+    getEnvInfoSync: props.getEnvInfoSync || base.getEnvInfoSync || commonNoopFn,
+    getChangeRoleUrl: props.getChangeRoleUrl || common.getChangeRoleUrl || commonNoopFn,
+    getCustomized: props.getCustomized || common.getCustomized || noopFn,
+    pushCustomized: props.pushCustomized || pushCustomized || noopFn
   };
 };
 export {

package/roles/vue.js

@@ -2,7 +2,7 @@ import "../chunk-PKUHTIDK.js";
 import { showList, show, hide, getRoleList, changeRole, initService } from "./index";
 const api = ["state", "showList", "show", "hide", "changeRole"];
 const renderless = (props, { computed, reactive }, { emit, service, constants }) => {
-  const $service = initService(service);
+  const $service = initService(service, props);
   let api2 = {};
   const state = reactive({
     currentRole: "",

package/slider/index.js

@@ -9,7 +9,7 @@ const bindEvent = (api) => () => {
 };
 const unBindEvent = (api) => () => off(window, "resize", api.bindResize);
 const bindResize = ({ parent, props, state }) => () => {
-  const handleEl = parent.$el.firstElementChild;
+  const handleEl = parent.$el.querySelector("div[role=tiny-slider]");
   state.sliderSize = handleEl["client" + (props.vertical ? "Height" : "Width")];
   state.sliderOffset = handleEl.getBoundingClientRect();
 };
@@ -307,10 +307,12 @@ const watchActiveValue = ({ api, emit, props, state }) => (newValue, oldValue) =
 const watchModelValue = ({ api, state }) => (value) => {
   if (!state.innerTrigger) {
     api.initSlider(value);
+    api.setActiveButtonValue(value);
   } else {
     state.innerTrigger = false;
     if (!state.isDouble) {
       api.initSlider(value);
+      api.setActiveButtonValue(value);
     }
   }
 };

package/steps/index.js

@@ -23,8 +23,16 @@ const computedRightNodePos = ({ state, props }) => () => {
     right: -(index + 1) * 4 + "px"
   }));
 };
+const computedSpace = ({ props }) => {
+  const { space } = props;
+  if (/^\d+$/.test(space)) {
+    return `${space}px`;
+  }
+  return space;
+};
 export {
   computedRightNodePos,
+  computedSpace,
   isVisibleHandler,
   updateStartIndex
 };

package/steps/vue.js

@@ -1,11 +1,12 @@
 import "../chunk-PKUHTIDK.js";
-import { updateStartIndex, isVisibleHandler, computedRightNodePos } from "./index";
+import { updateStartIndex, isVisibleHandler, computedRightNodePos, computedSpace } from "./index";
 const api = ["state", "isVisibleHandler"];
 const renderless = (props, { reactive, watch, computed }) => {
   const state = reactive({
     startIndex: 0,
     endIndex: computed(() => state.startIndex + props.visibleNum),
-    rightNodePositions: computed(() => api2.computedRightNodePos())
+    rightNodePositions: computed(() => api2.computedRightNodePos()),
+    computedSpace: computed(() => computedSpace({ props }))
   });
   const api2 = {
     updateStartIndex: updateStartIndex({ state, props }),

package/switch/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
 import { toggle, computedWarpClasses, computedInnerClasses, computedStyle } from "./index";
 const api = ["toggle", "state"];
-const renderless = (props, { computed, watch, reactive, inject }, { parent, constants, mode, emit }) => {
+const renderless = (props, { computed, watch, reactive, inject }, { parent, constants, mode, emit, designConfig }) => {
   const prefixCls = constants.prefixcls(mode);
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const api2 = {
@@ -14,7 +14,14 @@ const renderless = (props, { computed, watch, reactive, inject }, { parent, cons
     style: computed(() => api2.computedStyle()),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     disabled: computed(() => props.disabled || state.formDisabled),
-    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly)
+    isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
+    showText: computed(() => {
+      if (props.showText === void 0) {
+        return (designConfig == null ? void 0 : designConfig.showText) || false;
+      } else {
+        return props.showText;
+      }
+    })
   });
   Object.assign(api2, {
     state,

package/tabs-mf/vue-bar.js

@@ -2,9 +2,9 @@ import "../chunk-PKUHTIDK.js";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd } from "./index";
 import { getAddWheelListener } from "./wheel";
-const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
 const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd"];
 const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject, computed }, { vm }) => {
+  const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
   const tabs = inject("tabs", null);
   const state = reactive({
     moreList: [],

package/text-popup/vue.js

@@ -1,9 +1,10 @@
 import "../chunk-PKUHTIDK.js";
 import { computedWidth, watchValue, mounted, onFocus, onBlur, onInput, separteText, jointText } from "./index";
 const api = ["state", "onFocus", "onBlur", "onInput"];
-const renderless = (props, { computed, onMounted, reactive, watch }, { emit, nextTick, refs }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, inject }, { emit, nextTick, refs }) => {
   const api2 = {};
   const state = reactive({
+    showAutoWidth: inject("showAutoWidth", null),
     type: "input",
     textAreaValue: "",
     text: null,