@vtj/materials 0.10.1-alpha.6 → 0.10.1-alpha.7

package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list-item.vue

@@ -0,0 +1,144 @@
+<template>
+	<view>
+		<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
+			<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
+		</view>
+		<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
+			<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
+				<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
+					<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
+						<view v-if="showSelect" style="margin-right: 20rpx;">
+							<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
+						</view>
+						<text class="uni-indexed-list__item-content">{{ item.name }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniIndexedList',
+		emits:['itemClick'],
+		props: {
+			loaded: {
+				type: Boolean,
+				default: false
+			},
+			idx: {
+				type: Number,
+				default: 0
+			},
+			list: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			showSelect: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(idx, index) {
+				this.$emit("itemClick", {
+					idx,
+					index
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-indexed-list__list {
+		background-color: $uni-bg-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		border-top-style: solid;
+		border-top-width: 1px;
+		border-top-color: #DEDEDE;
+	}
+
+	.uni-indexed-list__item {
+		font-size: 14px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.uni-indexed-list__item-container {
+		padding-left: 15px;
+		flex: 1;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-indexed-list__item-border {
+		flex: 1;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		height: 50px;
+		padding: 25px;
+		padding-left: 0;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		border-bottom-color:  #DEDEDE;
+	}
+
+	.uni-indexed-list__item-border--last {
+		border-bottom-width: 0px;
+	}
+
+	.uni-indexed-list__item-content {
+		flex: 1;
+		font-size: 14px;
+		color: #191919;
+	}
+
+	.uni-indexed-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-indexed-list__title-wrapper {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		background-color: #f7f7f7;
+	}
+
+	.uni-indexed-list__title {
+		padding: 6px 12px;
+		line-height: 24px;
+		font-size: 16px;
+		font-weight: 500;
+	}
+</style>

package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list.vue

@@ -0,0 +1,404 @@
+<template>
+  <view class="uni-indexed-list" ref="list" id="list">
+    <!-- #ifdef APP-NVUE -->
+    <list
+      class="uni-indexed-list__scroll"
+      scrollable="true"
+      show-scrollbar="false">
+      <cell
+        v-for="(list, idx) in lists"
+        :key="idx"
+        :ref="'uni-indexed-list-' + idx">
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+        <!-- <scroll-view
+          :scroll-into-view="scrollViewId"
+          class="uni-indexed-list__scroll"
+          scroll-y>
+          <view
+            v-for="(list, idx) in lists"
+            :key="idx"
+            :id="'uni-indexed-list-' + idx"> -->
+        <!-- #endif -->
+        <indexed-list-item
+          :list="list"
+          :loaded="loaded"
+          :idx="idx"
+          :showSelect="showSelect"
+          @itemClick="onClick"></indexed-list-item>
+        <!-- #ifndef APP-NVUE -->
+        <!-- </view>
+        </scroll-view> -->
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+      </cell>
+    </list>
+    <!-- #endif -->
+    <view
+      class="uni-indexed-list__menu"
+      @touchstart="touchStart"
+      @touchmove.stop.prevent="touchMove"
+      @touchend="touchEnd"
+      @mousedown.stop="mousedown"
+      @mousemove.stop.prevent="mousemove"
+      @mouseleave.stop="mouseleave">
+      <view
+        v-for="(list, key) in lists"
+        :key="key"
+        class="uni-indexed-list__menu-item"
+        :class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
+        <text
+          class="uni-indexed-list__menu-text"
+          :class="
+            touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''
+          "
+          >{{ list.key }}</text
+        >
+      </view>
+    </view>
+    <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
+      <text class="uni-indexed-list__alert">{{
+        lists[touchmoveIndex].key
+      }}</text>
+    </view>
+  </view>
+</template>
+<script>
+  import indexedListItem from './uni-indexed-list-item.vue';
+  // #ifdef APP-NVUE
+  const dom = weex.requireModule('dom');
+  // #endif
+  // #ifdef APP-PLUS
+  function throttle(func, delay) {
+    var prev = Date.now();
+    return function () {
+      var context = this;
+      var args = arguments;
+      var now = Date.now();
+      if (now - prev >= delay) {
+        func.apply(context, args);
+        prev = Date.now();
+      }
+    };
+  }
+
+  function touchMove(e) {
+    let pageY = e.touches[0].pageY;
+    let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+    if (this.touchmoveIndex === index) {
+      return false;
+    }
+    let item = this.lists[index];
+    if (item) {
+      // #ifndef APP-NVUE
+      this.scrollViewId = 'uni-indexed-list-' + index;
+      this.touchmoveIndex = index;
+      // #endif
+      // #ifdef APP-NVUE
+      dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+        animated: false
+      });
+      this.touchmoveIndex = index;
+      // #endif
+    }
+  }
+  const throttleTouchMove = throttle(touchMove, 40);
+  // #endif
+
+  /**
+   * IndexedList 索引列表
+   * @description 用于展示索引列表
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=375
+   * @property {Boolean} showSelect = [true|false] 展示模式
+   * 	@value true 展示模式
+   * 	@value false 选择模式
+   * @property {Object} options 索引列表需要的数据对象
+   * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
+   * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
+   */
+  export default {
+    name: 'UniIndexedList',
+    components: {
+      indexedListItem
+    },
+    emits: ['click'],
+    props: {
+      options: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      showSelect: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        lists: [],
+        winHeight: 0,
+        itemHeight: 0,
+        winOffsetY: 0,
+        touchmove: false,
+        touchmoveIndex: -1,
+        scrollViewId: '',
+        touchmovable: true,
+        loaded: false,
+        isPC: false
+      };
+    },
+    watch: {
+      options: {
+        handler: function () {
+          this.setList();
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      // #ifdef H5
+      this.isPC = this.IsPC();
+      // #endif
+      setTimeout(() => {
+        this.setList();
+      }, 50);
+      setTimeout(() => {
+        this.loaded = true;
+      }, 300);
+    },
+    methods: {
+      setList() {
+        let index = 0;
+        this.lists = [];
+        this.options.forEach((value, index) => {
+          if (value.data.length === 0) {
+            return;
+          }
+          let indexBefore = index;
+          let items = value.data.map((item) => {
+            let obj = {};
+            obj['key'] = value.letter;
+            obj['name'] = item;
+            obj['itemIndex'] = index;
+            index++;
+            obj.checked = item.checked ? item.checked : false;
+            return obj;
+          });
+          this.lists.push({
+            title: value.letter,
+            key: value.letter,
+            items: items,
+            itemIndex: indexBefore
+          });
+        });
+        // #ifndef APP-NVUE
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('#list')
+          .boundingClientRect()
+          .exec((ret) => {
+            this.winOffsetY = ret[0].top;
+            this.winHeight = ret[0].height;
+            this.itemHeight = this.winHeight / this.lists.length;
+          });
+        // #endif
+        // #ifdef APP-NVUE
+        dom.getComponentRect(this.$refs['list'], (res) => {
+          this.winOffsetY = res.size.top;
+          this.winHeight = res.size.height;
+          this.itemHeight = this.winHeight / this.lists.length;
+        });
+        // #endif
+      },
+      touchStart(e) {
+        this.touchmove = true;
+        let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
+        let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+        let item = this.lists[index];
+        if (item) {
+          this.scrollViewId = 'uni-indexed-list-' + index;
+          this.touchmoveIndex = index;
+          // #ifdef APP-NVUE
+          dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+            animated: false
+          });
+          // #endif
+        }
+      },
+      touchMove(e) {
+        // #ifndef APP-PLUS
+        let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
+        let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+        if (this.touchmoveIndex === index) {
+          return false;
+        }
+        let item = this.lists[index];
+        if (item) {
+          this.scrollViewId = 'uni-indexed-list-' + index;
+          this.touchmoveIndex = index;
+        }
+        // #endif
+        // #ifdef APP-PLUS
+        throttleTouchMove.call(this, e);
+        // #endif
+      },
+      touchEnd() {
+        this.touchmove = false;
+        // this.touchmoveIndex = -1
+      },
+
+      /**
+       * 兼容 PC @tian
+       */
+
+      mousedown(e) {
+        if (!this.isPC) return;
+        this.touchStart(e);
+      },
+      mousemove(e) {
+        if (!this.isPC) return;
+        this.touchMove(e);
+      },
+      mouseleave(e) {
+        if (!this.isPC) return;
+        this.touchEnd(e);
+      },
+
+      // #ifdef H5
+      IsPC() {
+        var userAgentInfo = navigator.userAgent;
+        var Agents = [
+          'Android',
+          'iPhone',
+          'SymbianOS',
+          'Windows Phone',
+          'iPad',
+          'iPod'
+        ];
+        var flag = true;
+        for (let v = 0; v < Agents.length - 1; v++) {
+          if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = false;
+            break;
+          }
+        }
+        return flag;
+      },
+      // #endif
+
+      onClick(e) {
+        let { idx, index } = e;
+        let obj = {};
+        for (let key in this.lists[idx].items[index]) {
+          obj[key] = this.lists[idx].items[index][key];
+        }
+        let select = [];
+        if (this.showSelect) {
+          this.lists[idx].items[index].checked =
+            !this.lists[idx].items[index].checked;
+          this.lists.forEach((value, idx) => {
+            value.items.forEach((item, index) => {
+              if (item.checked) {
+                let obj = {};
+                for (let key in this.lists[idx].items[index]) {
+                  obj[key] = this.lists[idx].items[index][key];
+                }
+                select.push(obj);
+              }
+            });
+          });
+        }
+        this.$emit('click', {
+          item: obj,
+          select: select
+        });
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .uni-indexed-list {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+  }
+
+  .uni-indexed-list__scroll {
+    flex: 1;
+  }
+
+  .uni-indexed-list__menu {
+    width: 24px;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+  }
+
+  .uni-indexed-list__menu-item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-indexed-list__menu-text {
+    font-size: 12px;
+    text-align: center;
+    color: #aaa;
+  }
+
+  .uni-indexed-list__menu--active {
+    // background-color: rgb(200, 200, 200);
+  }
+
+  .uni-indexed-list__menu--active {
+  }
+
+  .uni-indexed-list__menu-text--active {
+    border-radius: 16px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    background-color: #007aff;
+    color: #fff;
+  }
+
+  .uni-indexed-list__alert-wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .uni-indexed-list__alert {
+    width: 80px;
+    height: 80px;
+    border-radius: 80px;
+    text-align: center;
+    line-height: 80px;
+    font-size: 35px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+</style>

package/src/uni-ui/lib/uni-list/uni-list.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view class="uni-list uni-border-top-bottom">
+    <view v-if="border" class="uni-list--border-top"></view>
+    <slot />
+    <view v-if="border" class="uni-list--border-bottom"></view>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <!-- <list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
+		loadmoreoffset="15">
+		<slot />
+	</list> -->
+  <!-- #endif -->
+</template>
+
+<script>
+  /**
+   * List 列表
+   * @description 列表组件
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+   * @property {String} 	border = [true|false] 		标题
+   */
+  export default {
+    name: 'uniList',
+    'mp-weixin': {
+      options: {
+        multipleSlots: false
+      }
+    },
+    props: {
+      stackFromEnd: {
+        type: Boolean,
+        default: false
+      },
+      enableBackToTop: {
+        type: [Boolean, String],
+        default: false
+      },
+      scrollY: {
+        type: [Boolean, String],
+        default: false
+      },
+      border: {
+        type: Boolean,
+        default: true
+      },
+      renderReverse: {
+        type: Boolean,
+        default: false
+      }
+    },
+    // provide() {
+    // 	return {
+    // 		list: this
+    // 	};
+    // },
+    created() {
+      this.firstChildAppend = false;
+    },
+    methods: {
+      loadMore(e) {
+        this.$emit('scrolltolower');
+      },
+      scroll(e) {
+        this.$emit('scroll', e);
+      }
+    }
+  };
+</script>
+<style lang="scss">
+  $uni-bg-color: #ffffff;
+  $uni-border-color: #e5e5e5;
+
+  .uni-list {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    background-color: $uni-bg-color;
+    position: relative;
+    flex-direction: column;
+  }
+
+  .uni-list--border {
+    position: relative;
+    /* #ifdef APP-NVUE */
+    border-top-color: $uni-border-color;
+    border-top-style: solid;
+    border-top-width: 0.5px;
+    border-bottom-color: $uni-border-color;
+    border-bottom-style: solid;
+    border-bottom-width: 0.5px;
+    /* #endif */
+    z-index: -1;
+  }
+
+  /* #ifndef APP-NVUE */
+
+  .uni-list--border-top {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 1px;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    background-color: $uni-border-color;
+    z-index: 1;
+  }
+
+  .uni-list--border-bottom {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 1px;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    background-color: $uni-border-color;
+  }
+
+  /* #endif */
+</style>