@nutui/nutui 3.1.10-beta.1 → 3.1.11-beta.0

package/dist/styles/variables.scss

@@ -109,8 +109,8 @@ $icon-line-height: 20px !default;
 
 // uploader
 
-$uploader-width: 100px !default;
-$uploader-height: 100px !default;
+$uploader-picture-width: 100px !default;
+$uploader-picture-height: 100px !default;
 $uploader-background: #f7f8fa !default;
 
 //input
@@ -149,8 +149,20 @@ $shortpsd-border-color: #ddd !default;
 $shortpsd-error: rgba(242, 39, 12, 1) !default;
 $shortpsd-forget: rgba(128, 128, 128, 1) !default;
 
-//price
+//large price
+$price-symbol-big-size: 18px !default;
 $price-big-size: 24px !default;
+$price-decimal-big-size: 18px !default;
+
+//normal price
+$price-symbol-medium-size: 14px !default;
+$price-medium-size: 16px !default;
+$price-decimal-medium-size: 14px !default;
+
+// small price
+$price-symbol-small-size: 10px !default;
+$price-small-size: 12px !default;
+$price-decimal-small-size: 10px !default;
 
 //avatar
 $avatar-square: 5px !default;
@@ -246,10 +258,13 @@ $checkbox-label-disable-color: #999 !default;
 $checkbox-icon-disable-color: #d6d6d6 !default;
 
 //radio
-$radio-label-color: #1d1e1e !default;
+$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-active-color: #f0250f !default;
 $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
 
+$radio-label-button-border-color: #f0250f !default;
+$radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
 //fixednav
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
@@ -285,6 +300,8 @@ $timedetail-time-text-color: #999 !default;
 $timedetail-time-font-size: $font-size-1 !default;
 //tag
 $tag-font-size: 12px !default;
+$tag-default-border-radius: 4px !default;
+$tag-round-border-radius: 8px !default;
 $tag-default-background-color: #000000 !default;
 $tag-primary-background-color: #3460fa !default;
 $tag-success-background-color: #4fc08d !default;
@@ -328,18 +345,41 @@ $pagination-disable-background-color: #f7f8fa !default;
 $pagination-item-border-width: 1px !default;
 $pagination-item-border-radius: 2px !default;
 $pagination-prev-next-padding: 0 11px !default;
-
 // tabs
-$tabs-tab-line: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;
+$tabs-tab-smile-color: $primary-color !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
 $tabs-titles-item-color: $title-color !default;
 $tabs-titles-background-color: $help-color !default;
+$tabs-horizontal-tab-line-color: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;
 $tabs-horizontal-titles-height: 46px !default;
 $tabs-horizontal-titles-item-min-width: 50px !default;
 $tabs-horizontal-titles-item-active-line-width: 40px !default;
+$tabs-vertical-tab-line-color: linear-gradient(180deg, #f5503a 0%, #fad1cb 100%) !default;
 $tabs-vertical-titles-item-height: 40px !default;
+$tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
 
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-input-background: #f7f7f7 !default;
+$searchbar-right-out-color: $black !default;
+
+// sku
+$sku-item-border: 1px solid $primary-color;
+$sku-item-disable-line: line-through;
+$sku-opetate-bg-default: linear-gradient(
+  135deg,
+  rgba(242, 20, 12, 1) 0%,
+  rgba(242, 39, 12, 1) 70%,
+  rgba(242, 77, 12, 1) 100%
+);
+$sku-opetate-bg-buy: linear-gradient(
+  135deg,
+  rgba(255, 186, 13, 1) 0%,
+  rgba(255, 195, 13, 1) 69%,
+  rgba(255, 207, 13, 1) 100%
+);
+
 @import './mixins/index';
 @import './animation/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.1.10-beta.1",
+  "version": "3.1.11-beta.0",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",

package/dist/packages/_es/Tab.js

@@ -1,178 +0,0 @@
-/*!
-* @nutui/nutui v3.1.10-beta.1 Thu Oct 28 2021 09:26:47 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";
-var TabTitle = {
-  setup(props) {
-    return () => h(`view`, {}, props.slots);
-  },
-  props: {
-    slots: Object
-  }
-};
-const { create } = createComponent("tab");
-var _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(index) {
-      if (navlist.value) {
-        const currEle = navlist.value.querySelectorAll(".tab-title-box")[index];
-        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 = (index) => {
-      activeIndex.value = index;
-      centerTitle(index);
-    };
-    function switchTitle(index) {
-      activeIndex.value = index;
-      centerTitle(index);
-      nutuiSwiper.value.to(index);
-    }
-    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, index) => {
-          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, index) => {
-          return openBlock(), createElementBlock("view", {
-            class: normalizeClass([
-              "tab-title-box",
-              { "nut-tab-active": _ctx.activeIndex == index },
-              { "tab-title-box-scroll": _ctx.scrollType == "scroll" }
-            ]),
-            key: index,
-            onClick: ($event) => _ctx.switchTitle(index, $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)
-  ]);
-}
-_sfc_main.render = _sfc_render;
-export { _sfc_main as default };

package/dist/packages/_es/TabPanel.js

@@ -1,29 +0,0 @@
-/*!
-* @nutui/nutui v3.1.10-beta.1 Thu Oct 28 2021 09:26:47 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";
-const { create } = createComponent("tab-panel");
-var _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
-  });
-}
-_sfc_main.render = _sfc_render;
-export { _sfc_main as default };

package/dist/packages/_es/index.vue_vue&type=script&lang.js

@@ -1,44 +0,0 @@
-/*!
-* @nutui/nutui v3.1.10-beta.1 Thu Oct 28 2021 09:26:47 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
-* Released under the MIT License.
-*/
-import { h } from "vue";
-import { c as createComponent } from "./component.js";
-import { p as pxCheck } from "./pxCheck.js";
-const { componentName, create } = createComponent("icon");
-var _sfc_main = create({
-  props: {
-    name: { type: String, default: "" },
-    size: { type: [String, Number], default: "" },
-    classPrefix: { type: String, default: "nut-icon" },
-    fontClassName: { type: String, default: "nutui-iconfont" },
-    color: { type: String, default: "" },
-    tag: { type: String, default: "i" }
-  },
-  emits: ["click"],
-  setup(props, { emit, slots }) {
-    const handleClick = (event) => {
-      emit("click", event);
-    };
-    const isImage = () => {
-      return props.name ? props.name.indexOf("/") !== -1 : false;
-    };
-    return () => {
-      var _a;
-      const _isImage = isImage();
-      return h(_isImage ? "img" : props.tag, {
-        class: _isImage ? `${componentName}__img` : `${props.fontClassName} ${componentName} ${props.classPrefix}-${props.name}`,
-        style: {
-          color: props.color,
-          fontSize: pxCheck(props.size),
-          width: pxCheck(props.size),
-          height: pxCheck(props.size)
-        },
-        onClick: handleClick,
-        src: _isImage ? props.name : ""
-      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
-    };
-  }
-});
-export { _sfc_main as _ };

package/dist/packages/tab/index.scss

@@ -1,182 +0,0 @@
-.nutui-tab {
-  .horizontal-tab {
-    .tab-title-scroll {
-      width: 100%;
-      height: 46px;
-      overflow-x: scroll;
-      display: flex;
-      flex-wrap: nowrap;
-      scroll-behavior: smooth;
-      background: #f5f5f5;
-    }
-    .tab-title {
-      width: 100%;
-      height: 46px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      scroll-behavior: smooth;
-      background: #f5f5f5;
-      position: relative;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .underline {
-        position: absolute;
-      }
-      .tab-title-box {
-        height: 100%;
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 14px;
-      }
-      .tab-title-box-scroll {
-        min-width: 75px;
-      }
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 5px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 12px;
-          height: 4px;
-          background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .tab-title-scroll {
-      overflow-x: scroll;
-    }
-    .half {
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          display: none;
-        }
-        .world {
-          position: relative;
-          &::after {
-            content: '';
-            position: absolute;
-            right: -8px;
-            bottom: -5px;
-            width: 11px;
-            height: 10px;
-            background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
-            background-size: 100% 100%;
-          }
-        }
-      }
-    }
-    .tab-swiper {
-      overflow: hidden;
-      display: block;
-      width: 100%;
-      height: 200px;
-      background: #fff;
-      box-sizing: border-box;
-    }
-  }
-  .vertical-tab {
-    display: flex;
-    height: 175px;
-    .tab-title-scroll {
-      width: 100px;
-      height: 175px;
-      display: flex;
-      flex-wrap: nowrap;
-      scroll-behavior: smooth;
-      background: #f5f5f5;
-    }
-    .tab-title {
-      width: 100px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .tab-title-box {
-        width: 100%;
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: #f5f5f5;
-      }
-      .tab-title-box-scroll {
-        min-height: 50px;
-      }
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        background-color: #fff;
-        &::after {
-          content: '';
-          position: absolute;
-          right: -4px;
-          top: 50%;
-          left: auto;
-          transform: translateY(-50%) rotate(270deg);
-          width: 12px;
-          height: 4px;
-          background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .tab-title-scroll {
-      overflow-y: scroll;
-    }
-    .half {
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          display: none;
-        }
-        .world {
-          position: relative;
-          &::after {
-            content: '';
-            position: absolute;
-            right: -15px;
-            bottom: -5px;
-            width: 11px;
-            height: 10px;
-            background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/197875/38/105/620/60ffcd30E34877e77/54c3dd9fe0a5ab76.png');
-            background-size: 100% 100%;
-          }
-        }
-      }
-    }
-    .tab-swiper {
-      overflow: hidden;
-      display: block;
-      flex: 1;
-      height: 100%;
-      background: #fff;
-      box-sizing: border-box;
-    }
-  }
-}

package/dist/packages/tabpanel/index.scss

@@ -1,2 +0,0 @@
-.nut-temp {
-}