@opentiny/vue-renderless 3.8.4 → 3.9.1

package/image/vue.js

@@ -15,7 +15,18 @@ import {
   mounted,
   deleteHander
 } from "./index";
-const api = ["state", "src", "zIndex", "previewSrcList", "loadImage", "clickHandler", "closeViewer", "handleLoad", "handleError", "deleteHander"];
+const api = [
+  "state",
+  "src",
+  "zIndex",
+  "previewSrcList",
+  "loadImage",
+  "clickHandler",
+  "closeViewer",
+  "handleLoad",
+  "handleError",
+  "deleteHander"
+];
 const initState = ({ reactive, computed, api: api2, props, images }) => {
   const state = reactive({
     mfPreviewVisible: props.previewVisible,

package/input/index.js

@@ -46,7 +46,7 @@ const calculateNodeStyling = () => (targetElement) => {
   const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";");
   return { contextStyle, paddingSize, borderSize, boxSizing };
 };
-const calcTextareaHeight = ({ api, hiddenTextarea, props }) => (targetElement, minRows = 1, maxRows = null) => {
+const calcTextareaHeight = ({ api, hiddenTextarea, props, state }) => (targetElement, minRows = 1, maxRows = null) => {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement("textarea");
     document.body.appendChild(hiddenTextarea);
@@ -74,8 +74,12 @@ const calcTextareaHeight = ({ api, hiddenTextarea, props }) => (targetElement, m
     if (props.height) {
       minHeight = props.height;
     }
-    height = Math.max(minHeight, height);
-    textareaStyle.minHeight = `${minHeight}px`;
+    if (!state.isDisplayOnly) {
+      height = Math.max(minHeight, height);
+      textareaStyle.minHeight = `${minHeight}px`;
+    } else {
+      textareaStyle.minHeight = `0px`;
+    }
   }
   if (maxRows !== null) {
     let maxHeight = singleRowHeight * maxRows;
@@ -250,6 +254,12 @@ const getDisplayedValue = ({ state, props }) => () => {
     return props.displayOnlyContent || state.nativeInputValue || "-";
   }
 };
+const handleDrop = (emit) => (event) => {
+  emit("drop", event);
+};
+const handleDragStart = (emit) => (event) => {
+  emit("dragstart", event);
+};
 export {
   blur,
   calcIconOffset,
@@ -266,6 +276,8 @@ export {
   handleCompositionEnd,
   handleCompositionStart,
   handleCompositionUpdate,
+  handleDragStart,
+  handleDrop,
   handleEnterDisplayOnlyContent,
   handleFocus,
   handleInput,

package/input/vue.js

@@ -30,7 +30,9 @@ import {
   handleEnterDisplayOnlyContent,
   hiddenPassword,
   dispatchDisplayedValue,
-  getDisplayedValue
+  getDisplayedValue,
+  handleDrop,
+  handleDragStart
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 const api = [
@@ -63,7 +65,9 @@ const api = [
   "isMemoryStorage",
   "hasSelection",
   "handleEnterDisplayOnlyContent",
-  "hiddenPassword"
+  "hiddenPassword",
+  "handleDrop",
+  "handleDragStart"
 ];
 const initState = ({ reactive, computed, mode, props, parent, constants }) => {
   const state = reactive({
@@ -77,21 +81,29 @@ const initState = ({ reactive, computed, mode, props, parent, constants }) => {
     checkedLable: "",
     sheetvalue: props.modelValue,
     inputSize: computed(() => props.size || state.formItemSize),
-    showClear: computed(() => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)),
+    showClear: computed(
+      () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
+    ),
     upperLimit: computed(() => parent.$attrs.maxlength),
     textLength: computed(() => textLength(props.modelValue)),
     inputExceed: computed(() => state.isWordLimitVisible && state.textLength > state.upperLimit),
     formItemSize: computed(() => (parent.formItem || {}).formItemSize),
     validateIcon: computed(() => constants.VALIDATE_ICON[state.validateState]),
     showWordLimit: computed(() => props.showWordLimit && parent.$attrs.maxlength),
-    inputDisabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled),
+    inputDisabled: computed(
+      () => props.disabled || (parent.auiForm || {}).disabled || state.isDisplayOnly || (parent.tinyForm || {}).displayOnly
+    ),
     validateState: computed(() => parent.formItem ? parent.formItem.validateState : ""),
     textareaStyle: computed(() => __spreadProps(__spreadValues({}, state.textareaCalcStyle), {
       resize: props.resize
     })),
     needStatusIcon: computed(() => parent.tinyForm ? parent.tinyForm.statusIcon : false),
-    showPwdVisible: computed(() => props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused)),
-    nativeInputValue: computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)),
+    showPwdVisible: computed(
+      () => props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused)
+    ),
+    nativeInputValue: computed(
+      () => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)
+    ),
     isWordLimitVisible: computed(
       () => (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === "text" || parent.type === "textarea") && !state.inputDisabled && !props.readonly && !props.showPassword
     ),
@@ -119,7 +131,9 @@ const initApi = ({ api: api2, state, dispatch, broadcast, emit, refs, props, CLA
     handleCompositionStart: handleCompositionStart(state),
     handleCompositionUpdate: handleCompositionUpdate(state),
     dispatchDisplayedValue: dispatchDisplayedValue({ state, props, dispatch, api: api2 }),
-    getDisplayedValue: getDisplayedValue({ state, props })
+    getDisplayedValue: getDisplayedValue({ state, props }),
+    handleDrop: handleDrop(emit),
+    handleDragStart: handleDragStart(emit)
   });
 };
 const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName, nextTick, parent, state, refs }) => {
@@ -148,7 +162,8 @@ const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName,
     calcTextareaHeight: calcTextareaHeight({
       api: api2,
       hiddenTextarea: null,
-      props
+      props,
+      state
     }),
     setNativeInputValue: setNativeInputValue({ api: api2, state }),
     handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
@@ -193,6 +208,17 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, emit, componentNa
       });
     }
   );
+  watch(
+    () => state.isDisplayOnly,
+    () => {
+      nextTick(() => {
+        api2.setNativeInputValue();
+        api2.resizeTextarea();
+        api2.updateIconOffset();
+        api2.dispatchDisplayedValue();
+      });
+    }
+  );
   watch(
     () => state.sheetvalue,
     (value) => api2.watchFormSelect(value),

package/ip-address/index.js

@@ -115,7 +115,7 @@ const keyup = ({ api, props }) => ({ item, index, event }) => {
       item.value = item.value.replace(/\D/g, "");
       return false;
     }
-    if ([KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
+    if ([KEY_CODE.Tab, KEY_CODE.Space, KEY_CODE.NumpadDecimal, KEY_CODE.NumpadComma].includes(keyCode) && value) {
       api.select({ index: nextIndex });
       return false;
     }
@@ -126,14 +126,14 @@ const keyup = ({ api, props }) => ({ item, index, event }) => {
     }
   }
 };
-const checkError1 = ({ Space, NumpadDecimal, NumpadComma, keyCode, value }) => [Space, NumpadDecimal, NumpadComma].includes(keyCode) && value;
+const checkError1 = ({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) => [Tab, Space, NumpadDecimal, NumpadComma].includes(keyCode) && value;
 const checkError2 = (newValue) => newValue && (isNaN(newValue) || newValue > IPTHRESHOLD.Max);
 const checkError3 = ({ isfilterKeyCodes, isSelected, value }) => !isfilterKeyCodes && !isSelected && value === "0";
 const checkError4 = ({ isfilterKeyCodes, isSelected, value, key }) => !isfilterKeyCodes && !isSelected && value + key > IPTHRESHOLD.Max;
 const checkError5 = ({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV }) => isNaN(key) && !isfilterKeyCodes && !(!value && ctrlKey && keyCode === KeyV);
 const isError = ({ key, value, isSelected, isfilterKeyCodes, ctrlKey, keyCode, newValue }) => {
-  const { Space, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE;
-  return checkError1({ Space, NumpadDecimal, NumpadComma, keyCode, value }) || checkError2(newValue) || checkError3({ isfilterKeyCodes, isSelected, value }) || checkError4({ isfilterKeyCodes, isSelected, value, key }) || checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV });
+  const { Tab, Space, NumpadDecimal, NumpadComma, KeyV } = KEY_CODE;
+  return checkError1({ Tab, Space, NumpadDecimal, NumpadComma, keyCode, value }) || checkError2(newValue) || checkError3({ isfilterKeyCodes, isSelected, value }) || checkError4({ isfilterKeyCodes, isSelected, value, key }) || checkError5({ key, isfilterKeyCodes, value, ctrlKey, keyCode, KeyV });
 };
 const keydown = ({ api, props, state }) => ({ item, index, event }) => {
   const { target, key, keyCode, ctrlKey } = event;

package/month-table/index.js

@@ -58,8 +58,11 @@ const getRows = ({ props, state, vm }) => () => {
   return tableRows;
 };
 const markRange = ({ props, state }) => (minDate, maxDate) => {
-  minDate = Math.min(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
-  maxDate = Math.max(getMonthTimestamp(minDate), getMonthTimestamp(maxDate));
+  minDate = getMonthTimestamp(minDate);
+  maxDate = getMonthTimestamp(maxDate);
+  if (minDate > maxDate) {
+    [minDate, maxDate] = [maxDate, minDate];
+  }
   const rows = state.rows;
   for (let i = 0, len = rows.length; i < len; i++) {
     const row = rows[i];

package/numeric/index.js

@@ -58,7 +58,7 @@ const increase = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.maxDisabled) {
     return;
   }
-  const value = props.modelValue || 0;
+  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
   let newVal = api.internalIncrease({ val: value, step: props.step });
   if (!props.circulate || !isFinite(props.max) || !isFinite(props.min)) {
     api.setCurrentValue(newVal);
@@ -73,7 +73,7 @@ const decrease = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.minDisabled) {
     return;
   }
-  const value = props.modelValue || 0;
+  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
   let newVal = api.internalDecrease({ val: value, step: props.step });
   if (!props.circulate || !isFinite(props.max) || !isFinite(props.min)) {
     api.setCurrentValue(newVal);
@@ -92,7 +92,10 @@ const handleBlur = ({ constants, dispatch, emit, props, state, api }) => (event)
     dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.blur, [state.displayValue]);
   }
 };
-const handleFocus = ({ emit, state, props, api }) => (event) => {
+const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
+  if (props.disabled) {
+    refs.input.blur();
+  }
   state.inputStatus = true;
   const currentValue = api.getDecimal(state.currentValue);
   if (!currentValue.isNaN() && !isNull(state.currentValue)) {

package/numeric/vue.js

@@ -26,7 +26,18 @@ import {
   dispatchDisplayedValue,
   getDisplayedValue
 } from "./index";
-const api = ["state", "decrease", "increase", "handleBlur", "handleFocus", "handleInput", "handleInputChange", "mouseEvent", "focus", "select"];
+const api = [
+  "state",
+  "decrease",
+  "increase",
+  "handleBlur",
+  "handleFocus",
+  "handleInput",
+  "handleInputChange",
+  "mouseEvent",
+  "focus",
+  "select"
+];
 const initState = ({ reactive, computed, props, api: api2, $service, parent }) => {
   const state = reactive({
     currentValue: props.modelValue,
@@ -41,8 +52,8 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     inputDisabled: computed(() => props.disabled || state.formDisabled),
     displayValue: computed(() => api2.displayValue()),
     numPrecision: computed(() => api2.getNumPecision()),
-    minDisabled: computed(() => !props.circulate && api2.internalDecrease({ val: props.modelValue, step: props.step }) < props.min || state.formDisabled),
-    maxDisabled: computed(() => !props.circulate && api2.internalIncrease({ val: props.modelValue, step: props.step }) > props.max || state.formDisabled),
+    minDisabled: computed(() => !props.circulate && state.currentValue <= props.min || state.formDisabled),
+    maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly)
@@ -60,7 +71,7 @@ const initApi = ({ api: api2, props, state, parent, refs, emit, dispatch, consta
     mounted: mounted({ constants, parent, props, refs, state }),
     unmounted: unmounted({ parent, state }),
     getDecimal: getDecimal(props),
-    handleFocus: handleFocus({ emit, state, props, api: api2 }),
+    handleFocus: handleFocus({ emit, state, props, api: api2, refs }),
     decrease: decrease({ api: api2, props, state }),
     increase: increase({ api: api2, props, state }),
     handleInput: handleInput({ state, api: api2, emit, props }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.8.4",
+  "version": "3.9.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -16,6 +16,13 @@
   ],
   "author": "OpenTiny Team",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:opentiny/tiny-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-vue/issues"
+  },
   "sideEffects": false,
   "scripts": {
     "build": "tsup",

package/popconfirm/index.js

@@ -17,6 +17,7 @@ const show = ({ state, emit, props }) => (trigger) => {
 const confirm = ({ state, emit }) => () => {
   state.showPopover = false;
   emit("confirm", state);
+  emit("hide", state);
 };
 export {
   confirm,

package/popconfirm/vue.js

@@ -1,12 +1,14 @@
 import "../chunk-PKUHTIDK.js";
 import { show, hide, confirm } from "./index";
 const api = ["state", "show", "hide", "confirm"];
-const renderless = (props, { computed, reactive }, { emit, constants }) => {
+const renderless = (props, { computed, reactive }, { emit, constants, designConfig }) => {
+  var _a;
   const api2 = {};
+  const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
   const state = reactive({
     isLock: false,
     showPopover: false,
-    getIcon: computed(() => typeof props.type === "object" ? props.type : constants.ICON_MAP[props.type])
+    getIcon: computed(() => typeof props.type === "object" ? props.type : designIcon || constants.ICON_MAP[props.type])
   });
   Object.assign(api2, {
     state,

package/popover/index.js

@@ -26,11 +26,13 @@ const processTrigger = ({ api, state, props, nextTick }) => {
     }
   }
 };
-const mounted = ({ api, state, constants, props, nextTick }) => () => {
+const mounted = ({ api, state, constants, props, nextTick, mode }) => () => {
   state.mounted = true;
   const { referenceElm, popperElm, tooltipId } = state;
   if (referenceElm) {
-    addClass(referenceElm, `${constants.IDPREFIX}__reference`);
+    if (mode !== "mobile-first") {
+      addClass(referenceElm, `${constants.IDPREFIX}__reference`);
+    }
     referenceElm.setAttribute("aria-describedby", tooltipId);
     referenceElm.setAttribute("tabindex", props.tabindex);
     popperElm.setAttribute("tabindex", 0);
@@ -133,17 +135,22 @@ const cleanup = ({ props, state }) => () => {
   }
 };
 const destroyed = ({ state, api }) => () => {
-  const reference = state.referenceElm;
-  off(reference, "click", api.doToggle);
-  off(reference, "mouseup", api.doClose);
-  off(reference, "mousedown", api.doShow);
-  off(reference, "focusin", api.doShow);
-  off(reference, "focusout", api.doClose);
-  off(reference, "mousedown", api.doShow);
-  off(reference, "mouseup", api.doClose);
-  off(reference, "mouseleave", api.handleMouseLeave);
-  off(reference, "mouseenter", api.handleMouseEnter);
+  const { referenceElm, popperElm } = state;
+  off(referenceElm, "click", api.doToggle);
+  off(referenceElm, "mouseup", api.doClose);
+  off(referenceElm, "mousedown", api.doShow);
+  off(referenceElm, "focusin", api.doShow);
+  off(referenceElm, "focusout", api.doClose);
+  off(referenceElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "mouseenter", api.handleMouseEnter);
   off(document, "click", api.handleDocumentClick);
+  off(popperElm, "focusin", api.handleFocus);
+  off(popperElm, "focusout", api.handleBlur);
+  off(popperElm, "mouseenter", api.handleMouseEnter);
+  off(popperElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "click", api.handleClick);
+  off(referenceElm, "focusout", api.handleBlur);
+  off(referenceElm, "keydown", api.handleKeydown);
 };
 const computedTooltipId = (constants) => () => `${constants.IDPREFIX}-${guid("", 4)}`;
 const wrapMounted = ({ api, props, refs, state }) => () => {

package/popover/vue.js

@@ -21,7 +21,16 @@ import {
   observeCallback
 } from "./index";
 import userPopper from "../common/deps/vue-popper";
-const api = ["state", "handleAfterEnter", "handleAfterLeave", "handleItemClick"];
+const api = [
+  "state",
+  "handleAfterEnter",
+  "handleAfterLeave",
+  "doToggle",
+  "doShow",
+  "doClose",
+  "doDestroy",
+  "handleItemClick"
+];
 const initState = ({ reactive, computed, api: api2, popperElm, showPopper, referenceElm }) => {
   const state = reactive({
     popperElm,
@@ -29,14 +38,15 @@ const initState = ({ reactive, computed, api: api2, popperElm, showPopper, refer
     timer: null,
     mounted: false,
     referenceElm,
+    xPlacement: "bottom",
     tooltipId: computed(() => api2.computedTooltipId())
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, nextTick, vm }) => {
+const initApi = ({ api: api2, props, state, refs, emit, doDestroy, constants, nextTick, vm, mode }) => {
   Object.assign(api2, {
     state,
-    mounted: mounted({ api: api2, state, constants, props, nextTick }),
+    mounted: mounted({ api: api2, state, constants, props, nextTick, mode }),
     cleanup: cleanup({ state, props }),
     destroyed: destroyed({ state, api: api2 }),
     doDestroy,
@@ -81,13 +91,13 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
     }
   );
 };
-const renderless = (props, { reactive, computed, watch, toRefs, onBeforeUnmount, onMounted, onUnmounted, onActivated, onDeactivated }, { $prefix, emit, vm, refs, slots, nextTick }) => {
+const renderless = (props, { reactive, computed, watch, toRefs, onBeforeUnmount, onMounted, onUnmounted, onActivated, onDeactivated }, { $prefix, emit, vm, refs, slots, nextTick, mode }) => {
   const api2 = {};
   const constants = { IDPREFIX: `${$prefix.toLowerCase()}-popover` };
   const options = { emit, onBeforeUnmount, nextTick, reactive, props, watch, onDeactivated, refs, slots, toRefs };
   const { showPopper, popperElm, referenceElm, doDestroy } = userPopper(options);
   const state = initState({ reactive, computed, api: api2, popperElm, showPopper, referenceElm });
-  initApi({ api: api2, constants, props, state, refs, emit, doDestroy, nextTick, vm });
+  initApi({ api: api2, constants, props, state, refs, emit, doDestroy, nextTick, vm, mode });
   onDeactivated(() => {
     api2.destroyed();
     api2.cleanup();

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 }),