first commit

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-subsection/props.js

@@ -0,0 +1,52 @@
+"use strict";
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const props = {
+  props: {
+    // tab的数据
+    list: {
+      type: Array,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.list
+    },
+    // 当前活动的tab的index
+    current: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.current
+    },
+    // 激活的颜色
+    activeColor: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.activeColor
+    },
+    // 未激活的颜色
+    inactiveColor: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.inactiveColor
+    },
+    // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+    mode: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.mode
+    },
+    // 字体大小
+    fontSize: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.fontSize
+    },
+    // 激活tab的字体是否加粗
+    bold: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.bold
+    },
+    // mode = button时，组件背景颜色
+    bgColor: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.bgColor
+    },
+    // 从list元素对象中读取的键名
+    keyName: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.subsection.keyName
+    }
+  }
+};
+exports.props = props;

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-subsection/u-subsection.acss

@@ -0,0 +1,90 @@
+.u-empty.data-v-b5ccb67e,
+.u-empty__wrap.data-v-b5ccb67e,
+.u-tabs.data-v-b5ccb67e,
+.u-tabs__wrapper.data-v-b5ccb67e,
+.u-tabs__wrapper__scroll-view-wrapper.data-v-b5ccb67e,
+.u-tabs__wrapper__scroll-view.data-v-b5ccb67e,
+.u-tabs__wrapper__nav.data-v-b5ccb67e,
+.u-tabs__wrapper__nav__line.data-v-b5ccb67e {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.u-subsection.data-v-b5ccb67e {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+.u-subsection--button.data-v-b5ccb67e {
+  height: 34px;
+  background-color: #eeeeef;
+  padding: 3px;
+  border-radius: 4px;
+  align-items: stretch;
+}
+.u-subsection--button__bar.data-v-b5ccb67e {
+  background-color: #ffffff;
+  border-radius: 4px !important;
+}
+.u-subsection--subsection.data-v-b5ccb67e {
+  height: 32px;
+}
+.u-subsection__bar.data-v-b5ccb67e {
+  position: absolute;
+  transition-property: transform, color;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+}
+.u-subsection__bar--first.data-v-b5ccb67e {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.u-subsection__bar--center.data-v-b5ccb67e {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.u-subsection__bar--last.data-v-b5ccb67e {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.u-subsection__item.data-v-b5ccb67e {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.u-subsection__item--no-border-right.data-v-b5ccb67e {
+  border-right-width: 0 !important;
+}
+.u-subsection__item--first.data-v-b5ccb67e {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.u-subsection__item--last.data-v-b5ccb67e {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.u-subsection__item__text.data-v-b5ccb67e {
+  font-size: 12px;
+  line-height: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition-property: color;
+  transition-duration: 0.3s;
+}

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-subsection/u-subsection.axml

@@ -0,0 +1 @@
+<view ref="u-subsection" class="{{('u-subsection') + ' ' + 'data-v-b5ccb67e' + ' ' + g}}" style="{{h + ';' + i}}"><view ref="u-subsection__bar" style="{{a}}" class="{{('u-subsection__bar') + ' ' + 'cursor-pointer' + ' ' + 'data-v-b5ccb67e' + ' ' + b + ' ' + c + ' ' + d + ' ' + e}}"></view><view a:for="{{f}}" a:for-item="item" a:key="j" class="{{('u-subsection__item') + ' ' + 'cursor-pointer' + ' ' + 'data-v-b5ccb67e' + ' ' + item.c + ' ' + item.d + ' ' + item.e + ' ' + item.f}}" ref="{{item.g}}" style="{{item.h}}" onTap="{{item.i}}"><text class="u-subsection__item__text data-v-b5ccb67e" style="{{item.b}}">{{item.a}}</text></view></view>

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-subsection/u-subsection.js

@@ -0,0 +1,140 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_uviewPlus_components_uSubsection_props = require("./props.js");
+const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
+const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
+const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
+const _sfc_main = {
+  name: "u-subsection",
+  mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uSubsection_props.props],
+  data() {
+    return {
+      // 组件尺寸
+      itemRect: {
+        width: 0,
+        height: 0
+      },
+      innerCurrent: "",
+      windowResizeCallback: {}
+    };
+  },
+  watch: {
+    list(newValue, oldValue) {
+      this.init();
+    },
+    current: {
+      immediate: true,
+      handler(n) {
+        if (n !== this.innerCurrent) {
+          this.innerCurrent = n;
+        }
+      }
+    }
+  },
+  computed: {
+    wrapperStyle() {
+      const style = {};
+      if (this.mode === "button") {
+        style.backgroundColor = this.bgColor;
+      }
+      return style;
+    },
+    // 滑块的样式
+    barStyle() {
+      const style = {};
+      style.width = `${this.itemRect.width}px`;
+      style.height = `${this.itemRect.height}px`;
+      style.transform = `translateX(${this.innerCurrent * this.itemRect.width}px)`;
+      if (this.mode === "subsection") {
+        style.backgroundColor = this.activeColor;
+      }
+      return style;
+    },
+    // 分段器item的样式
+    itemStyle(index) {
+      return (index2) => {
+        const style = {};
+        if (this.mode === "subsection") {
+          style.borderColor = this.activeColor;
+          style.borderWidth = "1px";
+          style.borderStyle = "solid";
+        }
+        return style;
+      };
+    },
+    // 分段器文字颜色
+    textStyle(index) {
+      return (index2) => {
+        const style = {};
+        style.fontWeight = this.bold && this.innerCurrent === index2 ? "bold" : "normal";
+        style.fontSize = uni_modules_uviewPlus_libs_function_index.addUnit(this.fontSize);
+        if (this.mode === "subsection") {
+          style.color = this.innerCurrent === index2 ? "#fff" : this.inactiveColor;
+        } else {
+          style.color = this.innerCurrent === index2 ? this.activeColor : this.inactiveColor;
+        }
+        return style;
+      };
+    }
+  },
+  mounted() {
+    this.init();
+    this.windowResizeCallback = (res) => {
+      this.init();
+    };
+    common_vendor.index.onWindowResize(this.windowResizeCallback);
+  },
+  beforeUnmount() {
+    common_vendor.index.offWindowResize(this.windowResizeCallback);
+  },
+  emits: ["change"],
+  methods: {
+    addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
+    init() {
+      this.innerCurrent = this.current;
+      uni_modules_uviewPlus_libs_function_index.sleep().then(() => this.getRect());
+    },
+    // 判断展示文本
+    getText(item) {
+      return typeof item === "object" ? item[this.keyName] : item;
+    },
+    // 获取组件的尺寸
+    getRect() {
+      this.$uGetRect(".u-subsection__item--0").then((size) => {
+        this.itemRect = size;
+      });
+    },
+    clickHandler(index) {
+      this.innerCurrent = index;
+      this.$emit("change", index);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.s($options.barStyle),
+    b: common_vendor.n(_ctx.mode === "button" && "u-subsection--button__bar"),
+    c: common_vendor.n($data.innerCurrent === 0 && _ctx.mode === "subsection" && "u-subsection__bar--first"),
+    d: common_vendor.n($data.innerCurrent > 0 && $data.innerCurrent < _ctx.list.length - 1 && _ctx.mode === "subsection" && "u-subsection__bar--center"),
+    e: common_vendor.n($data.innerCurrent === _ctx.list.length - 1 && _ctx.mode === "subsection" && "u-subsection__bar--last"),
+    f: common_vendor.f(_ctx.list, (item, index, i0) => {
+      return {
+        a: common_vendor.t($options.getText(item)),
+        b: common_vendor.s($options.textStyle(index)),
+        c: common_vendor.n(`u-subsection__item--${index}`),
+        d: common_vendor.n(index < _ctx.list.length - 1 && "u-subsection__item--no-border-right"),
+        e: common_vendor.n(index === 0 && "u-subsection__item--first"),
+        f: common_vendor.n(index === _ctx.list.length - 1 && "u-subsection__item--last"),
+        g: `u-subsection__item--${index}`,
+        h: common_vendor.s($options.itemStyle(index)),
+        i: common_vendor.o(($event) => $options.clickHandler(index)),
+        j: index
+      };
+    }),
+    g: common_vendor.n(`u-subsection--${_ctx.mode}`),
+    h: common_vendor.s($options.addStyle(_ctx.customStyle)),
+    i: common_vendor.s($options.wrapperStyle)
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b5ccb67e"]]);
+my.createComponent(Component);

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-subsection/u-subsection.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}