@nutui/nutui 4.0.0-beta.8 → 4.0.0

package/dist/packages/_es/Table.js

@@ -1,9 +1,9 @@
+import { defineComponent, h, reactive, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
-import { h, reactive, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode } from "vue";
 import { DownArrow } from "@nutui/icons-vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const RenderColumn = {
+const RenderColumn = defineComponent({
   setup(props) {
     return () => h(`view`, {}, props.slots[0] ? props.slots[0](props.record) : props.slots[1](props.record));
   },
@@ -11,103 +11,100 @@ const RenderColumn = {
     slots: Array,
     record: Object
   }
-};
-const component = (componentName2, translate2) => {
-  return {
-    components: {
-      RenderColumn,
-      DownArrow
+});
+const { componentName, create, translate } = createComponent("table");
+const _sfc_main = create({
+  components: {
+    RenderColumn,
+    DownArrow
+  },
+  props: {
+    bordered: {
+      type: Boolean,
+      default: true
     },
-    props: {
-      bordered: {
-        type: Boolean,
-        default: true
-      },
-      columns: {
-        type: Array,
-        default: () => {
-          return [];
-        }
-      },
-      data: {
-        type: Object,
-        default: () => {
-          return {};
-        }
-      },
-      summary: {
-        type: Function,
-        default: null
-      },
-      striped: {
-        type: Boolean,
-        default: false
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
       }
     },
-    emits: ["sorter"],
-    setup(props, { emit, slots }) {
-      const state = reactive({
-        curData: props.data
-      });
-      const classes = computed(() => {
-        const prefixCls = componentName2;
-        return {
-          [prefixCls]: true
-        };
-      });
-      const cellClasses = (item) => {
-        return {
-          "nut-table__main__head__tr--border": props.bordered,
-          [`nut-table__main__head__tr--align${item.align ? item.align : ""}`]: true
-        };
-      };
-      const stylehead = (item) => {
-        return item.stylehead ? item.stylehead : "";
-      };
-      const stylecolumn = (item) => {
-        return item.stylecolumn ? item.stylecolumn : "";
-      };
-      const getColumnItem = (value) => {
-        return props.columns.filter((item) => item.key === value)[0];
-      };
-      const getColumnItemStyle = (value) => {
-        const style = props.columns.filter((item) => item.key === value);
-        return style[0].stylecolumn ? style[0].stylecolumn : "";
-      };
-      const handleSorterClick = (item) => {
-        if (item.sorter) {
-          emit("sorter", item);
-          state.curData = typeof item.sorter === "function" ? state.curData.sort(item.sorter) : item.sorter === "default" ? state.curData.sort() : state.curData;
-        }
-      };
-      const sortDataItem = () => {
-        return props.columns.map((columns) => {
-          return [columns.key, columns.render];
-        });
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    summary: {
+      type: Function,
+      default: null
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["sorter"],
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      curData: props.data
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
       };
-      watch(
-        () => props.data,
-        (val) => {
-          state.curData = val.slice();
-        }
-      );
+    });
+    const cellClasses = (item) => {
       return {
-        ...toRefs(state),
-        classes,
-        cellClasses,
-        getColumnItem,
-        getColumnItemStyle,
-        handleSorterClick,
-        sortDataItem,
-        translate: translate2,
-        stylehead,
-        stylecolumn
+        "nut-table__main__head__tr--border": props.bordered,
+        [`nut-table__main__head__tr--align${item.align ? item.align : ""}`]: true
       };
-    }
-  };
-};
-const { componentName, create, translate } = createComponent("table");
-const _sfc_main = create(component(componentName, translate));
+    };
+    const stylehead = (item) => {
+      return item.stylehead ? item.stylehead : "";
+    };
+    const stylecolumn = (item) => {
+      return item.stylecolumn ? item.stylecolumn : "";
+    };
+    const getColumnItem = (value) => {
+      return props.columns.filter((item) => item.key === value)[0];
+    };
+    const getColumnItemStyle = (value) => {
+      const style = props.columns.filter((item) => item.key === value);
+      return style[0].stylecolumn ? style[0].stylecolumn : "";
+    };
+    const handleSorterClick = (item) => {
+      if (item.sorter) {
+        emit("sorter", item);
+        state.curData = typeof item.sorter === "function" ? state.curData.sort(item.sorter) : item.sorter === "default" ? state.curData.sort() : state.curData;
+      }
+    };
+    const sortDataItem = () => {
+      return props.columns.map((columns) => {
+        return [columns.key, columns.render];
+      });
+    };
+    watch(
+      () => props.data,
+      (val) => {
+        state.curData = val.slice();
+      }
+    );
+    return {
+      ...toRefs(state),
+      classes,
+      cellClasses,
+      getColumnItem,
+      getColumnItemStyle,
+      handleSorterClick,
+      sortDataItem,
+      translate,
+      stylehead,
+      stylecolumn
+    };
+  }
+});
 const _hoisted_1 = { class: "nut-table__main__head" };
 const _hoisted_2 = { class: "nut-table__main__head__tr" };
 const _hoisted_3 = ["onClick"];

package/dist/packages/_es/Tabs.js

@@ -35,6 +35,7 @@ const _sfc_main = create({
     direction: {
       type: String,
       default: "horizontal"
+      //vertical
     },
     size: {
       type: String,
@@ -43,6 +44,7 @@ const _sfc_main = create({
     type: {
       type: String,
       default: "line"
+      //card、line、smile
     },
     titleScroll: {
       type: Boolean,
@@ -114,9 +116,9 @@ const _sfc_main = create({
       let index = titles.value.findIndex((item) => item.paneKey == value);
       if (titles.value.length == 0) {
         console.error("[NutUI] <Tabs> 当前未找到 TabPane 组件元素 , 请检查 .");
-      } else if (index == -1) {
-        console.error("[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置，请采用下标控制 .");
-      } else {
+      } else if (index == -1)
+        ;
+      else {
         currentIndex.value = index;
       }
     };

package/dist/packages/_es/Textarea.js

@@ -67,6 +67,7 @@ const _sfc_main = create({
     const styles = computed(() => {
       return {
         textAlign: props.textAlign
+        // resize: props.autosize ? 'vertical' : 'none'
       };
     });
     const getContentHeight = () => {
@@ -102,8 +103,14 @@ const _sfc_main = create({
       emit("change", value, event);
     };
     const change = (event) => {
-      const input = event.target;
-      emitChange(input.value, event);
+      if (!event.target.composing) {
+        const input = event.target;
+        let value = input.value;
+        if (props.maxLength && value.length > Number(props.maxLength)) {
+          value = value.slice(0, Number(props.maxLength));
+        }
+        emitChange(input.value, event);
+      }
     };
     const focus = (event) => {
       if (props.disabled)
@@ -122,6 +129,15 @@ const _sfc_main = create({
       emitChange(value, event);
       emit("blur", { value, event });
     };
+    const startComposing = ({ target }) => {
+      target.composing = true;
+    };
+    const endComposing = ({ target }) => {
+      if (target.composing) {
+        target.composing = false;
+        target.dispatchEvent(new Event("input"));
+      }
+    };
     return {
       textareaRef,
       classes,
@@ -129,7 +145,9 @@ const _sfc_main = create({
       change,
       focus,
       blur,
-      translate
+      translate,
+      startComposing,
+      endComposing
     };
   }
 });
@@ -155,7 +173,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args)),
       maxlength: _ctx.maxLength,
       placeholder: _ctx.placeholder || _ctx.translate("placeholder"),
-      autofocus: _ctx.autofocus
+      autofocus: _ctx.autofocus,
+      onChange: _cache[3] || (_cache[3] = (...args) => _ctx.endComposing && _ctx.endComposing(...args)),
+      onCompositionend: _cache[4] || (_cache[4] = (...args) => _ctx.endComposing && _ctx.endComposing(...args)),
+      onCompositionstart: _cache[5] || (_cache[5] = (...args) => _ctx.startComposing && _ctx.startComposing(...args))
     }, null, 44, _hoisted_1),
     _ctx.limitShow ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0) + "/" + toDisplayString(_ctx.maxLength), 1)) : createCommentVNode("", true)
   ], 2);

package/dist/packages/_es/TimeDetail.js

@@ -11,10 +11,6 @@ const _sfc_main = create({
       default: () => {
         return [];
       }
-    },
-    detailKey: {
-      type: [Number, String],
-      default: 0
     }
   },
   emits: ["select"],

package/dist/packages/_es/TimeSelect.js

@@ -1,6 +1,6 @@
 import { computed, provide, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, normalizeClass, createElementBlock, toDisplayString, renderSlot } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
-import { P as Popup } from "./index-da7aa231.js";
+import { P as Popup } from "./index-991c279f.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
 import "./Overlay.js";
@@ -35,7 +35,7 @@ const _sfc_main = create({
     },
     lockScroll: {
       type: [Boolean],
-      default: false
+      default: true
     },
     teleportDisable: {
       type: Boolean,

package/dist/packages/_es/Toast.js

@@ -196,7 +196,9 @@ const defaultOptions = {
   msg: "",
   id: "",
   duration: 2e3,
+  //显示时间(毫秒)
   center: true,
+  // 未实现
   type: "text",
   title: "",
   customClass: "",
@@ -205,13 +207,19 @@ const defaultOptions = {
   iconSize: "20",
   icon: null,
   textAlignCenter: true,
+  // 未实现
   loadingRotate: true,
+  // 未实现
   bgColor: "",
   onClose: null,
+  // 未实现
   unmount: null,
   cover: false,
+  //透明遮罩层 // 未实现
   coverColor: "",
+  // 未实现
   closeOnClickOverlay: false
+  // 未实现
 };
 let idsMap = [];
 let optsMap = [];
@@ -245,7 +253,7 @@ const updateToast = (opts) => {
     }
     const instance = createVNode(Toast, opts);
     render(instance, container);
-    return ToastFunction;
+    return showToast;
   }
 };
 const mountToast = (opts) => {
@@ -266,7 +274,7 @@ const mountToast = (opts) => {
   CreateComponent(opts, {
     wrapper: Toast
   });
-  return ToastFunction;
+  return showToast;
 };
 const errorMsg = (msg) => {
   if (!msg) {
@@ -274,7 +282,7 @@ const errorMsg = (msg) => {
     return;
   }
 };
-const ToastFunction = {
+const showToast = {
   text(msg, opts = {}) {
     errorMsg(msg);
     return mountToast({ ...opts, type: "text", msg });
@@ -304,11 +312,9 @@ const ToastFunction = {
   },
   install(app) {
     app.use(Toast);
-    app.config.globalProperties.$toast = ToastFunction;
   }
 };
 export {
-  Toast,
-  ToastFunction,
-  ToastFunction as default
+  Toast as default,
+  showToast
 };

package/dist/packages/_es/Tour.js

@@ -6,7 +6,7 @@ import Popover from "./Popover.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
 import "./renderIcon-3d0fd47c.js";
-import "./index-da7aa231.js";
+import "./index-991c279f.js";
 import "./Overlay.js";
 const { create } = createComponent("tour");
 const _sfc_main = create({
@@ -15,10 +15,11 @@ const _sfc_main = create({
     Close
   },
   props: {
-    visible: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     type: {
       type: String,
       default: "step"
+      // tile
     },
     steps: {
       type: Array,
@@ -81,10 +82,10 @@ const _sfc_main = create({
       default: true
     }
   },
-  emits: ["update:visible", "change", "close"],
+  emits: ["update:modelValue", "change", "close"],
   setup(props, { emit }) {
     const state = reactive({
-      showTour: props.visible,
+      showTour: props.modelValue,
       showPopup: false,
       active: 0
     });
@@ -129,7 +130,7 @@ const _sfc_main = create({
       state.showTour = false;
       state.showPopup = false;
       emit("close", state.active);
-      emit("update:visible", false);
+      emit("update:modelValue", false);
     };
     const handleClickMask = () => {
       props.closeOnClickOverlay && close();
@@ -139,7 +140,7 @@ const _sfc_main = create({
       getRootPosition();
     });
     watch(
-      () => props.visible,
+      () => props.modelValue,
       (val) => {
         if (val) {
           getRootPosition();
@@ -225,7 +226,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   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", {}, () => [
+                      renderSlot(_ctx.$slots, "prev-step", {}, () => [
                         _ctx.active != 0 && _ctx.showPrevStep ? (openBlock(), createElementBlock("div", {
                           key: 0,
                           class: "nut-tour-content-bottom-operate-btn",
@@ -237,7 +238,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         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", {}, () => [
+                      renderSlot(_ctx.$slots, "next-step", {}, () => [
                         _ctx.steps.length - 1 != _ctx.active ? (openBlock(), createElementBlock("div", {
                           key: 0,
                           class: "nut-tour-content-bottom-operate-btn active",

package/dist/packages/_es/TrendArrow.js

@@ -88,10 +88,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "nut-trend-arrow-icon-before nut-trend-arrow-rate",
       style: normalizeStyle(_ctx.calcStyle)
     }, toDisplayString(_ctx.calcRate), 5)) : createCommentVNode("", true),
-    Number(_ctx.rate) !== 0 && _ctx.rateTrend ? renderSlot(_ctx.$slots, "upIcon", { key: 1 }, () => [
+    Number(_ctx.rate) !== 0 && _ctx.rateTrend ? renderSlot(_ctx.$slots, "up-icon", { 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 }, () => [
+    Number(_ctx.rate) !== 0 && !_ctx.rateTrend ? renderSlot(_ctx.$slots, "down-icon", { key: 2 }, () => [
       createVNode(_component_TriangleDown, { color: _ctx.dropColor }, null, 8, ["color"])
     ]) : createCommentVNode("", true),
     _ctx.arrowLeft ? (openBlock(), createElementBlock("span", {

package/dist/packages/_es/Uploader.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { reactive, computed, h, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, createVNode, createTextVNode } from "vue";
+import { reactive, computed, h, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, createVNode } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { f as funInterceptor } from "./interceptor-956b24fc.js";
 import Progress from "./Progress.js";
@@ -103,9 +103,11 @@ const _sfc_main = create({
   props: {
     name: { type: String, default: "file" },
     url: { type: String, default: "" },
+    // defaultFileList: { type: Array, default: () => new Array<FileItem>() },
     timeout: { type: [Number, String], default: 1e3 * 30 },
     fileList: { type: Array, default: () => [] },
     isPreview: { type: Boolean, default: true },
+    // picture、list
     listType: { type: String, default: "picture" },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: "post" },
@@ -362,12 +364,14 @@ const _hoisted_7 = {
   class: "nut-uploader__preview-img__file"
 };
 const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "tips" };
-const _hoisted_10 = {
+const _hoisted_9 = { class: "file__name_tips" };
+const _hoisted_10 = { class: "tips" };
+const _hoisted_11 = {
   key: 1,
   class: "nut-uploader__preview-list"
 };
-const _hoisted_11 = ["onClick"];
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "file__name_tips" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Failure = resolveComponent("Failure");
   const _component_Loading = resolveComponent("Loading");
@@ -424,24 +428,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: ($event) => _ctx.fileItemClick(item),
               class: "nut-uploader__preview-img__file__name"
             }, [
-              createVNode(_component_Link, { color: "#808080" }),
-              createTextVNode(" " + toDisplayString(item.name), 1)
+              createElementVNode("view", _hoisted_9, toDisplayString(item.name), 1)
             ], 8, _hoisted_8)
           ])),
-          createElementVNode("view", _hoisted_9, toDisplayString(item.name), 1)
-        ])) : _ctx.listType == "list" ? (openBlock(), createElementBlock("view", _hoisted_10, [
+          createElementVNode("view", _hoisted_10, toDisplayString(item.name), 1)
+        ])) : _ctx.listType == "list" ? (openBlock(), createElementBlock("view", _hoisted_11, [
           createElementVNode("view", {
             onClick: ($event) => _ctx.fileItemClick(item),
             class: normalizeClass(["nut-uploader__preview-img__file__name", [item.status]])
           }, [
-            createVNode(_component_Link),
-            createTextVNode(" " + toDisplayString(item.name), 1)
-          ], 10, _hoisted_11),
-          createVNode(_component_Del, {
-            color: "#808080",
-            class: "nut-uploader__preview-img__file__del",
-            onClick: ($event) => _ctx.onDelete(item, index2)
-          }, null, 8, ["onClick"]),
+            createVNode(_component_Link, { class: "nut-uploader__preview-img__file__link" }),
+            createElementVNode("view", _hoisted_13, toDisplayString(item.name), 1),
+            createVNode(_component_Del, {
+              color: "#808080",
+              class: "nut-uploader__preview-img__file__del",
+              onClick: ($event) => _ctx.onDelete(item, index2)
+            }, null, 8, ["onClick"])
+          ], 10, _hoisted_12),
           item.status == "uploading" ? (openBlock(), createBlock(_component_nut_progress, {
             key: 0,
             size: "small",

package/dist/packages/_es/Video.js

@@ -29,13 +29,17 @@ const _sfc_main = create({
       type: Object,
       default: {
         autoplay: false,
+        //是否自动播放
         volume: 0.5,
         poster: "",
         loop: false,
         controls: true,
         muted: false,
+        //是否静音
         disabled: false,
+        //禁止操作
         playsinline: false,
+        //行内展示
         touchPlay: false,
         preload: ""
       },
@@ -52,30 +56,44 @@ const _sfc_main = create({
     const state = reactive({
       videoElm: null,
       initial: true,
+      //控制封面的显示
       showToolbox: false,
+      //控制控制器和标题的显示
+      // 视频容器元素
       player: {
         $player: null,
         pos: null
       },
+      // progress进度条元素
       progressBar: {
         progressElm: null,
+        // 进度条DOM对象
         pos: null
       },
+      // video控制显示设置
       videoSet: {
         loaded: 0,
+        // 缓存长度
         displayTime: "00:00",
+        // 进度时间
         totalTime: "00:00",
+        // 总时间
         progress: {
           width: 0,
+          // 进度条长度
           current: 0
+          // 进度条当前位置
         }
       },
       state: {
         controlShow: true,
         vol: 0.5,
+        //音量
         currentTime: 0,
+        //当前时间
         fullScreen: false,
         playing: false,
+        //是否正在播放
         isLoading: false,
         isEnd: false,
         isError: false,

package/dist/packages/_es/{common-ceb98554.js → common-b9a5e726.js}

@@ -68,33 +68,41 @@ function useProvide(key, childName) {
 const { componentName } = createComponent("grid");
 const GRID_KEY = Symbol("grid");
 const gridProps = {
+  // 列数
   columnNum: {
     type: [Number, String],
     default: 4
   },
+  // 是否显示边框
   border: {
     type: Boolean,
     default: true
   },
+  // 格子之间间隔距离
   gutter: {
     type: [Number, String],
     default: 0
   },
+  // 是否内容居中
   center: {
     type: Boolean,
     default: true
   },
+  // 是否固定正方形
   square: {
     type: Boolean,
     default: false
   },
+  // 内容与文字翻转
   reverse: {
     type: Boolean,
     default: false
   },
+  // 内容排列方向
   direction: {
     type: String
   },
+  // 是否开启点击反馈
   clickable: {
     type: Boolean,
     default: false