@nutui/nutui 3.1.10 → 3.1.12-beta.1

package/dist/packages/_es/Sku.js

@@ -0,0 +1,508 @@
+/*!
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createBlock, createCommentVNode, toDisplayString, ref, watch, onMounted, Fragment, renderList, normalizeClass, createVNode, withCtx, createSlots } from "vue";
+import { c as createComponent } from "./component.js";
+import { T as TypeOfFun } from "./util.js";
+const { componentName: componentName$4, create: create$4 } = createComponent("sku-header");
+var _sfc_main$4 = create$4({
+  props: {
+    goods: {
+      type: Object,
+      default: {}
+    }
+  },
+  emits: [],
+  setup(props, { emit, slots }) {
+    const getSlots = (name) => slots[name];
+    return {
+      getSlots
+    };
+  }
+});
+const _hoisted_1$4 = { class: "nut-sku-header" };
+const _hoisted_2$4 = ["src"];
+const _hoisted_3$3 = { class: "nut-sku-header-right" };
+const _hoisted_4$3 = {
+  key: 3,
+  class: "nut-sku-header-right-extra"
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_price = resolveComponent("nut-price");
+  return openBlock(), createElementBlock("view", _hoisted_1$4, [
+    createElementVNode("img", {
+      src: _ctx.goods.imagePath
+    }, null, 8, _hoisted_2$4),
+    createElementVNode("view", _hoisted_3$3, [
+      _ctx.getSlots("sku-header-price") ? renderSlot(_ctx.$slots, "sku-header-price", { key: 0 }) : (openBlock(), createBlock(_component_nut_price, {
+        key: 1,
+        price: _ctx.goods.price,
+        needSymbol: true,
+        thousands: false
+      }, null, 8, ["price"])),
+      _ctx.getSlots("sku-header-extra") ? renderSlot(_ctx.$slots, "sku-header-extra", { key: 2 }) : createCommentVNode("", true),
+      _ctx.goods.skuId && !_ctx.getSlots("sku-header-extra") ? (openBlock(), createElementBlock("view", _hoisted_4$3, "\u5546\u54C1\u7F16\u53F7\uFF1A" + toDisplayString(_ctx.goods.skuId), 1)) : createCommentVNode("", true)
+    ])
+  ]);
+}
+_sfc_main$4.render = _sfc_render$4;
+const { componentName: componentName$3, create: create$3 } = createComponent("sku-select");
+var _sfc_main$3 = create$3({
+  props: {
+    sku: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["selectSku"],
+  setup(props, { emit }) {
+    const skuInfo = ref([]);
+    watch(() => props.sku, (value) => {
+      skuInfo.value = [].slice.call(value);
+    }, { deep: true });
+    onMounted(() => {
+      if (props.sku.length > 0) {
+        skuInfo.value = [].slice.call(props.sku);
+      }
+    });
+    const changeSaleChild = (attrItem, index, parentItem, parentIndex) => {
+      if (attrItem.checkFlag || attrItem.disable) {
+        return;
+      }
+      emit("selectSku", {
+        sku: attrItem,
+        skuIndex: index,
+        parentSku: parentItem,
+        parentIndex
+      });
+    };
+    return {
+      skuInfo,
+      changeSaleChild
+    };
+  }
+});
+const _hoisted_1$3 = { class: "nut-sku-select" };
+const _hoisted_2$3 = { class: "nut-sku-select-item-title" };
+const _hoisted_3$2 = { class: "nut-sku-select-item-skus" };
+const _hoisted_4$2 = ["onClick"];
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", _hoisted_1$3, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skuInfo, (item, index) => {
+      return openBlock(), createElementBlock("view", {
+        class: "nut-sku-select-item",
+        key: item.id
+      }, [
+        createElementVNode("view", _hoisted_2$3, toDisplayString(item.name), 1),
+        createElementVNode("view", _hoisted_3$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (itemAttr, itemAttrIndex) => {
+            return openBlock(), createElementBlock("view", {
+              class: normalizeClass(["nut-sku-select-item-skus-sku", [{ active: !itemAttr.disable && itemAttr.active }, { disable: itemAttr.disable }]]),
+              onClick: ($event) => _ctx.changeSaleChild(itemAttr, itemAttrIndex, item, index),
+              key: itemAttr.name
+            }, toDisplayString(itemAttr.name), 11, _hoisted_4$2);
+          }), 128))
+        ])
+      ]);
+    }), 128))
+  ]);
+}
+_sfc_main$3.render = _sfc_render$3;
+const { componentName: componentName$2, create: create$2 } = createComponent("sku-stepper");
+var _sfc_main$2 = create$2({
+  props: {
+    stepperMax: {
+      type: [Number, String],
+      default: 99999
+    },
+    stepperMin: {
+      type: [Number, String],
+      default: 1
+    },
+    stepperExtraText: {
+      type: [Function, Boolean],
+      default: false
+    },
+    stepperTitle: {
+      type: String,
+      default: "\u8D2D\u4E70\u6570\u91CF"
+    }
+  },
+  emits: ["click", "changeSku", "changeStepper", "clickBtnOptions", "overLimit", "reduce", "add"],
+  setup(props, { emit }) {
+    const goodsCount = ref(props.stepperMin);
+    onMounted(() => {
+      goodsCount.value = props.stepperMin;
+    });
+    const getExtraText = () => {
+      const { stepperExtraText } = props;
+      if (stepperExtraText && TypeOfFun(stepperExtraText) == "function") {
+        return stepperExtraText();
+      } else {
+        return "";
+      }
+    };
+    const add = (value) => {
+      emit("add", value);
+    };
+    const reduce = (value) => {
+      emit("reduce", value);
+    };
+    const overlimit = (e, action) => {
+      emit("overLimit", {
+        action,
+        value: parseInt(goodsCount.value + "")
+      });
+    };
+    const changeStepper = (value) => {
+      goodsCount.value = value;
+      emit("changeStepper", value);
+    };
+    return {
+      goodsCount,
+      add,
+      reduce,
+      overlimit,
+      getExtraText,
+      changeStepper
+    };
+  }
+});
+const _hoisted_1$2 = { class: "nut-sku-stepper" };
+const _hoisted_2$2 = { class: "nut-sku-stepper-title" };
+const _hoisted_3$1 = ["innerHTML"];
+const _hoisted_4$1 = { class: "nut-sku-stepper-count" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_inputnumber = resolveComponent("nut-inputnumber");
+  return openBlock(), createElementBlock("view", _hoisted_1$2, [
+    createElementVNode("view", _hoisted_2$2, toDisplayString(_ctx.stepperTitle), 1),
+    createElementVNode("view", {
+      class: "nut-sku-stepper-limit",
+      innerHTML: _ctx.getExtraText()
+    }, null, 8, _hoisted_3$1),
+    createElementVNode("view", _hoisted_4$1, [
+      createVNode(_component_nut_inputnumber, {
+        modelValue: _ctx.goodsCount,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.goodsCount = $event),
+        min: _ctx.stepperMin,
+        max: _ctx.stepperMax,
+        onAdd: _ctx.add,
+        onReduce: _ctx.reduce,
+        onOverlimit: _ctx.overlimit,
+        onChange: _ctx.changeStepper
+      }, null, 8, ["modelValue", "min", "max", "onAdd", "onReduce", "onOverlimit", "onChange"])
+    ])
+  ]);
+}
+_sfc_main$2.render = _sfc_render$2;
+const { componentName: componentName$1, create: create$1 } = createComponent("sku-operate");
+var _sfc_main$1 = create$1({
+  props: {
+    btnOptions: {
+      type: Array,
+      default: () => ["confirm"]
+    },
+    btnExtraText: {
+      type: String,
+      default: ""
+    },
+    buyText: {
+      type: String,
+      default: "\u7ACB\u5373\u8D2D\u4E70"
+    },
+    addCartText: {
+      type: String,
+      default: "\u52A0\u5165\u8D2D\u7269\u8F66"
+    },
+    confirmText: {
+      type: String,
+      default: "\u786E\u5B9A"
+    }
+  },
+  emits: ["click", "changeSku", "changeBuyCount", "clickBtnOperate"],
+  setup(props, { emit, slots }) {
+    const getBtnDesc = (type) => {
+      let mapD = {
+        confirm: props.confirmText,
+        cart: props.addCartText,
+        buy: props.buyText
+      };
+      return mapD[type];
+    };
+    onMounted(() => {
+      console.log(slots);
+    });
+    const getSlots = (name) => slots[name];
+    const clickBtnOperate = (btn) => {
+      emit("clickBtnOperate", btn);
+    };
+    return {
+      getBtnDesc,
+      clickBtnOperate,
+      getSlots
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "nut-sku-operate"
+};
+const _hoisted_2$1 = ["innerHTML"];
+const _hoisted_3 = {
+  key: 1,
+  class: "nut-sku-operate-btn"
+};
+const _hoisted_4 = ["onClick"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.btnOptions.length > 0 ? (openBlock(), createElementBlock("view", _hoisted_1$1, [
+    _ctx.btnExtraText ? (openBlock(), createElementBlock("view", {
+      key: 0,
+      class: "nut-sku-operate-desc",
+      innerHTML: _ctx.btnExtraText
+    }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "operate-btn"),
+    !_ctx.getSlots("operate-btn") ? (openBlock(), createElementBlock("view", _hoisted_3, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.btnOptions, (btn, i) => {
+        return openBlock(), createElementBlock("view", {
+          class: normalizeClass([`nut-sku-operate-btn-${btn}`, "nut-sku-operate-btn-item"]),
+          key: i,
+          onClick: ($event) => _ctx.clickBtnOperate(btn)
+        }, toDisplayString(_ctx.getBtnDesc(btn)), 11, _hoisted_4);
+      }), 128))
+    ])) : createCommentVNode("", true)
+  ])) : createCommentVNode("", true);
+}
+_sfc_main$1.render = _sfc_render$1;
+const { componentName, create } = createComponent("sku");
+var _sfc_main = create({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    sku: {
+      type: Array,
+      default: []
+    },
+    goods: {
+      type: Object,
+      default: {}
+    },
+    showSaleLimit: {
+      type: Boolean,
+      default: false
+    },
+    stepperMax: {
+      type: [Number, String],
+      default: 99999
+    },
+    stepperMin: {
+      type: [Number, String],
+      default: 1
+    },
+    purchased: {
+      type: [Number, String],
+      default: 0
+    },
+    showSaleLowest: {
+      type: Boolean,
+      default: false
+    },
+    btnOptions: {
+      type: Array,
+      default: () => ["confirm"]
+    },
+    stepperTitle: {
+      type: String,
+      default: "\u8D2D\u4E70\u6570\u91CF"
+    },
+    saleLowestText: {
+      type: [Function, Boolean],
+      default: false
+    },
+    saleLimitText: {
+      type: [Function, Boolean],
+      default: false
+    },
+    purchasedText: {
+      type: [Function, Boolean],
+      default: false
+    },
+    buyText: {
+      type: String,
+      default: "\u7ACB\u5373\u8D2D\u4E70"
+    },
+    addCartText: {
+      type: String,
+      default: "\u52A0\u5165\u8D2D\u7269\u8F66"
+    },
+    confirmText: {
+      type: String,
+      default: "\u786E\u5B9A"
+    }
+  },
+  emits: [
+    "update:visible",
+    "selectSku",
+    "changeStepper",
+    "clickBtnOperate",
+    "clickCloseIcon",
+    "clickOverlay",
+    "close",
+    "reduce",
+    "add",
+    "overLimit"
+  ],
+  components: {
+    SkuHeader: _sfc_main$4,
+    SkuSelect: _sfc_main$3,
+    SkuStepper: _sfc_main$2,
+    SkuOperate: _sfc_main$1
+  },
+  setup(props, { emit, slots }) {
+    const showPopup = ref(props.visible);
+    const goodsCount = ref(props.stepperMin);
+    watch(() => props.visible, (value) => {
+      showPopup.value = value;
+    });
+    watch(() => showPopup.value, (value) => {
+      if (value == false) {
+        close();
+      }
+    });
+    const getSlots = (name) => slots[name];
+    const selectSku = (skus) => {
+      emit("selectSku", skus);
+    };
+    const changeStepper = (value) => {
+      goodsCount.value = value;
+      emit("changeStepper", value);
+    };
+    const add = (value) => {
+      emit("add", value);
+    };
+    const reduce = (value) => {
+      emit("reduce", value);
+    };
+    const stepperOverLimit = (count) => {
+      emit("overLimit", count);
+    };
+    const clickBtnOperate = (btn) => {
+      emit("clickBtnOperate", {
+        type: btn,
+        value: goodsCount.value
+      });
+    };
+    const closePopup = (type) => {
+      if (type == "icon") {
+        emit("click-close-icon");
+      }
+      if (type == "overlay") {
+        emit("click-overlay");
+      }
+      if (type == "close") {
+        emit("close");
+      }
+      showPopup.value = false;
+    };
+    const close = () => {
+      emit("update:visible", false);
+    };
+    return {
+      showPopup,
+      closePopup,
+      selectSku,
+      changeStepper,
+      stepperOverLimit,
+      clickBtnOperate,
+      add,
+      reduce,
+      getSlots
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-sku" };
+const _hoisted_2 = { class: "nut-sku-content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_sku_header = resolveComponent("sku-header");
+  const _component_SkuSelect = resolveComponent("SkuSelect");
+  const _component_sku_stepper = resolveComponent("sku-stepper");
+  const _component_sku_operate = resolveComponent("sku-operate");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createBlock(_component_nut_popup, {
+    position: "bottom",
+    closeable: "",
+    round: "",
+    visible: _ctx.showPopup,
+    "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event),
+    onClickCloseIcon: _cache[1] || (_cache[1] = ($event) => _ctx.closePopup("icon")),
+    onClickOverlay: _cache[2] || (_cache[2] = ($event) => _ctx.closePopup("overlay")),
+    onClose: _cache[3] || (_cache[3] = ($event) => _ctx.closePopup("close")),
+    style: { "height": "75%" }
+  }, {
+    default: withCtx(() => [
+      createElementVNode("view", _hoisted_1, [
+        renderSlot(_ctx.$slots, "sku-header"),
+        !_ctx.getSlots("sku-header") ? (openBlock(), createBlock(_component_sku_header, {
+          key: 0,
+          goods: _ctx.goods
+        }, createSlots({ _: 2 }, [
+          _ctx.getSlots("sku-header-price") ? {
+            name: "sku-header-price",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "sku-header-price")
+            ])
+          } : void 0,
+          _ctx.getSlots("sku-header-extra") ? {
+            name: "sku-header-extra",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "sku-header-extra")
+            ])
+          } : void 0
+        ]), 1032, ["goods"])) : createCommentVNode("", true),
+        createElementVNode("view", _hoisted_2, [
+          renderSlot(_ctx.$slots, "sku-select-top"),
+          renderSlot(_ctx.$slots, "sku-select"),
+          !_ctx.getSlots("sku-select") ? (openBlock(), createBlock(_component_SkuSelect, {
+            key: 0,
+            sku: _ctx.sku,
+            onSelectSku: _ctx.selectSku
+          }, null, 8, ["sku", "onSelectSku"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "sku-stepper"),
+          !_ctx.getSlots("sku-stepper") ? (openBlock(), createBlock(_component_sku_stepper, {
+            key: 1,
+            goods: _ctx.goods,
+            stepperTitle: _ctx.stepperTitle,
+            stepperMax: _ctx.stepperMax,
+            stepperMin: _ctx.stepperMin,
+            purchased: _ctx.purchased,
+            showSaleLimit: _ctx.showSaleLimit,
+            showSaleLowest: _ctx.showSaleLowest,
+            saleLowestText: _ctx.saleLowestText,
+            saleLimitText: _ctx.saleLimitText,
+            purchasedText: _ctx.purchasedText,
+            onAdd: _ctx.add,
+            onReduce: _ctx.reduce,
+            onChangeStepper: _ctx.changeStepper,
+            onStepperOverLimit: _ctx.stepperOverLimit
+          }, null, 8, ["goods", "stepperTitle", "stepperMax", "stepperMin", "purchased", "showSaleLimit", "showSaleLowest", "saleLowestText", "saleLimitText", "purchasedText", "onAdd", "onReduce", "onChangeStepper", "onStepperOverLimit"])) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "sku-stepper-bottom")
+        ]),
+        renderSlot(_ctx.$slots, "sku-operate"),
+        !_ctx.getSlots("sku-operate") ? (openBlock(), createBlock(_component_sku_operate, {
+          key: 1,
+          btnOptions: _ctx.btnOptions,
+          buyText: _ctx.buyText,
+          addCartText: _ctx.addCartText,
+          confirmText: _ctx.confirmText,
+          onClickBtnOperate: _ctx.clickBtnOperate
+        }, null, 8, ["btnOptions", "buyText", "addCartText", "confirmText", "onClickBtnOperate"])) : createCommentVNode("", true)
+      ])
+    ]),
+    _: 3
+  }, 8, ["visible"]);
+}
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };

package/dist/packages/_es/Step.js

@@ -17,16 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = typeof require !== "undefined" ? require : (x) => {
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+};
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
 import { getCurrentInstance, inject, reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, Fragment, toDisplayString, createCommentVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { create, componentName } = createComponent("step");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     title: {
       type: String,
@@ -56,9 +58,9 @@ const _sfc_main = create({
     const state = reactive({
       dot: parent.props.progressDot
     });
-    const index2 = computed(() => parent.state.children.indexOf(proxy) + 1);
+    const index = computed(() => parent.state.children.indexOf(proxy) + 1);
     const getCurrentStatus = () => {
-      const activeIndex = index2.value;
+      const activeIndex = index.value;
       if (activeIndex < +parent.props.current)
         return "finish";
       return activeIndex === +parent.props.current ? "process" : "wait";
@@ -74,7 +76,7 @@ const _sfc_main = create({
       };
     });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
-      index: index2,
+      index,
       classes
     });
   }
@@ -117,5 +119,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };

package/dist/packages/_es/Steps.js

@@ -1,12 +1,12 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
 import { reactive, computed, provide, h } from "vue";
 import { c as createComponent } from "./component.js";
 const { create, componentName } = createComponent("steps");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     direction: {
       type: String,

package/dist/packages/_es/Swipe.js

@@ -17,17 +17,21 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = typeof require !== "undefined" ? require : (x) => {
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+};
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
+import Taro from "@tarojs/taro";
 import { u as useTouch } from "./index.js";
-import { computed, ref, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { computed, ref, onMounted, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { u as useTaroRect } from "./index2.js";
 const { componentName, create } = createComponent("swipe");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     name: {
       type: String,
@@ -48,21 +52,29 @@ const _sfc_main = create({
   },
   emits: ["open", "close"],
   setup(props, { emit }) {
+    const refRandomId = Math.random().toString(36).slice(-8);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-    const getRefWidth = (ref2) => {
-      var _a;
-      return ((_a = ref2.value) == null ? void 0 : _a.clientWidth) || 0;
+    const getRefWidth = async (ref2) => {
+      let rect = await useTaroRect(ref2, Taro);
+      return rect.width || 0;
     };
-    const leftRef = ref(), leftRefWidth = computed(() => {
-      return getRefWidth(leftRef);
-    });
-    const rightRef = ref(), rightRefWidth = computed(() => {
-      return getRefWidth(rightRef);
+    const leftRef = ref();
+    const leftRefWidth = ref(0);
+    const rightRef = ref();
+    const rightRefWidth = ref(0);
+    const initWidth = async () => {
+      leftRefWidth.value = await getRefWidth(leftRef);
+      rightRefWidth.value = await getRefWidth(rightRef);
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        initWidth();
+      }, 100);
     });
     let opened = false;
     let position = "";
@@ -122,7 +134,7 @@ const _sfc_main = create({
           return;
         touch.start(event);
       },
-      onTouchMove(event) {
+      async onTouchMove(event) {
         if (props.disabled)
           return;
         touch.move(event);
@@ -168,20 +180,15 @@ const _sfc_main = create({
     }, touchMethods), {
       leftRef,
       rightRef,
+      refRandomId,
       open,
       close
     });
   }
 });
-const _hoisted_1 = {
-  class: "nut-swipe__left",
-  ref: "leftRef"
-};
+const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "nut-swipe__content" };
-const _hoisted_3 = {
-  class: "nut-swipe__right",
-  ref: "rightRef"
-};
+const _hoisted_3 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -191,16 +198,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
     onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
   }, [
-    createElementVNode("view", _hoisted_1, [
+    createElementVNode("view", {
+      class: "nut-swipe__left",
+      ref: "leftRef",
+      id: "leftRef-" + _ctx.refRandomId
+    }, [
       renderSlot(_ctx.$slots, "left")
-    ], 512),
+    ], 8, _hoisted_1),
     createElementVNode("view", _hoisted_2, [
       renderSlot(_ctx.$slots, "default")
     ]),
-    createElementVNode("view", _hoisted_3, [
+    createElementVNode("view", {
+      class: "nut-swipe__right",
+      ref: "rightRef",
+      id: "rightRef-" + _ctx.refRandomId
+    }, [
       renderSlot(_ctx.$slots, "right")
-    ], 512)
+    ], 8, _hoisted_3)
   ], 38);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };