@nutui/nutui 3.1.6 → 3.1.7

package/dist/packages/_es/Switch.js

@@ -0,0 +1,90 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, withDirectives, vShow, Fragment, toDisplayString, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { componentName, create } = createComponent("switch");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    inactiveColor: {
+      type: String,
+      default: ""
+    },
+    activeText: {
+      type: String,
+      default: ""
+    },
+    inactiveText: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [props.modelValue ? "switch-open" : "switch-close"]: true,
+        [`${prefixCls}-disable`]: props.disable,
+        [`${prefixCls}-base`]: true
+      };
+    });
+    const style = computed(() => {
+      return {
+        backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+      };
+    });
+    const onClick = (event) => {
+      if (props.disable)
+        return;
+      emit("update:modelValue", !props.modelValue);
+      emit("change", !props.modelValue, event);
+    };
+    return {
+      classes,
+      style,
+      onClick
+    };
+  }
+});
+const _hoisted_1 = { class: "switch-button" };
+const _hoisted_2 = { class: "close-line" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+    style: normalizeStyle(_ctx.style)
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      withDirectives(createElementVNode("view", _hoisted_2, null, 512), [
+        [vShow, !_ctx.modelValue]
+      ]),
+      _ctx.activeText ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        withDirectives(createElementVNode("view", { class: "nut-switch-label open" }, toDisplayString(_ctx.activeText), 513), [
+          [vShow, _ctx.modelValue]
+        ]),
+        withDirectives(createElementVNode("view", { class: "nut-switch-label close" }, toDisplayString(_ctx.inactiveText), 513), [
+          [vShow, !_ctx.modelValue]
+        ])
+      ], 64)) : createCommentVNode("", true)
+    ])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Tab.js

