@nutui/nutui 3.1.22 → 3.1.23-beta.2

package/dist/packages/_es/PullRefresh.js

@@ -1,94 +1,349 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, toRefs as t, reactive as l, computed as a, onMounted as o, openBlock as u, createElementBlock as r, normalizeStyle as n, createElementVNode as s, normalizeClass as i, toDisplayString as v, renderSlot as c } from "vue";
-import { c as d } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { ref, toRefs, reactive, computed, onMounted, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, toDisplayString, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-function f(e2, t2) {
-  (typeof e2.cancelable != "boolean" || e2.cancelable) && e2.preventDefault(), t2 && e2.stopPropagation();
+const MIN_DISTANCE = 10;
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return "horizontal";
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
+  }
+  return "";
 }
-const { componentName: p, create: m } = d("pullrefresh"), g = m({ props: { useWindow: { type: Boolean, default: true }, containerId: { type: String, default: "" }, disabled: { type: Boolean, default: false }, direction: { type: String, default: "vertical" }, pullingText: { type: Object, default: { top: "\u4E0B\u62C9\u5237\u65B0", bottom: "\u4E0A\u62C9\u52A0\u8F7D", left: "\u5DE6\u6ED1\u5237\u65B0", right: "\u53F3\u6ED1\u52A0\u8F7D" } }, loosingText: { type: Object, default: { top: "\u677E\u624B\u91CA\u653E\u5237\u65B0", bottom: "\u677E\u624B\u91CA\u653E\u5237\u65B0", left: "\u91CA\u653E\u5237\u65B0", right: "\u52A0\u8F7D\u66F4\u591A" } }, loadingText: { type: Object, default: { top: "\u52A0\u8F7D\u4E2D...", bottom: "\u52A0\u8F7D\u4E2D...", left: "\u52A0\u8F7D\u4E2D...", right: "\u52A0\u8F7D\u4E2D..." } } }, emits: ["refresh", "downRefresh"], setup(u2, { emit: r2 }) {
-  const { containerId: n2, useWindow: s2, direction: i2, disabled: v2 } = t(u2), c2 = e(false), d2 = e(false), h2 = e(false), p2 = e(false), m2 = l({ status: "normal", distance: 0, duration: 0 });
-  let g2 = document.documentElement || document.body;
-  const b2 = e(null), T2 = function() {
-    const t2 = e(0), l2 = e(0), a2 = e(0), o2 = e(0), u3 = e(0), r3 = e(0), n3 = e(""), s3 = () => {
-      a2.value = 0, o2.value = 0, u3.value = 0, r3.value = 0, n3.value = "";
-    };
-    return { move: (e2) => {
-      const s4 = e2.touches[0];
-      var i3, v3;
-      a2.value = s4.clientX - t2.value, o2.value = s4.clientY - l2.value, u3.value = Math.abs(a2.value), r3.value = Math.abs(o2.value), n3.value || (n3.value = (i3 = u3.value) > (v3 = r3.value) && i3 > 10 ? "horizontal" : v3 > i3 && v3 > 10 ? "vertical" : "");
-    }, start: (e2) => {
-      s3(), t2.value = e2.touches[0].clientX, l2.value = e2.touches[0].clientY;
-    }, reset: s3, startX: t2, startY: l2, deltaX: a2, deltaY: o2, offsetX: u3, offsetY: r3, direction: n3, isVertical: () => n3.value === "vertical", isHorizontal: () => n3.value === "horizontal" };
-  }(), x = a(() => {
-    let e2 = {};
-    const { deltaY: t2, deltaX: l2 } = T2;
-    return i2.value == "vertical" && (c2.value && t2.value > 0 || d2.value && t2.value < 0) && T2.isVertical() && (e2 = { transitionDuration: `${m2.duration}ms`, transform: m2.distance ? `translate3d(0,${m2.distance}px, 0)` : "translate3d(0,0,0)" }), i2.value == "horizontal" && (h2.value && l2.value > 0 || p2.value && l2.value < 0) && T2.isHorizontal() && (e2 = { transitionDuration: `${m2.duration}ms`, transform: m2.distance ? `translate3d(${m2.distance}px, 0,0)` : "translate3d(0,0,0)" }), e2;
-  }), y = a(() => {
-    let e2 = {};
-    if (i2.value == "vertical" && d2.value && T2.deltaY.value < 0 && T2.isVertical()) {
-      e2 = { height: (Math.abs(m2.distance) < 50 ? -m2.distance : 50) + "px" };
-    }
-    if (i2.value == "horizontal" && p2.value && T2.deltaX.value < 0 && T2.isVertical()) {
-      e2 = { width: (Math.abs(m2.distance) < 50 ? -m2.distance : 50) + "px" };
+function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  };
+  const move = (event) => {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
     }
-    return e2;
-  }), z = a(() => {
-    const { status: e2, distance: t2 } = m2, l2 = i2.value == "vertical" ? "top" : "left";
-    return e2 == "loading" && (c2.value || h2.value) && t2 > 0 ? u2.loadingText[l2] : e2 == "pulling" && (c2.value || h2.value) && t2 > 0 ? u2.pullingText[l2] : e2 == "loosing" && (c2.value || h2.value) && t2 > 0 ? u2.loosingText[l2] : "";
-  }), M = a(() => {
-    const { status: e2, distance: t2 } = m2, l2 = i2.value == "vertical" ? "bottom" : "right";
-    return e2 == "loading" && (d2.value || p2.value) && t2 < 0 ? u2.loadingText[l2] : e2 == "pulling" && (d2.value || p2.value) && t2 < 0 ? u2.pullingText[l2] : e2 == "loosing" && (d2.value || p2.value) && t2 < 0 ? u2.loosingText[l2] : "";
-  }), w = () => m2.status !== "loading" && !v2.value, S = (e2, t2) => {
-    m2.distance = e2, t2 ? m2.status = "loading" : e2 === 0 ? m2.status = "normal" : Math.abs(e2) < 50 ? m2.status = "pulling" : m2.status = "loosing";
   };
-  o(() => {
-    const e2 = (t2 = b2, n2.value != "" ? document.querySelector(`#${n2.value}`) : t2 && t2.parentNode);
-    var t2;
-    let l2 = document.documentElement || document.body;
-    s2.value === false && (l2 = e2), g2 = l2;
-  });
-  const X = (e2) => {
-    const t2 = 50;
-    return e2 > t2 && (e2 = e2 < 100 ? t2 + (e2 - t2) / 2 : 75 + (e2 - 100) / 4), Math.round(e2);
-  }, Y = () => {
-    S(0);
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
   };
-  return { scroller: b2, touchStart: (e2) => {
-    if (w())
-      if (i2.value == "vertical") {
-        const t2 = "scrollTop" in g2 ? g2.scrollTop : 0;
-        c2.value = Math.max(t2, 0) == 0;
-        const { scrollHeight: l2, clientHeight: a2, scrollTop: o2 } = g2;
-        d2.value = a2 + o2 == l2, (c2.value || d2.value) && (m2.duration = 0, T2.start(e2));
-      } else {
-        const { scrollWidth: t2, clientWidth: l2, scrollLeft: a2 } = g2, o2 = "scrollLeft" in g2 ? g2.scrollLeft : 0;
-        h2.value = Math.max(o2, 0) == 0, p2.value = l2 + a2 == t2, (h2.value || p2.value) && (m2.duration = 0, T2.start(e2));
-      }
-    else
-      f(e2);
-  }, touchMove: (e2) => {
-    if (w()) {
-      const { deltaY: t2, deltaX: l2 } = T2;
-      T2.move(e2), i2.value == "vertical" && (d2.value && t2.value < 0 || c2.value && t2.value >= 0) && T2.isVertical() && (f(e2), S(X(t2.value))), i2.value == "horizontal" && (h2.value && l2.value >= 0 || p2.value && l2.value < 0) && T2.isHorizontal() && (f(e2), S(X(l2.value)));
-    } else
-      f(e2);
-  }, touchEnd: () => {
-    if (w()) {
-      const { deltaY: e2, deltaX: t2 } = T2;
-      if (m2.status === "loosing") {
-        let l2 = 0;
-        i2.value == "vertical" && c2.value && e2.value > 0 && (l2 = 50, r2("downRefresh", Y)), i2.value == "vertical" && d2.value && e2.value < 0 && (l2 = -50, r2("refresh", Y)), i2.value == "horizontal" && h2.value && t2.value > 0 && (l2 = 50, r2("downRefresh", Y)), i2.value == "horizontal" && p2.value && t2.value < 0 && (l2 = -50, r2("refresh", Y)), S(l2, true);
-      } else
-        S(0);
+}
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation)
+    event.stopPropagation();
+}
+const { componentName, create } = createComponent("pullrefresh");
+const _sfc_main = create({
+  props: {
+    useWindow: {
+      type: Boolean,
+      default: true
+    },
+    containerId: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    pullingText: {
+      type: Object,
+      default: {
+        top: "\u4E0B\u62C9\u5237\u65B0",
+        bottom: "\u4E0A\u62C9\u52A0\u8F7D",
+        left: "\u5DE6\u6ED1\u5237\u65B0",
+        right: "\u53F3\u6ED1\u52A0\u8F7D"
+      }
+    },
+    loosingText: {
+      type: Object,
+      default: {
+        top: "\u677E\u624B\u91CA\u653E\u5237\u65B0",
+        bottom: "\u677E\u624B\u91CA\u653E\u5237\u65B0",
+        left: "\u91CA\u653E\u5237\u65B0",
+        right: "\u52A0\u8F7D\u66F4\u591A"
+      }
+    },
+    loadingText: {
+      type: Object,
+      default: {
+        top: "\u52A0\u8F7D\u4E2D...",
+        bottom: "\u52A0\u8F7D\u4E2D...",
+        left: "\u52A0\u8F7D\u4E2D...",
+        right: "\u52A0\u8F7D\u4E2D..."
+      }
     }
-  }, getStyle: x, reachBottom: d2, reachTop: c2, reachRight: p2, reachLeft: h2, getBottomStyle: y, refreshTopTem: z, refreshBottomTem: M, ...t(m2) };
-} }), b = { class: "pullrefresh-content", ref: "pull" };
-var T = h(g, [["render", function(e2, t2, l2, a2, o2, d2) {
-  return u(), r("view", { class: "nut-pullrefresh", ref: "scroller", style: n(e2.getStyle), onTouchstart: t2[0] || (t2[0] = (...t3) => e2.touchStart && e2.touchStart(...t3)), onTouchmove: t2[1] || (t2[1] = (...t3) => e2.touchMove && e2.touchMove(...t3)), onTouchend: t2[2] || (t2[2] = (...t3) => e2.touchEnd && e2.touchEnd(...t3)) }, [s("view", { class: i(["pullrefresh-top", e2.direction == "horizontal" ? "pullrefresh-top-h" : "pullrefresh-top-v"]) }, v(e2.refreshTopTem), 3), s("view", b, [c(e2.$slots, "default")], 512), s("view", { class: i(["pullrefresh-bottom", e2.direction == "horizontal" ? "pullrefresh-bottom-h" : "pullrefresh-bottom-v"]), style: n(e2.getBottomStyle) }, v(e2.refreshBottomTem), 7)], 36);
-}]]);
-export { T as default };
+  },
+  emits: ["refresh", "downRefresh"],
+  setup(props, { emit }) {
+    const { containerId, useWindow, direction, disabled } = toRefs(props);
+    const reachTop = ref(false);
+    const reachBottom = ref(false);
+    const reachLeft = ref(false);
+    const reachRight = ref(false);
+    const state = reactive({
+      status: "normal",
+      distance: 0,
+      duration: 0
+    });
+    let scrollEl = document.documentElement || document.body;
+    const scroller = ref(null);
+    const touch = useTouch();
+    const getStyle = computed(() => {
+      let style = {};
+      const { deltaY, deltaX } = touch;
+      if (direction.value == "vertical" && (reachTop.value && deltaY.value > 0 || reachBottom.value && deltaY.value < 0) && touch.isVertical()) {
+        style = {
+          transitionDuration: `${state.duration}ms`,
+          transform: state.distance ? `translate3d(0,${state.distance}px, 0)` : `translate3d(0,0,0)`
+        };
+      }
+      if (direction.value == "horizontal" && (reachLeft.value && deltaX.value > 0 || reachRight.value && deltaX.value < 0) && touch.isHorizontal()) {
+        style = {
+          transitionDuration: `${state.duration}ms`,
+          transform: state.distance ? `translate3d(${state.distance}px, 0,0)` : `translate3d(0,0,0)`
+        };
+      }
+      return style;
+    });
+    const getBottomStyle = computed(() => {
+      let style = {};
+      if (direction.value == "vertical" && reachBottom.value && touch.deltaY.value < 0 && touch.isVertical()) {
+        const dis = Math.abs(state.distance) < 50 ? -state.distance : 50;
+        style = {
+          height: dis + "px"
+        };
+      }
+      if (direction.value == "horizontal" && reachRight.value && touch.deltaX.value < 0 && touch.isVertical()) {
+        const dis = Math.abs(state.distance) < 50 ? -state.distance : 50;
+        style = {
+          width: dis + "px"
+        };
+      }
+      return style;
+    });
+    const refreshTopTem = computed(() => {
+      const { status, distance } = state;
+      const tag = direction.value == "vertical" ? "top" : "left";
+      if (status == "loading" && (reachTop.value || reachLeft.value) && distance > 0) {
+        return props.loadingText[tag];
+      }
+      if (status == "pulling" && (reachTop.value || reachLeft.value) && distance > 0) {
+        return props.pullingText[tag];
+      }
+      if (status == "loosing" && (reachTop.value || reachLeft.value) && distance > 0) {
+        return props.loosingText[tag];
+      }
+      return "";
+    });
+    const refreshBottomTem = computed(() => {
+      const { status, distance } = state;
+      const tag = direction.value == "vertical" ? "bottom" : "right";
+      if (status == "loading" && (reachBottom.value || reachRight.value) && distance < 0) {
+        return props.loadingText[tag];
+      }
+      if (status == "pulling" && (reachBottom.value || reachRight.value) && distance < 0) {
+        return props.pullingText[tag];
+      }
+      if (status == "loosing" && (reachBottom.value || reachRight.value) && distance < 0) {
+        return props.loosingText[tag];
+      }
+      return "";
+    });
+    const isTouchable = () => state.status !== "loading" && !disabled.value;
+    const setStatus = (distance, isLoading) => {
+      state.distance = distance;
+      if (isLoading) {
+        state.status = "loading";
+      } else if (distance === 0) {
+        state.status = "normal";
+      } else if (Math.abs(distance) < 50) {
+        state.status = "pulling";
+      } else {
+        state.status = "loosing";
+      }
+    };
+    const getParentElement = (el) => {
+      if (containerId.value != "") {
+        return document.querySelector(`#${containerId.value}`);
+      }
+      return el && el.parentNode;
+    };
+    onMounted(() => {
+      const parentElement = getParentElement(scroller);
+      let scrollElCopy = document.documentElement || document.body;
+      if (useWindow.value === false) {
+        scrollElCopy = parentElement;
+      }
+      scrollEl = scrollElCopy;
+    });
+    const ease = (distance) => {
+      const headHeight = 50;
+      if (distance > headHeight) {
+        if (distance < headHeight * 2) {
+          distance = headHeight + (distance - headHeight) / 2;
+        } else {
+          distance = headHeight * 1.5 + (distance - headHeight * 2) / 4;
+        }
+      }
+      return Math.round(distance);
+    };
+    const refreshDone = () => {
+      setStatus(0);
+    };
+    const touchStart = (event) => {
+      if (isTouchable()) {
+        if (direction.value == "vertical") {
+          const top = "scrollTop" in scrollEl ? scrollEl.scrollTop : 0;
+          reachTop.value = Math.max(top, 0) == 0 ? true : false;
+          const { scrollHeight, clientHeight, scrollTop } = scrollEl;
+          reachBottom.value = clientHeight + scrollTop == scrollHeight ? true : false;
+          if (reachTop.value || reachBottom.value) {
+            state.duration = 0;
+            touch.start(event);
+          }
+        } else {
+          const { scrollWidth, clientWidth, scrollLeft } = scrollEl;
+          const left = "scrollLeft" in scrollEl ? scrollEl.scrollLeft : 0;
+          reachLeft.value = Math.max(left, 0) == 0 ? true : false;
+          reachRight.value = clientWidth + scrollLeft == scrollWidth ? true : false;
+          if (reachLeft.value || reachRight.value) {
+            state.duration = 0;
+            touch.start(event);
+          }
+        }
+      } else {
+        preventDefault(event);
+      }
+    };
+    const touchMove = (event) => {
+      if (isTouchable()) {
+        const { deltaY, deltaX } = touch;
+        touch.move(event);
+        if (direction.value == "vertical" && (reachBottom.value && deltaY.value < 0 || reachTop.value && deltaY.value >= 0) && touch.isVertical()) {
+          preventDefault(event);
+          setStatus(ease(deltaY.value));
+        }
+        if (direction.value == "horizontal" && (reachLeft.value && deltaX.value >= 0 || reachRight.value && deltaX.value < 0) && touch.isHorizontal()) {
+          preventDefault(event);
+          setStatus(ease(deltaX.value));
+        }
+      } else {
+        preventDefault(event);
+      }
+    };
+    const touchEnd = () => {
+      if (isTouchable()) {
+        const { deltaY, deltaX } = touch;
+        if (state.status === "loosing") {
+          let dis = 0;
+          if (direction.value == "vertical" && reachTop.value && deltaY.value > 0) {
+            dis = 50;
+            emit("downRefresh", refreshDone);
+          }
+          if (direction.value == "vertical" && reachBottom.value && deltaY.value < 0) {
+            dis = -50;
+            emit("refresh", refreshDone);
+          }
+          if (direction.value == "horizontal" && reachLeft.value && deltaX.value > 0) {
+            dis = 50;
+            emit("downRefresh", refreshDone);
+          }
+          if (direction.value == "horizontal" && reachRight.value && deltaX.value < 0) {
+            dis = -50;
+            emit("refresh", refreshDone);
+          }
+          setStatus(dis, true);
+        } else {
+          setStatus(0);
+        }
+      }
+    };
+    return {
+      scroller,
+      touchStart,
+      touchMove,
+      touchEnd,
+      getStyle,
+      reachBottom,
+      reachTop,
+      reachRight,
+      reachLeft,
+      getBottomStyle,
+      refreshTopTem,
+      refreshBottomTem,
+      ...toRefs(state)
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "pullrefresh-content",
+  ref: "pull"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: "nut-pullrefresh",
+    ref: "scroller",
+    style: normalizeStyle(_ctx.getStyle),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass(["pullrefresh-top", _ctx.direction == "horizontal" ? "pullrefresh-top-h" : "pullrefresh-top-v"])
+    }, toDisplayString(_ctx.refreshTopTem), 3),
+    createElementVNode("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ], 512),
+    createElementVNode("view", {
+      class: normalizeClass(["pullrefresh-bottom", _ctx.direction == "horizontal" ? "pullrefresh-bottom-h" : "pullrefresh-bottom-v"]),
+      style: normalizeStyle(_ctx.getBottomStyle)
+    }, toDisplayString(_ctx.refreshBottomTem), 7)
+  ], 36);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Radio.js

@@ -1,28 +1,96 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject as e, computed as a, h as t } from "vue";
-import { c as l } from "./component.js";
-import i from "./Icon.js";
+import { inject, computed, h } from "vue";
+import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
 import "../locale/lang";
 import "./pxCheck.js";
-const { componentName: n, create: o } = l("radio"), s = o({ props: { disabled: { type: Boolean, default: false }, shape: { type: String, default: "round" }, label: { type: [String, Number], default: "" }, iconName: { type: String, default: "check-normal" }, iconActiveName: { type: String, default: "check-checked" }, iconSize: { type: [String, Number], default: "" }, iconClassPrefix: { type: String, default: "nut-icon" }, iconFontClassName: { type: String, default: "nutui-iconfont" } }, setup(l2, { emit: o2, slots: s2 }) {
-  let c = e("parent", null);
-  const u = a(() => c.label.value == l2.label), r = a(() => l2.disabled ? "nut-radio__icon--disable" : u.value ? "nut-radio__icon" : "nut-radio__icon--unchecked"), d = a(() => c.position), p = () => {
-    const { iconName: e2, iconSize: a2, iconActiveName: n2, iconClassPrefix: o3, iconFontClassName: s3 } = l2;
-    return t(i, { name: u.value ? n2 : e2, size: a2, class: r.value, classPrefix: o3, fontClassName: s3 });
-  }, m = () => {
-    var _a;
-    return t("view", { class: `${n}__label ${l2.disabled ? `${n}__label--disabled` : ""}` }, (_a = s2.default) == null ? void 0 : _a.call(s2));
-  }, b = () => {
-    u.value || l2.disabled || c.updateValue(l2.label);
-  };
-  let f = d.value === "left";
-  return () => {
-    var _a;
-    return t("view", { class: `${n} ${n}--${l2.shape} ${f ? `${n}--reverse` : ""}`, onClick: b }, [l2.shape == "button" ? t("view", { class: `${n}__button ${u.value && `${n}__button--active`} ${l2.disabled ? `${n}__button--disabled` : ""}` }, (_a = s2.default) == null ? void 0 : _a.call(s2)) : f ? [m(), p()] : [p(), m()]]);
-  };
-} });
-export { s as default };
+const { componentName, create } = createComponent("radio");
+const _sfc_main = create({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    shape: {
+      type: String,
+      default: "round"
+    },
+    label: {
+      type: [String, Number],
+      default: ""
+    },
+    iconName: {
+      type: String,
+      default: "check-normal"
+    },
+    iconActiveName: {
+      type: String,
+      default: "check-checked"
+    },
+    iconSize: {
+      type: [String, Number],
+      default: ""
+    },
+    iconClassPrefix: {
+      type: String,
+      default: "nut-icon"
+    },
+    iconFontClassName: {
+      type: String,
+      default: "nutui-iconfont"
+    }
+  },
+  setup(props, { emit, slots }) {
+    let parent = inject("parent", null);
+    const isCurValue = computed(() => {
+      return parent.label.value == props.label;
+    });
+    const color = computed(() => {
+      return !props.disabled ? isCurValue.value ? "nut-radio__icon" : "nut-radio__icon--unchecked" : "nut-radio__icon--disable";
+    });
+    const position = computed(() => {
+      return parent.position;
+    });
+    const renderIcon = () => {
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
+      return h(_sfc_main$1, {
+        name: isCurValue.value ? iconActiveName : iconName,
+        size: iconSize,
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
+      });
+    };
+    const renderLabel = () => {
+      var _a;
+      return h("view", {
+        class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ""}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+    const renderButton = () => {
+      var _a;
+      return h("view", {
+        class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${props.disabled ? `${componentName}__button--disabled` : ""}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+    const handleClick = () => {
+      if (isCurValue.value || props.disabled)
+        return;
+      parent.updateValue(props.label);
+    };
+    let reverseState = position.value === "left";
+    return () => {
+      return h("view", {
+        class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ""}`,
+        onClick: handleClick
+      }, [
+        props.shape == "button" ? renderButton() : reverseState ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()]
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/packages/_es/RadioGroup.js

@@ -1,13 +1,42 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { provide as e, readonly as t, computed as o, watch as a, h as l } from "vue";
-import { c as i } from "./component.js";
+import { provide, readonly, computed, watch, h } from "vue";
+import { c as createComponent } from "./component.js";
 import "../locale/lang";
-const { componentName: r, create: n } = i("radiogroup"), p = n({ props: { modelValue: { type: [Number, String, Boolean], default: "" }, direction: { type: String, default: "vertical" }, textPosition: { type: String, default: "right" } }, emits: ["change", "update:modelValue"], setup: (i2, { emit: n2, slots: p2 }) => (e("parent", { label: t(o(() => i2.modelValue)), position: i2.textPosition, updateValue: (e2) => n2("update:modelValue", e2) }), a(() => i2.modelValue, (e2) => n2("change", e2)), () => {
-  var _a;
-  return l("view", { class: `${r} ${r}--${i2.direction}` }, (_a = p2.default) == null ? void 0 : _a.call(p2));
-}) });
-export { p as default };
+const { componentName, create } = createComponent("radiogroup");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    textPosition: {
+      type: String,
+      default: "right"
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit, slots }) {
+    const updateValue = (value) => emit("update:modelValue", value);
+    provide("parent", {
+      label: readonly(computed(() => props.modelValue)),
+      position: props.textPosition,
+      updateValue
+    });
+    watch(() => props.modelValue, (value) => emit("change", value));
+    return () => {
+      var _a;
+      return h("view", {
+        class: `${componentName} ${componentName}--${props.direction}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+export { _sfc_main as default };