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

package/dist/packages/_es/Tabbar.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 { reactive, provide, watch, 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 { create } = createComponent("tabbar");
+const _sfc_main = create({
+  props: {
+    visible: {
+      type: [Number, String],
+      default: 0
+    },
+    bottom: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: "base"
+    },
+    size: {
+      type: String,
+      default: "20px"
+    },
+    unactiveColor: {
+      type: String,
+      default: ""
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["tab-switch", "update:visible"],
+  setup(props, { emit, slots }) {
+    const mdValue = reactive({
+      val: props.visible,
+      children: []
+    });
+    function changeIndex(index2, active) {
+      emit("update:visible", active);
+      parentData.modelValue = active;
+      emit("tab-switch", parentData.children[index2], active);
+    }
+    let parentData = reactive({
+      children: mdValue.children,
+      size: props.size,
+      modelValue: mdValue.val,
+      unactiveColor: props.unactiveColor,
+      activeColor: props.activeColor,
+      changeIndex
+    });
+    provide("parent", parentData);
+    watch(() => props.visible, (value) => {
+      parentData.modelValue = value;
+    });
+    return {
+      changeIndex
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(["nut-tabbar", { "nut-tabbar-bottom": _ctx.bottom, "nut-tabbar-safebottom": _ctx.safeAreaInsetBottom }])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/TabbarItem.js

@@ -0,0 +1,179 @@
+/*!
+* @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 { c as createComponent } from "./component.js";
+import { u as useRouter } from "./index.js";
+import { inject, reactive, getCurrentInstance, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, toDisplayString, createCommentVNode, createVNode, renderSlot } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { create } = createComponent("tabbar-item");
+const _sfc_main = create({
+  props: {
+    tabTitle: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    href: {
+      type: String,
+      default: ""
+    },
+    num: {
+      type: String,
+      default: ""
+    },
+    activeImg: {
+      type: String,
+      default: ""
+    },
+    img: {
+      type: String,
+      default: ""
+    },
+    classPrefix: {
+      type: String,
+      default: "nut-icon"
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    fontClassName: {
+      type: String,
+      default: "nutui-iconfont"
+    },
+    to: [Object, String]
+  },
+  setup(props, ctx) {
+    const parent = inject("parent");
+    const state = reactive({
+      size: parent.size,
+      unactiveColor: parent.unactiveColor,
+      activeColor: parent.activeColor,
+      active: parent.modelValue,
+      index: 0
+    });
+    const router = useRouter();
+    const relation = (child) => {
+      var _a;
+      if (child.proxy) {
+        parent.children.push(child.proxy);
+        const index2 = computed(() => parent.children.indexOf(child.proxy));
+        state.index = (_a = props.name) != null ? _a : index2.value;
+      }
+    };
+    relation(getCurrentInstance());
+    const active = computed(() => state.index === state.active);
+    function change() {
+      var _a;
+      let key = (_a = props.name) != null ? _a : state.index;
+      let index2 = null;
+      if (props.name) {
+        index2 = parent.children.findIndex((item) => {
+          return item.name == key;
+        });
+      }
+      parent.changeIndex(index2 != null ? index2 : key, state.index);
+    }
+    const choosed = computed(() => {
+      if (parent) {
+        return parent.modelValue;
+      }
+      return null;
+    });
+    watch(choosed, (value, oldValue) => {
+      state.active = value;
+      let index2 = value;
+      if (props.name) {
+        index2 = parent.children.findIndex((item) => {
+          return item.name == value;
+        });
+      }
+      setTimeout(() => {
+        if (parent.children[index2].href) {
+          window.location.href = parent.children[index2].href;
+          return;
+        }
+        if (parent.children[index2].to) {
+          let to = parent.children[index2].to;
+          if (to && router) {
+            router.push(to);
+          } else {
+            location.replace(to);
+          }
+        }
+      });
+    });
+    return {
+      state,
+      active,
+      change
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-tabbar-item_icon-box" };
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "nut-tabbar-item_icon-box_dot"
+};
+const _hoisted_5 = { key: 2 };
+const _hoisted_6 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["nut-tabbar-item", { "nut-tabbar-item__icon--unactive": !_ctx.active }]),
+    style: normalizeStyle({
+      color: _ctx.active ? _ctx.state.activeColor : _ctx.state.unactiveColor
+    }),
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.change())
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      !_ctx.dot ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.num && _ctx.num <= 99 ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.num), 1)) : _ctx.num && _ctx.num > 100 ? (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString("99+"))) : createCommentVNode("", true)
+      ], 64)) : createCommentVNode("", true),
+      _ctx.dot ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true),
+      _ctx.icon ? (openBlock(), createElementBlock("view", _hoisted_5, [
+        createVNode(_component_nut_icon, {
+          class: "nut-tabbar-item_icon-box_icon",
+          size: _ctx.state.size,
+          name: _ctx.icon,
+          "font-class-name": _ctx.fontClassName,
+          "class-prefix": _ctx.classPrefix
+        }, null, 8, ["size", "name", "font-class-name", "class-prefix"])
+      ])) : createCommentVNode("", true),
+      !_ctx.icon && _ctx.activeImg ? (openBlock(), createElementBlock("div", {
+        key: 3,
+        class: "nut-tabbar-item_icon-box_icon",
+        style: normalizeStyle({
+          backgroundImage: `url(${_ctx.active ? _ctx.activeImg : _ctx.img})`,
+          width: _ctx.state.size,
+          height: _ctx.state.size
+        })
+      }, null, 4)) : createCommentVNode("", true),
+      createElementVNode("view", {
+        class: normalizeClass(["nut-tabbar-item_icon-box_nav-word", { "nut-tabbar-item_icon-box_big-word": !_ctx.icon && !_ctx.activeImg }])
+      }, [
+        _ctx.tabTitle ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(_ctx.tabTitle), 1)) : createCommentVNode("", true),
+        !_ctx.tabTitle ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("", true)
+      ], 2)
+    ])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Table.js

@@ -0,0 +1,183 @@
+/*!
+* @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 { c as createComponent } from "./component.js";
+import { h, reactive, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+var RenderColumn = {
+  setup(props) {
+    return () => h(`view`, {}, props.slots[0] ? props.slots[0](props.record) : props.slots[1](props.record));
+  },
+  props: {
+    slots: Array,
+    record: Object
+  }
+};
+const component = (componentName2, translate2) => {
+  return {
+    components: {
+      RenderColumn
+    },
+    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
+      }
+    },
+    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 getColumnItem = (value) => {
+        return props.columns.filter((item) => item.key === value)[0];
+      };
+      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,
+        handleSorterClick,
+        sortDataItem,
+        translate: translate2
+      };
+    }
+  };
+};
+const { componentName, create, translate } = createComponent("table");
+const _sfc_main = create(component(componentName, translate));
+const _hoisted_1 = { class: "nut-table__main__head" };
+const _hoisted_2 = { class: "nut-table__main__head__tr" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "nut-table__main__body" };
+const _hoisted_5 = { key: 1 };
+const _hoisted_6 = {
+  key: 0,
+  class: "nut-table__summary"
+};
+const _hoisted_7 = ["innerHTML"];
+const _hoisted_8 = {
+  key: 1,
+  class: "nut-table__nodata"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "nut-table__nodata__text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_RenderColumn = resolveComponent("RenderColumn");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass(["nut-table__main", { "nut-table__main--striped": _ctx.striped }])
+    }, [
+      createElementVNode("view", _hoisted_1, [
+        createElementVNode("view", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (item) => {
+            return openBlock(), createElementBlock("span", {
+              class: normalizeClass(["nut-table__main__head__tr__th", _ctx.cellClasses(item)]),
+              key: item.key,
+              onClick: ($event) => _ctx.handleSorterClick(item)
+            }, [
+              createTextVNode(toDisplayString(item.title) + " ", 1),
+              renderSlot(_ctx.$slots, "icon"),
+              !_ctx.$slots.icon && item.sorter ? (openBlock(), createBlock(_component_nut_icon, {
+                key: 0,
+                name: "down-arrow",
+                size: "12px"
+              })) : createCommentVNode("", true)
+            ], 10, _hoisted_3);
+          }), 128))
+        ])
+      ]),
+      createElementVNode("view", _hoisted_4, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.curData, (item) => {
+          return openBlock(), createElementBlock("view", {
+            class: "nut-table__main__body__tr",
+            key: item
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortDataItem(), ([value, render]) => {
+              return openBlock(), createElementBlock("span", {
+                class: normalizeClass(["nut-table__main__body__tr__td", _ctx.cellClasses(_ctx.getColumnItem(value))]),
+                key: value
+              }, [
+                typeof item[value] === "function" || typeof render === "function" ? (openBlock(), createBlock(_component_RenderColumn, {
+                  key: 0,
+                  slots: [render, item[value]],
+                  record: item
+                }, null, 8, ["slots", "record"])) : (openBlock(), createElementBlock("view", _hoisted_5, toDisplayString(item[value]), 1))
+              ], 2);
+            }), 128))
+          ]);
+        }), 128))
+      ])
+    ], 2),
+    _ctx.summary ? (openBlock(), createElementBlock("view", _hoisted_6, [
+      createElementVNode("span", {
+        class: "nut-table__summary__text",
+        innerHTML: _ctx.summary().value
+      }, null, 8, _hoisted_7)
+    ])) : createCommentVNode("", true),
+    !_ctx.curData.length ? (openBlock(), createElementBlock("view", _hoisted_8, [
+      createElementVNode("div", {
+        class: normalizeClass(["nut-table__nodata", { "nut-table__nodata--border": _ctx.bordered }])
+      }, [
+        renderSlot(_ctx.$slots, "nodata"),
+        !_ctx.$slots.nodata ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.translate("noData")), 1)) : createCommentVNode("", true)
+      ], 2)
+    ])) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Tabs.js

@@ -0,0 +1,211 @@
+/*!
+* @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 { c as createComponent } from "./component.js";
+import { p as pxCheck } from "./pxCheck.js";
+import { provide, computed, ref, watch, onMounted, onActivated, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode, createVNode, toDisplayString } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+class Title {
+  constructor() {
+    this.title = "";
+    this.paneKey = "";
+    this.disabled = false;
+  }
+}
+const component = {
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: 0
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: String,
+      default: "normal"
+    },
+    type: {
+      type: String,
+      default: "line"
+    },
+    titleScroll: {
+      type: Boolean,
+      default: false
+    },
+    ellipsis: {
+      type: Boolean,
+      default: true
+    },
+    autoHeight: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: ""
+    },
+    animatedTime: {
+      type: [Number, String],
+      default: 300
+    },
+    titleGutter: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  components: {},
+  emits: ["update:modelValue", "click", "change"],
+  setup(props, { emit, slots }) {
+    provide("activeKey", { activeKey: computed(() => props.modelValue) });
+    provide("autoHeight", { autoHeight: computed(() => props.autoHeight) });
+    const titles = ref([]);
+    const renderTitles = (vnodes) => {
+      vnodes.forEach((vnode, index2) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let type = vnode.type;
+        type = type.name || type;
+        if (type == "nut-tabpane") {
+          let title = new Title();
+          if (((_a = vnode.props) == null ? void 0 : _a.title) || ((_b = vnode.props) == null ? void 0 : _b["pane-key"]) || ((_c = vnode.props) == null ? void 0 : _c["paneKey"])) {
+            title.title = (_d = vnode.props) == null ? void 0 : _d.title;
+            title.paneKey = ((_e = vnode.props) == null ? void 0 : _e["pane-key"]) || ((_f = vnode.props) == null ? void 0 : _f["paneKey"]) || index2;
+            title.disabled = (_g = vnode.props) == null ? void 0 : _g.disabled;
+          }
+          titles.value.push(title);
+        } else {
+          renderTitles(vnode.children);
+        }
+      });
+    };
+    const currentIndex = ref(props.modelValue || 0);
+    const findTabsIndex = (value) => {
+      let index2 = titles.value.findIndex((item) => item.paneKey == value);
+      if (titles.value.length == 0) {
+        console.error("[NutUI] <Tabs> \u5F53\u524D\u672A\u627E\u5230 TabPane \u7EC4\u4EF6\u5143\u7D20 , \u8BF7\u68C0\u67E5 .");
+      } else if (index2 == -1) {
+        console.error("[NutUI] <Tabs> \u8BF7\u68C0\u67E5 v-model \u503C\u662F\u5426\u4E3A paneKey ,\u5982 paneKey \u672A\u8BBE\u7F6E\uFF0C\u8BF7\u91C7\u7528\u4E0B\u6807\u63A7\u5236 .");
+      } else {
+        currentIndex.value = index2;
+      }
+    };
+    const init = (vnodes = ((_a) => (_a = slots.default) == null ? void 0 : _a.call(slots))()) => {
+      titles.value = [];
+      if (vnodes && vnodes.length) {
+        renderTitles(vnodes);
+      }
+      findTabsIndex(props.modelValue);
+    };
+    watch(() => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    }, (vnodes) => {
+      init(vnodes);
+    });
+    watch(() => props.modelValue, (value) => {
+      findTabsIndex(value);
+    });
+    onMounted(init);
+    onActivated(init);
+    const contentStyle = computed(() => {
+      return {
+        transform: props.direction == "horizontal" ? `translate3d(-${currentIndex.value * 100}%, 0, 0)` : `translate3d( 0,-${currentIndex.value * 100}%, 0)`,
+        transitionDuration: `${props.animatedTime}ms`
+      };
+    });
+    const tabsNavStyle = computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const tabsActiveStyle = computed(() => {
+      return {
+        color: props.type == "smile" ? props.color : "",
+        background: props.type == "line" ? props.color : ""
+      };
+    });
+    const titleStyle = computed(() => {
+      return {
+        marginLeft: pxCheck(props.titleGutter),
+        marginRight: pxCheck(props.titleGutter)
+      };
+    });
+    const methods = {
+      tabChange: (item, index2) => {
+        emit("click", item);
+        if (item.disabled) {
+          return;
+        }
+        currentIndex.value = index2;
+        emit("update:modelValue", item.paneKey);
+        emit("change", item);
+      }
+    };
+    return {
+      titles,
+      contentStyle,
+      tabsNavStyle,
+      titleStyle,
+      tabsActiveStyle,
+      ...methods
+    };
+  }
+};
+const _hoisted_1 = ["onClick"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(["nut-tabs", [_ctx.direction]])
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass(["nut-tabs__titles", { [_ctx.type]: _ctx.type, scrollable: _ctx.titleScroll, [_ctx.size]: _ctx.size }]),
+      style: normalizeStyle(_ctx.tabsNavStyle)
+    }, [
+      _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.titles, (item, index2) => {
+        return openBlock(), createElementBlock("view", {
+          class: normalizeClass(["nut-tabs__titles-item", { active: item.paneKey == _ctx.modelValue, disabled: item.disabled }]),
+          style: normalizeStyle(_ctx.titleStyle),
+          onClick: ($event) => _ctx.tabChange(item, index2),
+          key: item.paneKey
+        }, [
+          _ctx.type == "line" ? (openBlock(), createElementBlock("view", {
+            key: 0,
+            class: "nut-tabs__titles-item__line",
+            style: normalizeStyle(_ctx.tabsActiveStyle)
+          }, null, 4)) : createCommentVNode("", true),
+          _ctx.type == "smile" ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            class: "nut-tabs__titles-item__smile",
+            style: normalizeStyle(_ctx.tabsActiveStyle)
+          }, [
+            createVNode(_component_nut_icon, {
+              color: _ctx.color,
+              name: "joy-smile"
+            }, null, 8, ["color"])
+          ], 4)) : createCommentVNode("", true),
+          createElementVNode("view", {
+            class: normalizeClass(["nut-tabs__titles-item__text", { ellipsis: _ctx.ellipsis }])
+          }, toDisplayString(item.title), 3)
+        ], 14, _hoisted_1);
+      }), 128))
+    ], 6),
+    createElementVNode("view", {
+      class: "nut-tabs__content",
+      style: normalizeStyle(_ctx.contentStyle)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 4)
+  ], 2);
+}
+const { create } = createComponent("tabs");
+const _sfc_main = create(component);
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", render]]);
+export { index as default };