@nutui/nutui 3.0.2 → 3.1.2-3.beta-4

package/dist/packages/_es/Audio.js

@@ -0,0 +1,263 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { ref, reactive, onMounted, watch, provide, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, createCommentVNode, normalizeClass, createBlock, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("audio");
+const _sfc_main = create({
+  props: {
+    url: {
+      type: String,
+      default: ""
+    },
+    muted: {
+      type: Boolean,
+      default: false
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    preload: {
+      type: String,
+      default: "auto"
+    },
+    second: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: "progress"
+    }
+  },
+  components: {},
+  emits: ["fastBack", "play", "forward", "ended", "changeProgress", "mute"],
+  setup(props, { emit }) {
+    const audioRef = ref(null);
+    const audioData = reactive({
+      currentTime: 0,
+      currentDuration: "00:00:00",
+      percent: 0,
+      duration: "00:00:00",
+      second: 0,
+      hanMuted: props.muted,
+      playing: props.autoplay,
+      handPlaying: false
+    });
+    onMounted(() => {
+      var arr = ["webkitVisibilityState", "visibilitychange"];
+      try {
+        for (let i = 0; i < arr.length; i++) {
+          document.addEventListener(arr[i], () => {
+            if (document.hidden) {
+              audioRef.value.pause();
+            } else {
+              if (audioData.playing) {
+                setTimeout(() => {
+                  audioRef.value.play();
+                }, 200);
+              }
+            }
+          });
+        }
+      } catch (e) {
+        console.log(e.message);
+      }
+      setTimeout(() => {
+        const audioR = audioRef.value;
+        if (props.autoplay) {
+          if (audioR && audioR.paused) {
+            audioR.play();
+          }
+        }
+        audioData.second = audioR.duration;
+        audioData.duration = formatSeconds(audioR.duration);
+      }, 500);
+    });
+    const onTimeupdate = (e) => {
+      audioData.currentTime = parseInt(e.target.currentTime);
+    };
+    const fastBack = () => {
+      audioData.currentTime--;
+      audioRef.value.currentTime = audioData.currentTime;
+      emit("fastBack", audioData.currentTime);
+    };
+    const changeStatus = () => {
+      const audioR = audioRef.value;
+      if (audioData.playing) {
+        audioR.pause();
+        audioData.handPlaying = false;
+      } else {
+        audioR.play();
+        audioData.handPlaying = true;
+      }
+      audioData.playing = !audioData.playing;
+      emit("play", audioData.playing);
+    };
+    const forward = () => {
+      audioData.currentTime++;
+      audioRef.value.currentTime = audioData.currentTime;
+      emit("forward", audioData.currentTime);
+    };
+    const handle = (val) => {
+      audioData.currentDuration = formatSeconds(val);
+      audioData.percent = val / audioData.second * 100;
+    };
+    const audioEnd = () => {
+      audioData.playing = false;
+      emit("ended");
+    };
+    const progressChange = (val) => {
+      const ar = audioRef.value;
+      ar.currentTime = audioData.second * val / 100;
+      emit("changeProgress", ar.currentTime);
+    };
+    const handleMute = () => {
+      audioData.hanMuted = !audioData.hanMuted;
+      emit("mute", audioData.hanMuted);
+    };
+    const formatSeconds = (value) => {
+      let theTime = parseInt(value);
+      let theTime1 = 0;
+      let theTime2 = 0;
+      if (theTime > 60) {
+        theTime1 = Math.floor(theTime / 60);
+        theTime = Math.floor(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = Math.floor(theTime1 / 60);
+          theTime1 = Math.floor(theTime1 % 60);
+        }
+      }
+      let result = "";
+      if (theTime < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = "" + theTime1 + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = "" + theTime2 + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      return result;
+    };
+    watch(() => audioData.currentTime, (value) => {
+      handle(value);
+    });
+    provide("audioParent", {
+      children: [],
+      props,
+      audioData,
+      handleMute,
+      forward,
+      fastBack,
+      changeStatus
+    });
+    return {
+      ...toRefs(props),
+      ...toRefs(audioData),
+      audioRef,
+      fastBack,
+      forward,
+      changeStatus,
+      progressChange,
+      audioEnd,
+      onTimeupdate,
+      handleMute
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-audio" };
+const _hoisted_2 = {
+  key: 0,
+  class: "progress-wrapper"
+};
+const _hoisted_3 = { class: "time" };
+const _hoisted_4 = { class: "progress-bar-wrapper" };
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "custom-button" }, null, -1);
+const _hoisted_6 = { class: "time" };
+const _hoisted_7 = {
+  key: 1,
+  class: "nut-audio-icon"
+};
+const _hoisted_8 = ["controls", "src", "preload", "autoplay", "loop", "muted"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_range = resolveComponent("nut-range");
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.type == "progress" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      createElementVNode("div", _hoisted_3, toDisplayString(_ctx.currentDuration), 1),
+      createElementVNode("div", _hoisted_4, [
+        createVNode(_component_nut_range, {
+          modelValue: _ctx.percent,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.percent = $event),
+          "hidden-range": "",
+          onChange: _ctx.progressChange,
+          "inactive-color": "#cccccc",
+          "active-color": "#fa2c19"
+        }, {
+          button: withCtx(() => [
+            _hoisted_5
+          ]),
+          _: 1
+        }, 8, ["modelValue", "onChange"])
+      ]),
+      createElementVNode("div", _hoisted_6, toDisplayString(_ctx.duration), 1)
+    ])) : createCommentVNode("", true),
+    _ctx.type == "icon" ? (openBlock(), createElementBlock("div", _hoisted_7, [
+      createElementVNode("div", {
+        class: normalizeClass(["nut-audio-icon-box", _ctx.playing ? "nut-audio-icon-play" : "nut-audio-icon-stop"]),
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.changeStatus && _ctx.changeStatus(...args))
+      }, [
+        _ctx.playing ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 0,
+          name: "service",
+          class: "nut-icon-am-rotate nut-icon-am-infinite"
+        })) : createCommentVNode("", true),
+        !_ctx.playing ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 1,
+          name: "service"
+        })) : createCommentVNode("", true)
+      ], 2)
+    ])) : createCommentVNode("", true),
+    _ctx.type == "none" ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.changeStatus && _ctx.changeStatus(...args))
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.type != "none" ? renderSlot(_ctx.$slots, "default", { key: 3 }) : createCommentVNode("", true),
+    createElementVNode("audio", {
+      class: "audioMain",
+      controls: _ctx.type == "controls",
+      ref: "audioRef",
+      src: _ctx.url,
+      preload: _ctx.preload,
+      autoplay: _ctx.autoplay,
+      loop: _ctx.loop,
+      onTimeupdate: _cache[3] || (_cache[3] = (...args) => _ctx.onTimeupdate && _ctx.onTimeupdate(...args)),
+      onEnded: _cache[4] || (_cache[4] = (...args) => _ctx.audioEnd && _ctx.audioEnd(...args)),
+      muted: _ctx.hanMuted
+    }, null, 40, _hoisted_8)
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/AudioOperate.js

@@ -0,0 +1,105 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { inject, reactive, ref, useSlots, toRefs, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create, translate } = createComponent("audio-operate");
+const _sfc_main = create({
+  props: {
+    type: {
+      type: String,
+      default() {
+        return "play";
+      }
+    }
+  },
+  components: {},
+  emits: ["click"],
+  setup(props, { emit }) {
+    const audio = inject("audioParent");
+    const parent = reactive(audio);
+    const customSlot = ref(useSlots().default);
+    return { ...toRefs(props), ...toRefs(parent), customSlot, translate };
+  }
+});
+const _hoisted_1 = { class: "nut-audio-operate" };
+const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u5FEB\u8FDB");
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_button = resolveComponent("nut-button");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.type == "back" ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "nut-audio-operate-item",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.fastBack && _ctx.fastBack(...args))
+    }, [
+      !_ctx.customSlot ? (openBlock(), createBlock(_component_nut_button, {
+        key: 0,
+        type: "primary",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.translate("back")), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.type == "play" ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "nut-audio-operate-item",
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.changeStatus && _ctx.changeStatus(...args))
+    }, [
+      !_ctx.customSlot ? (openBlock(), createBlock(_component_nut_button, {
+        key: 0,
+        type: "primary",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(!_ctx.audioData.playing ? `${_ctx.translate("start")}` : `${_ctx.translate("pause")}`), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.type == "forward" ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: "nut-audio-operate-item",
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.forward && _ctx.forward(...args))
+    }, [
+      !_ctx.customSlot ? (openBlock(), createBlock(_component_nut_button, {
+        key: 0,
+        type: "primary",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          _hoisted_2
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.type == "mute" ? (openBlock(), createElementBlock("div", {
+      key: 3,
+      class: "nut-audio-operate-item",
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleMute && _ctx.handleMute(...args))
+    }, [
+      !_ctx.customSlot ? (openBlock(), createBlock(_component_nut_button, {
+        key: 0,
+        type: !_ctx.audioData.hanMuted ? "primary" : "default",
+        size: "small"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.translate("mute")), 1)
+        ]),
+        _: 1
+      }, 8, ["type"])) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true)
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Avatar.js

@@ -0,0 +1,168 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, inject, ref, reactive, onMounted, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, Fragment, createBlock, createCommentVNode, renderSlot, toDisplayString } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("avatar");
+const _sfc_main = create({
+  props: {
+    size: {
+      type: String,
+      default: ""
+    },
+    shape: {
+      type: String,
+      default: "round"
+    },
+    bgColor: {
+      type: String,
+      default: "#eee"
+    },
+    color: {
+      type: String,
+      default: "#666"
+    },
+    url: {
+      type: String,
+      default: ""
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["active-avatar", "onError"],
+  setup(props, { emit, slots }) {
+    const { size, shape, bgColor, color, icon } = toRefs(props);
+    const sizeValue = ["large", "normal", "small"];
+    const avatarGroup = inject("avatarGroup", null);
+    const avatarRef = ref(null);
+    const visible = reactive({
+      lightTheme: false
+    });
+    const state = reactive({
+      index: 1,
+      showMax: false,
+      maxIndex: 0
+    });
+    onMounted(() => {
+      var _a, _b;
+      const children = (_b = (_a = avatarGroup == null ? void 0 : avatarGroup.avatarGroupRef) == null ? void 0 : _a.value) == null ? void 0 : _b.children;
+      if (children) {
+        avatarLength(children);
+      }
+    });
+    const classes = computed(() => {
+      var _a, _b;
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`nut-avatar-${size.value || ((_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.size) || "normal"}`]: true,
+        [`nut-avatar-${shape.value || ((_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.shape) || "normal"}`]: true
+      };
+    });
+    const styles = computed(() => {
+      var _a, _b, _c;
+      return {
+        width: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
+        height: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
+        backgroundColor: `${bgColor.value}`,
+        color: `${color.value}`,
+        marginLeft: state.index != 1 && (((_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.span) ? `${(_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.span}px` : ""),
+        zIndex: ((_c = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _c.zIndex) == "right" ? `${Math.abs(state.maxIndex - state.index)}` : ""
+      };
+    });
+    const maxStyles = computed(() => {
+      var _a, _b;
+      return {
+        backgroundColor: `${(_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.maxBgColor}`,
+        color: `${(_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.maxColor}`
+      };
+    });
+    const iconStyles = computed(() => {
+      return !!icon.value ? icon.value : "";
+    });
+    const isShowText = computed(() => {
+      return slots.default;
+    });
+    const avatarLength = (children) => {
+      var _a, _b, _c;
+      state.maxIndex = children.length;
+      for (let i = 0; i < children.length; i++) {
+        if (children[i] && children[i].classList && children[i].classList[0] == "nut-avatar") {
+          children[i].setAttribute("data-index", i + 1);
+        }
+      }
+      state.index = (_b = (_a = avatarRef == null ? void 0 : avatarRef.value) == null ? void 0 : _a.dataset) == null ? void 0 : _b.index;
+      if (state.index == state.maxIndex && state.index != ((_c = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _c.maxCount)) {
+        state.showMax = true;
+      }
+    };
+    const activeAvatar = (event) => {
+      emit("active-avatar", event);
+    };
+    const onError = (event) => {
+      emit("onError", event);
+    };
+    return {
+      classes,
+      styles,
+      iconStyles,
+      isShowText,
+      maxStyles,
+      activeAvatar,
+      onError,
+      avatarGroup,
+      visible,
+      avatarRef,
+      ...toRefs(state)
+    };
+  }
+});
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = {
+  key: 2,
+  class: "text"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return _ctx.showMax || !((_b = (_a = _ctx.avatarGroup) == null ? void 0 : _a.props) == null ? void 0 : _b.maxCount) || _ctx.index <= ((_d = (_c = _ctx.avatarGroup) == null ? void 0 : _c.props) == null ? void 0 : _d.maxCount) ? (openBlock(), createElementBlock("view", {
+    key: 0,
+    style: normalizeStyle(!_ctx.showMax ? _ctx.styles : _ctx.maxStyles),
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[1] || (_cache[1] = ($event) => _ctx.activeAvatar(_ctx.e)),
+    ref: "avatarRef"
+  }, [
+    !((_f = (_e = _ctx.avatarGroup) == null ? void 0 : _e.props) == null ? void 0 : _f.maxCount) || _ctx.index <= ((_h = (_g = _ctx.avatarGroup) == null ? void 0 : _g.props) == null ? void 0 : _h.maxCount) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      _ctx.url ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: _ctx.url,
+        alt: _ctx.alt,
+        onError: _cache[0] || (_cache[0] = (...args) => _ctx.onError && _ctx.onError(...args))
+      }, null, 40, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 1,
+        class: "icon",
+        name: _ctx.iconStyles
+      }, null, 8, ["name"])) : createCommentVNode("", true),
+      _ctx.isShowText ? (openBlock(), createElementBlock("view", _hoisted_2, [
+        renderSlot(_ctx.$slots, "default")
+      ])) : createCommentVNode("", true)
+    ], 64)) : createCommentVNode("", true),
+    _ctx.showMax ? (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString(((_j = (_i = _ctx.avatarGroup) == null ? void 0 : _i.props) == null ? void 0 : _j.maxContent) ? (_l = (_k = _ctx.avatarGroup) == null ? void 0 : _k.props) == null ? void 0 : _l.maxContent : `+ ${_ctx.maxIndex - ((_n = (_m = _ctx.avatarGroup) == null ? void 0 : _m.props) == null ? void 0 : _n.maxCount)}`), 1)) : createCommentVNode("", true)
+  ], 6)) : createCommentVNode("", true);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/AvatarGroup.js

@@ -0,0 +1,78 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, ref, computed, onMounted, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("avatar-group");
+const _sfc_main = create({
+  props: {
+    maxContent: {
+      type: String,
+      default: ""
+    },
+    maxCount: {
+      type: [Number, String],
+      default: ""
+    },
+    maxBgColor: {
+      type: String,
+      default: "#eee"
+    },
+    maxColor: {
+      type: String,
+      default: "#666"
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    shape: {
+      type: String,
+      default: ""
+    },
+    span: {
+      type: String,
+      default: "-8"
+    },
+    zIndex: {
+      type: String,
+      default: "left"
+    }
+  },
+  setup(props, { emit, slots }) {
+    toRefs(props);
+    const avatarGroupRef = ref(null);
+    const index2 = ref(0);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    onMounted(() => {
+    });
+    provide("avatarGroup", {
+      props,
+      avatarGroupRef,
+      index: index2
+    });
+    return {
+      classes,
+      avatarGroupRef
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    ref: "avatarGroupRef"
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };