@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/packages/_es/Toast.js

@@ -1,20 +1,18 @@
 /*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
+* @nutui/nutui v4.0.0-beta.0 Mon Dec 26 2022 00:00:21 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, onMounted, watch, computed, resolveComponent, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, createVNode, mergeProps, createCommentVNode, toDisplayString, vShow, render } from "vue";
-import { c as createComponent } from "./component.js";
-import _sfc_main$1 from "./Icon.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { reactive, onMounted, watch, computed, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, resolveDynamicComponent, createCommentVNode, toDisplayString, vShow, createVNode, render } from "vue";
+import { c as createComponent } from "./component.fb9ce7ad.js";
+import { r as renderIcon } from "./renderIcon.f32ed340.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.bf57b04e.js";
 import "../locale/lang";
-import { C as CreateComponent } from "./mountComponent.js";
-import "./pxCheck.js";
+import { C as CreateComponent } from "./mountComponent.dddeb43c.js";
+import { Success, Failure, Tips, Loading } from "@nutui/icons-vue";
 const { create } = createComponent("toast");
 const _sfc_main = create({
-  components: {
-    [_sfc_main$1.name]: _sfc_main$1
-  },
+  components: {},
   props: {
     id: String,
     msg: String,
@@ -36,11 +34,11 @@ const _sfc_main = create({
       type: [String, Number],
       default: "base"
     },
-    iconSize: {
-      type: String,
-      default: "20"
+    icon: {
+      type: Object,
+      default: () => {
+      }
     },
-    icon: String,
     textAlignCenter: {
       type: Boolean,
       default: true
@@ -148,7 +146,8 @@ const _sfc_main = create({
       hasIcon,
       toastBodyClass,
       toastIconWrapperClass,
-      onAfterLeave
+      onAfterLeave,
+      renderIcon
     };
   }
 });
@@ -158,7 +157,6 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createBlock(Transition, {
     name: "toast-fade",
     onAfterLeave: _ctx.onAfterLeave
@@ -183,10 +181,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             class: normalizeClass(_ctx.toastIconWrapperClass)
           }, [
-            createVNode(_component_nut_icon, mergeProps({ size: _ctx.iconSize }, _ctx.$attrs, {
-              color: "#ffffff",
-              name: _ctx.icon
-            }), null, 16, ["size", "name"])
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon)), { color: "#ffffff" }))
           ], 2)) : createCommentVNode("", true),
           _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
           createElementVNode("view", {
@@ -201,7 +196,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["onAfterLeave"]);
 }
-var Toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 const defaultOptions = {
   msg: "",
   id: "",
@@ -291,19 +286,19 @@ const ToastFunction = {
   },
   success(msg, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: "success", ...opts, msg, type: "success" });
+    return mountToast({ icon: Success, ...opts, msg, type: "success" });
   },
   fail(msg, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: "failure", ...opts, msg, type: "fail" });
+    return mountToast({ icon: Failure, ...opts, msg, type: "fail" });
   },
   warn(msg, opts = {}) {
     errorMsg(msg);
-    return mountToast({ icon: "tips", ...opts, msg, type: "warn" });
+    return mountToast({ icon: Tips, ...opts, msg, type: "warn" });
   },
   loading(msg, opts = {}) {
     return mountToast({
-      icon: "loading",
+      icon: Loading,
       ...opts,
       msg,
       type: "loading"
@@ -317,4 +312,8 @@ const ToastFunction = {
     app.config.globalProperties.$toast = ToastFunction;
   }
 };
-export { Toast, ToastFunction, ToastFunction as default };
+export {
+  Toast,
+  ToastFunction,
+  ToastFunction as default
+};

package/dist/packages/_es/Tour.js

@@ -0,0 +1,270 @@
+/*!
+* @nutui/nutui v4.0.0-beta.0 Mon Dec 26 2022 00:00:21 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, ref, computed, onMounted, watch, toRefs, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, vShow, Fragment, renderList, normalizeStyle, createCommentVNode, createVNode, withCtx, renderSlot, toDisplayString } from "vue";
+import { c as createComponent } from "./component.fb9ce7ad.js";
+import { u as useRect } from "./index.af02c42d.js";
+import { Close } from "@nutui/icons-vue";
+import Popover from "./Popover.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.bf57b04e.js";
+import "../locale/lang";
+import "./renderIcon.f32ed340.js";
+import "./index.4ed42c18.js";
+import "./Overlay.js";
+const { create } = createComponent("tour");
+const _sfc_main = create({
+  components: {
+    [Popover.name]: Popover,
+    Close
+  },
+  props: {
+    visible: { type: Boolean, default: false },
+    type: {
+      type: String,
+      default: "step"
+    },
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    location: {
+      type: String,
+      default: "bottom"
+    },
+    current: {
+      type: Number,
+      default: 0
+    },
+    nextStepTxt: {
+      type: String,
+      default: "\u4E0B\u4E00\u6B65"
+    },
+    prevStepTxt: {
+      type: String,
+      default: "\u4E0A\u4E00\u6B65"
+    },
+    completeTxt: {
+      type: String,
+      default: "\u5B8C\u6210"
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    offset: {
+      type: Array,
+      default: [8, 10]
+    },
+    bgColor: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: String,
+      default: "light"
+    },
+    maskWidth: {
+      type: [Number, String],
+      default: ""
+    },
+    maskHeight: {
+      type: [Number, String],
+      default: ""
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    },
+    showPrevStep: {
+      type: Boolean,
+      default: true
+    },
+    showTitleBar: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:visible", "change", "close"],
+  setup(props, { emit }) {
+    const state = reactive({
+      showTour: props.visible,
+      showPopup: false,
+      active: 0
+    });
+    const maskRect = ref({});
+    const classes = computed(() => {
+      const prefixCls = "nut-tour";
+      return `${prefixCls}`;
+    });
+    const maskStyle = computed(() => {
+      const { offset, maskWidth, maskHeight } = props;
+      const { width, height, left, top } = maskRect.value;
+      const center = [left + width / 2, top + height / 2];
+      const w = Number(maskWidth ? maskWidth : width);
+      const h = Number(maskHeight ? maskHeight : height);
+      const styles = {
+        width: `${w + +offset[1] * 2}px`,
+        height: `${h + +offset[0] * 2}px`,
+        top: `${center[1] - h / 2 - +offset[0]}px`,
+        left: `${center[0] - w / 2 - +offset[1]}px`
+      };
+      return styles;
+    });
+    const changeStep = (type) => {
+      if (type == "next") {
+        state.active = state.active + 1;
+      } else {
+        state.active = state.active - 1;
+      }
+      state.showPopup = false;
+      nextTick(() => {
+        state.showPopup = true;
+        getRootPosition();
+      });
+      emit("change", state.active);
+    };
+    const getRootPosition = () => {
+      const el = document.querySelector(`#${props.steps[state.active].target}`);
+      const rect = useRect(el);
+      maskRect.value = rect;
+    };
+    const close = () => {
+      state.showTour = false;
+      state.showPopup = false;
+      emit("close", state.active);
+      emit("update:visible", false);
+    };
+    const handleClickMask = () => {
+      props.closeOnClickOverlay && close();
+    };
+    onMounted(() => {
+      state.active = 0;
+      getRootPosition();
+    });
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          getRootPosition();
+        }
+        state.active = 0;
+        state.showTour = val;
+        state.showPopup = val;
+      }
+    );
+    return {
+      ...toRefs(state),
+      classes,
+      maskStyle,
+      changeStep,
+      close,
+      handleClickMask
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-tour-content"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-tour-content-top"
+};
+const _hoisted_3 = { class: "nut-tour-content-inner" };
+const _hoisted_4 = { class: "nut-tour-content-bottom" };
+const _hoisted_5 = { class: "nut-tour-content-bottom-init" };
+const _hoisted_6 = { class: "nut-tour-content-bottom-operate" };
+const _hoisted_7 = {
+  key: 1,
+  class: "nut-tour-content nut-tour-content-tile"
+};
+const _hoisted_8 = { class: "nut-tour-content-inner" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Close = resolveComponent("Close");
+  const _component_nut_popover = resolveComponent("nut-popover");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    withDirectives(createElementVNode("div", {
+      class: "nut-tour-masked",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickMask && _ctx.handleClickMask(...args))
+    }, null, 512), [
+      [vShow, _ctx.showTour]
+    ]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.steps, (step, i) => {
+      return openBlock(), createElementBlock("div", {
+        key: i,
+        style: { "height": "0" }
+      }, [
+        i == _ctx.active ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _ctx.showTour ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["nut-tour-mask", [_ctx.mask ? "" : "nut-tour-mask-none"]]),
+            style: normalizeStyle(_ctx.maskStyle),
+            id: "nut-tour-popid"
+          }, null, 6)) : createCommentVNode("", true),
+          createVNode(_component_nut_popover, {
+            visible: _ctx.showPopup,
+            "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => _ctx.showPopup = $event),
+            location: step.location || _ctx.location,
+            targetId: "nut-tour-popid",
+            bgColor: _ctx.bgColor,
+            theme: _ctx.theme,
+            "close-on-click-outside": false,
+            offset: step.popoverOffset || [0, 12],
+            arrowOffset: step.arrowOffset || 0
+          }, {
+            content: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                _ctx.type == "step" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  _ctx.showTitleBar ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                    createElementVNode("div", {
+                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.close && _ctx.close(...args))
+                    }, [
+                      createVNode(_component_Close, { class: "nut-tour-content-top-close" })
+                    ])
+                  ])) : createCommentVNode("", true),
+                  createElementVNode("div", _hoisted_3, toDisplayString(step.content), 1),
+                  createElementVNode("div", _hoisted_4, [
+                    createElementVNode("div", _hoisted_5, toDisplayString(_ctx.active + 1) + "/" + toDisplayString(_ctx.steps.length), 1),
+                    createElementVNode("div", _hoisted_6, [
+                      renderSlot(_ctx.$slots, "prevStep", {}, () => [
+                        _ctx.active != 0 && _ctx.showPrevStep ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: "nut-tour-content-bottom-operate-btn",
+                          onClick: _cache[2] || (_cache[2] = ($event) => _ctx.changeStep("prev"))
+                        }, toDisplayString(_ctx.prevStepTxt), 1)) : createCommentVNode("", true)
+                      ]),
+                      _ctx.steps.length - 1 == _ctx.active ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: "nut-tour-content-bottom-operate-btn active",
+                        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.close && _ctx.close(...args))
+                      }, toDisplayString(_ctx.completeTxt), 1)) : createCommentVNode("", true),
+                      renderSlot(_ctx.$slots, "nextStep", {}, () => [
+                        _ctx.steps.length - 1 != _ctx.active ? (openBlock(), createElementBlock("div", {
+                          key: 0,
+                          class: "nut-tour-content-bottom-operate-btn active",
+                          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.changeStep("next"))
+                        }, toDisplayString(_ctx.nextStepTxt), 1)) : createCommentVNode("", true)
+                      ])
+                    ])
+                  ])
+                ])) : createCommentVNode("", true),
+                _ctx.type == "tile" ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  createElementVNode("div", _hoisted_8, toDisplayString(step.content), 1)
+                ])) : createCommentVNode("", true)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["visible", "location", "bgColor", "theme", "offset", "arrowOffset"])
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    }), 128))
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/dist/packages/_es/TrendArrow.js

@@ -1,14 +1,16 @@
 /*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
+* @nutui/nutui v4.0.0-beta.0 Mon Dec 26 2022 00:00:21 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createBlock } from "vue";
-import { m as myFixed, c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createVNode } from "vue";
+import { m as myFixed, c as createComponent } from "./component.fb9ce7ad.js";
+import { TriangleUp, TriangleDown } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.bf57b04e.js";
 import "../locale/lang";
-const { componentName, create } = createComponent("trendarrow");
+const { componentName, create } = createComponent("trend-arrow");
 const _sfc_main = create({
+  components: { TriangleUp, TriangleDown },
   props: {
     rate: {
       type: Number,
@@ -45,18 +47,6 @@ const _sfc_main = create({
     dropColor: {
       type: String,
       default: "#64b578"
-    },
-    iconSize: {
-      type: String,
-      default: "12px"
-    },
-    upIconName: {
-      type: String,
-      default: "triangle-up"
-    },
-    downIconName: {
-      type: String,
-      default: "triangle-down"
     }
   },
   setup(props) {
@@ -89,43 +79,34 @@ const _sfc_main = create({
       };
       return style;
     });
-    const calcIconProps = computed(() => {
-      const { dropColor, riseColor, iconSize, upIconName, downIconName } = props;
-      let iconProps = {
-        name: state.rateTrend ? upIconName : downIconName,
-        color: state.rateTrend ? riseColor : dropColor,
-        size: iconSize
-      };
-      return iconProps;
-    });
-    return { ...toRefs(state), classes, calcRate, calcStyle, calcIconProps };
+    return { ...toRefs(state), classes, calcRate, calcStyle };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_TriangleUp = resolveComponent("TriangleUp");
+  const _component_TriangleDown = resolveComponent("TriangleDown");
   return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    class: normalizeClass(_ctx.classes)
   }, [
     !_ctx.arrowLeft ? (openBlock(), createElementBlock("span", {
       key: 0,
-      class: "nut-trendarrow-icon-before nut-trendarrow-rate",
+      class: "nut-trend-arrow-icon-before nut-trend-arrow-rate",
       style: normalizeStyle(_ctx.calcStyle)
     }, toDisplayString(_ctx.calcRate), 5)) : createCommentVNode("", true),
-    renderSlot(_ctx.$slots, "default", {}, () => [
-      Number(_ctx.rate) !== 0 ? (openBlock(), createBlock(_component_nut_icon, {
-        key: 0,
-        size: _ctx.calcIconProps.size,
-        name: _ctx.calcIconProps.name,
-        color: _ctx.calcIconProps.color
-      }, null, 8, ["size", "name", "color"])) : createCommentVNode("", true)
-    ]),
+    Number(_ctx.rate) !== 0 && _ctx.rateTrend ? renderSlot(_ctx.$slots, "upIcon", { key: 1 }, () => [
+      createVNode(_component_TriangleUp, { color: _ctx.riseColor }, null, 8, ["color"])
+    ]) : createCommentVNode("", true),
+    Number(_ctx.rate) !== 0 && !_ctx.rateTrend ? renderSlot(_ctx.$slots, "downIcon", { key: 2 }, () => [
+      createVNode(_component_TriangleDown, { color: _ctx.dropColor }, null, 8, ["color"])
+    ]) : createCommentVNode("", true),
     _ctx.arrowLeft ? (openBlock(), createElementBlock("span", {
-      key: 1,
-      class: "nut-trendarrow-icon-after nut-trendarrow-rate",
+      key: 3,
+      class: "nut-trend-arrow-icon-after nut-trend-arrow-rate",
       style: normalizeStyle(_ctx.calcStyle)
     }, toDisplayString(_ctx.calcRate), 5)) : createCommentVNode("", true)
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};