@@ -0,0 +1,179 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { h, reactive, ref, onMounted, watch, watchEffect, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, toDisplayString, createBlock, createCommentVNode, createVNode, withCtx, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+var TabTitle = {
+  setup(props) {
+    return () => h(`view`, {}, props.slots);
+  },
+  props: {
+    slots: Object
+  }
+};
+const { create } = createComponent("tab");
+const _sfc_main = create({
+  props: {
+    defaultIndex: {
+      type: Number,
+      default: 0
+    },
+    animatedTime: {
+      type: Number,
+      default: 0
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    noSwiping: {
+      type: Boolean,
+      default: false
+    },
+    scrollType: {
+      type: String,
+      default: "flex"
+    },
+    iconType: {
+      type: String,
+      default: "all"
+    }
+  },
+  components: {
+    TabTitle
+  },
+  emits: ["switch-tab"],
+  setup(props, ctx) {
+    const titles = reactive([]);
+    ref(false);
+    const activeIndex = ref(props.defaultIndex);
+    const navlist = ref(null);
+    const nutuiSwiper = ref(null);
+    function createHash() {
+      return Array.from(Array(10), () => Math.floor(Math.random() * 36).toString(36)).join("");
+    }
+    const swiperClassName = ref("swiper-" + createHash());
+    function centerTitle(index2) {
+      if (navlist.value) {
+        const currEle = navlist.value.querySelectorAll(".tab-title-box")[index2];
+        if (props.direction === "vertical") {
+          const currTitleTop = navlist.value.offsetTop;
+          const currTop = currEle.offsetTop;
+          const currHeight = currEle.offsetHeight;
+          const tapHeight = navlist.value.offsetHeight;
+          navlist.value.scroll(0, currTop - currTitleTop - tapHeight / 2 + currHeight / 2);
+        } else {
+          const currLeft = currEle.offsetLeft;
+          const currWidth = currEle.offsetWidth;
+          const tapWidth = navlist.value.offsetWidth;
+          navlist.value.scroll(currLeft - tapWidth / 2 + currWidth / 2, 0);
+        }
+      }
+    }
+    const changeTab = (index2) => {
+      activeIndex.value = index2;
+      centerTitle(index2);
+    };
+    function switchTitle(index2) {
+      activeIndex.value = index2;
+      centerTitle(index2);
+      nutuiSwiper.value.to(index2);
+    }
+    function initTitle() {
+      titles.length = 0;
+      if (ctx.slots.default) {
+        const slots = ctx.slots.default().length === 1 ? ctx.slots.default()[0].children : ctx.slots.default();
+        slots && slots.map((item, index2) => {
+          if (typeof item.children == "string")
+            return;
+          titles.push({
+            title: item.props && item.props["tab-title"] ? item.props["tab-title"] : "",
+            content: item.children && item.children.header ? item.children.header() : null
+          });
+        });
+      }
+    }
+    onMounted(() => {
+      initTitle();
+    });
+    watch(() => ctx.slots.default(), (val, oldVal) => {
+      if (val) {
+        ctx.slots.default();
+        initTitle();
+      }
+    });
+    watchEffect(() => {
+      activeIndex.value = props.defaultIndex;
+    });
+    watch(() => activeIndex.value, (val, oldVal) => {
+      ctx.emit("switch-tab", activeIndex.value);
+    });
+    return {
+      swiperClassName,
+      titles,
+      navlist,
+      activeIndex,
+      switchTitle,
+      changeTab,
+      nutuiSwiper
+    };
+  }
+});
+const _hoisted_1 = { class: "nutui-tab" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "world" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("view", { class: "underline" }, null, -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TabTitle = resolveComponent("TabTitle");
+  const _component_nut_swiper = resolveComponent("nut-swiper");
+  return openBlock(), createElementBlock("view", _hoisted_1, [
+    createElementVNode("view", {
+      class: normalizeClass([_ctx.direction === "vertical" ? "vertical-tab" : "horizontal-tab"])
+    }, [
+      createElementVNode("view", {
+        class: normalizeClass(["tab-title", _ctx.iconType, "tab-title-scroll"]),
+        ref: "navlist"
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.titles, (item, index2) => {
+          return openBlock(), createElementBlock("view", {
+            class: normalizeClass([
+              "tab-title-box",
+              { "nut-tab-active": _ctx.activeIndex == index2 },
+              { "tab-title-box-scroll": _ctx.scrollType == "scroll" }
+            ]),
+            key: index2,
+            onClick: ($event) => _ctx.switchTitle(index2, $event)
+          }, [
+            createElementVNode("span", _hoisted_3, toDisplayString(item.title), 1),
+            item.content ? (openBlock(), createBlock(_component_TabTitle, {
+              key: 0,
+              slots: item.content
+            }, null, 8, ["slots"])) : createCommentVNode("", true)
+          ], 10, _hoisted_2);
+        }), 128)),
+        _hoisted_4
+      ], 2),
+      createVNode(_component_nut_swiper, {
+        "init-page": _ctx.defaultIndex,
+        "pagination-visible": false,
+        duration: _ctx.animatedTime,
+        "pagination-color": "#426543",
+        onChange: _ctx.changeTab,
+        ref: "nutuiSwiper",
+        touchable: !_ctx.noSwiping,
+        direction: _ctx.direction,
+        class: "tab-swiper"
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["init-page", "duration", "onChange", "touchable", "direction"])
+    ], 2)
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/TabPane.js

@@ -0,0 +1,42 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { componentName, create } = createComponent("tabpane");
+const _sfc_main = create({
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    txt: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {},
+  emits: ["click"],
+  setup(props, { emit }) {
+    console.log("componentName", componentName);
+    const { name, txt } = toRefs(props);
+    const handleClick = (event) => {
+      emit("click", event);
+    };
+    return { name, txt, handleClick };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    createElementVNode("view", null, toDisplayString(_ctx.name), 1),
+    createElementVNode("view", null, toDisplayString(_ctx.txt), 1)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/TabPanel.js

@@ -0,0 +1,30 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { c as createComponent } from "./component.js";
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { create } = createComponent("tab-panel");
+const _sfc_main = create({
+  props: {
+    tabTitle: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, ctx) {
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
+  return openBlock(), createBlock(_component_nut_swiper_item, null, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  });
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Tabbar.js

@@ -0,0 +1,73 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @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";
+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: "#000000"
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["tab-switch", "update:visible"],
+  setup(props, { emit, slots }) {
+    const mdValue = reactive({
+      val: props.visible,
+      children: []
+    });
+    function changeIndex(active) {
+      emit("update:visible", active);
+      parentData.modelValue = active;
+      emit("tab-switch", parentData.children[active], 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 }])
+  }, [
+    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,142 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { c as createComponent } from "./component.js";
+import { useRouter } from "vue-router";
+import { inject, reactive, getCurrentInstance, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { create } = createComponent("tabbar-item");
+const _sfc_main = create({
+  props: {
+    tabTitle: {
+      type: String,
+      default: ""
+    },
+    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"
+    },
+    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) => {
+      if (child.proxy) {
+        let index2 = parent.children.length;
+        state.index = index2;
+        let obj = Object.assign({}, child.proxy, { index: index2 });
+        parent.children.push(obj);
+      }
+    };
+    relation(getCurrentInstance());
+    function change(index2) {
+      parent.changeIndex(index2);
+    }
+    const choosed = computed(() => {
+      if (parent) {
+        return parent.modelValue;
+      }
+      return null;
+    });
+    watch(choosed, (value, oldValue) => {
+      state.active = value;
+      setTimeout(() => {
+        if (parent.children[value].href) {
+          window.location.href = parent.children[value].href;
+        }
+        if (parent.children[value].to) {
+          let to = parent.children[value].to;
+          router.push(to);
+        }
+      });
+    });
+    return {
+      state,
+      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: 2 };
+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.state.active != _ctx.state.index }]),
+    style: normalizeStyle({
+      color: _ctx.state.active == _ctx.state.index ? _ctx.state.activeColor : _ctx.state.unactiveColor
+    }),
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.change(_ctx.state.index))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      _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),
+      _ctx.icon ? (openBlock(), createElementBlock("view", _hoisted_4, [
+        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.state.active == _ctx.state.index ? _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 }
+        ])
+      }, toDisplayString(_ctx.tabTitle), 3)
+    ])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Tag.js

@@ -0,0 +1,98 @@
+/*!
+* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createBlock, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+const { componentName, create } = createComponent("tag");
+const _sfc_main = create({
+  props: {
+    color: String,
+    textColor: String,
+    type: {
+      type: String,
+      default: "default"
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    mark: {
+      type: Boolean,
+      default: false
+    },
+    closeable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    const { type, color, plain, round, mark, textColor } = toRefs(props);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--${type.value}`]: type.value,
+        [`${prefixCls}--plain`]: plain.value,
+        [`${prefixCls}--round`]: round.value,
+        [`${prefixCls}--mark`]: mark.value
+      };
+    });
+    const getStyle = () => {
+      if (color == null ? void 0 : color.value) {
+        return {
+          background: color.value,
+          color: textColor.value
+        };
+      }
+      if (plain.value) {
+        return {
+          color: "#FA2400",
+          background: "#fff",
+          border: "1px solid rgba(250,36,0,1)"
+        };
+      }
+      return {
+        color: "",
+        background: ""
+      };
+    };
+    const onClose = (event) => {
+      event.stopPropagation();
+      emit("close", event);
+    };
+    return {
+      classes,
+      getStyle,
+      onClose
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-tag" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.getStyle())
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default"),
+      _ctx.closeable ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 0,
+        class: "nut-tag--close",
+        name: "close",
+        size: "12",
+        onClick: _ctx.onClose
+      }, null, 8, ["onClick"])) : createCommentVNode("", true)
+    ])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };