Merge remote-tracking branch 'main/dev' into dev

packages/deep-select/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="van-deep-select" v-bind:style="{ height: mainHeight + 'px' }">
+    <div class="van-deep-select__nav">
+      <div
+        v-for="(item, index) in items"
+        class="van-deep-select__nitem"
+        v-bind:class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }"
+        @click="onNavClick(index)">
+        {{ item.text }}
+      </div>
+    </div>
+    <div class="van-deep-select__content" v-bind:style="{ height: itemHeight + 'px' }">
+      <div
+        v-for="item in subItems"
+        :key="item.id"
+        class="van-deep-select__item"
+        v-bind:class="{ 'van-deep-select__item--active': activeId === item.id }"
+        @click="onItemSelect(item)">
+        {{ item.text }}
+        <van-icon
+          v-if="activeId === item.id"
+          name="success"
+          class="van-deep-select__selected"
+        ></van-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from 'packages/icon';
+
+export default {
+  name: 'van-deep-select',
+
+  components: {
+    'van-icon': Icon
+  },
+
+  props: {
+    items: {
+      type: Array,
+      default () {
+        return [];
+      }
+    },
+    mainActiveIndex: {
+      type: Number,
+      default: 0
+    },
+    activeId: {
+      type: Number,
+      default: 0
+    },
+    maxHeight: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  computed: {
+    subItems() {
+      const selectedItem = this.items[this.mainActiveIndex] || {};
+      return selectedItem.children || [];
+    },
+    mainHeight() {
+      const maxHeight = Math.max(this.items.length * 44, this.subItems.length * 44);
+      return Math.min(maxHeight, this.maxHeight);
+    },
+    itemHeight() {
+      return Math.min(this.subItems.length * 44, this.maxHeight);
+    }
+  },
+
+  methods: {
+    onNavClick(index) {
+      this.$emit('navclick', index);
+    },
+    onItemSelect(data) {
+      const exportData = Object.assign({}, data);
+      this.$emit('itemclick', exportData);
+    }
+  }
+};
+</script>

packages/index.js

@@ -10,6 +10,7 @@ import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import Col from './col';
 import DatetimePicker from './datetime-picker';
+import DeepSelect from './deep-select';
 import Dialog from './dialog';
 import ExpressWay from './express-way';
 import Field from './field';
@@ -60,6 +61,7 @@ const components = [
   CheckboxGroup,
   Col,
   DatetimePicker,
+  DeepSelect,
   ExpressWay,
   Field,
   GoodsAction,
@@ -120,6 +122,7 @@ export {
   CheckboxGroup,
   Col,
   DatetimePicker,
+  DeepSelect,
   Dialog,
   ExpressWay,
   Field,

packages/mixins/popup/popup-context.js

@@ -1,12 +1,7 @@
 import Vue from 'vue';
 
-let context;
 const _global = Vue.prototype.$isServer ? global : window;
 
-if (_global && _global.popupContext) {
-  context = _global.popupContext;
-}
-
 const DEFAULT_CONTEXT = {
   idSeed: 1,
   zIndex: 2000,
@@ -15,23 +10,24 @@ const DEFAULT_CONTEXT = {
   modalStack: []
 };
 
-context = _global.popupContext = {
-  ...DEFAULT_CONTEXT,
-  ...context
-};
+if (!_global.popupContext) {
+  _global.popupContext = {
+    ...DEFAULT_CONTEXT
+  };
+}
 
 const PopupContext = {
   getContext(key) {
-    return context[key];
+    return _global.popupContext[key];
   },
 
   setContext(key, value) {
-    context[key] = value;
+    _global.popupContext[key] = value;
   },
 
   plusKeyByOne(key) {
-    const oldVal = +context[key];
-    context[key] = oldVal + 1;
+    const oldVal = +_global.popupContext[key];
+    _global.popupContext[key] = oldVal + 1;
 
     return oldVal;
   }

packages/vant-css/src/deep-select.css

@@ -0,0 +1,51 @@
+@import "./mixins/ellipsis";
+@import "./mixins/clearfix";
+@import './common/var.css';
+.van-deep-select {
+  user-select: none;
+  position: relative;
+  @mixin clearfix;
+  &__nav {
+    width: 143px;
+    /*float: left;*/
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow: scroll;
+    background-color: $c-white;
+    -webkit-overflow-scrolling: touch;
+  }
+  &__nitem {
+    line-height: 44px;
+    padding: 0 15px;
+    background-color: $c-white;
+    @mixin multi-ellipsis 1;
+    &--active {
+      background-color: $c-background;
+    }
+  }
+  &__content {
+    padding: 0 15px;
+    margin-left: 143px;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+  &__item {
+    position: relative;
+    line-height: 44px;
+    padding-left: 5px;
+    padding-right: 18px;
+    @mixin multi-ellipsis 1;
+    &--active {
+      color: $button-danger-background-color;
+    }
+  }
+  &__selected {
+    float: right;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    bottom: 0;
+  }
+}

packages/vant-css/src/index.css

@@ -6,6 +6,7 @@
 @import './cell.css';
 @import './cell-swipe.css';
 @import './card.css';
+@import './deep-select.css';
 @import './dialog.css';
 @import './field.css';
 @import './icon.css';