[Improvement] Picker: update unselected option color (#1142)

packages/picker/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`column watch default index 1`] = `
+<div class="van-picker-column">
+  <ul style="line-height: 50px;">
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1990</li>
+    <li class="van-ellipsis van-picker-column__item">1991</li>
+    <li class="van-ellipsis van-picker-column__item">1992</li>
+    <li class="van-ellipsis van-picker-column__item">1993</li>
+    <li class="van-ellipsis van-picker-column__item">1994</li>
+    <li class="van-ellipsis van-picker-column__item">1995</li>
+  </ul>
+</div>
+`;
+
+exports[`column watch default index 2`] = `
+<div class="van-picker-column">
+  <ul style="line-height: 50px;">
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1990</li>
+    <li class="van-ellipsis van-picker-column__item">1991</li>
+    <li class="van-ellipsis van-picker-column__item">1992</li>
+    <li class="van-ellipsis van-picker-column__item">1993</li>
+    <li class="van-ellipsis van-picker-column__item">1994</li>
+    <li class="van-ellipsis van-picker-column__item">1995</li>
+  </ul>
+</div>
+`;
+
+exports[`column watch default index 3`] = `
+<div class="van-picker-column">
+  <ul style="line-height: 50px;">
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
+  </ul>
+</div>
+`;

packages/picker/test/index.spec.js

@@ -0,0 +1,122 @@
+import Picker from '../';
+import PickerColumn from '../PickerColumn';
+import { mount } from '@vue/test-utils';
+import { triggerDrag } from '../../../test/touch-utils';
+
+const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
+const columns = [
+  {
+    values: ['vip', 'normal'],
+    className: 'column1'
+  },
+  {
+    values: simpleColumn,
+    className: 'column2'
+  }
+];
+
+test('simple columns confirm & cancel event', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      showToolbar: true,
+      columns: simpleColumn
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('confirm')[0]).toEqual(['1990', 0]);
+  expect(wrapper.emitted('cancel')[0]).toEqual(['1990', 0]);
+  wrapper.vm.$destroy();
+});
+
+test('multiple columns confirm & cancel event', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      showToolbar: true
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('confirm')[0]).toEqual([[], []]);
+  expect(wrapper.emitted('cancel')[0]).toEqual([[], []]);
+});
+
+test('set picker values', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns
+    }
+  });
+  const { vm } = wrapper;
+
+  expect(vm.getColumnValues(-1)).toEqual(undefined);
+  expect(vm.getColumnValues(1).length).toEqual(6);
+  expect(vm.getColumnValue(1)).toEqual('1990');
+
+  vm.setColumnValue(0, 'normal');
+  expect(vm.getColumnValue(0)).toEqual('normal');
+
+  vm.setColumnIndex(0, 0);
+  expect(vm.getColumnValue(0)).toEqual('vip');
+
+  vm.setColumnValue(1, '1991');
+  expect(vm.getColumnValue(1)).toEqual('1991');
+
+  vm.setColumnValues(0, ['vip', 'normal', 'other']);
+  expect(vm.getColumnValues(0).length).toEqual(3);
+  expect(vm.getValues().length).toEqual(2);
+
+  vm.setColumnValues(-1, []);
+  expect(vm.getValues().length).toEqual(2);
+
+  vm.setValues(['vip', '1992']);
+  expect(vm.getColumnIndex(1)).toEqual(2);
+  expect(vm.getColumnIndex(2)).toEqual(undefined);
+  expect(vm.getIndexes(2)).toEqual([0, 2]);
+
+  vm.setIndexes([1, 4]);
+  expect(vm.getColumnValue(1)).toEqual('1994');
+  expect(vm.getColumnValue(2)).toEqual(undefined);
+});
+
+test('drag columns', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns
+    }
+  });
+  triggerDrag(wrapper.find('.van-picker-column'), 0, 0);
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
+});
+
+test('drag simple columns', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns: simpleColumn
+    }
+  });
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  expect(wrapper.emitted('change')[0][1]).toEqual('1992');
+});
+
+test('column watch default index', () => {
+  const disabled = { disabled: true, text: 1 };
+  const wrapper = mount(PickerColumn, {
+    propsData: {
+      valueKey: 'text',
+      itemHeight: 50
+    }
+  });
+  wrapper.vm.options = [disabled, ...simpleColumn];
+  expect(wrapper.html()).toMatchSnapshot();
+
+  wrapper.vm.options = [disabled, ...simpleColumn];
+  expect(wrapper.html()).toMatchSnapshot();
+
+  wrapper.vm.options = [1, disabled, disabled, disabled];
+  wrapper.vm.defaultIndex = 2;
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant-css/src/picker.css

@@ -67,7 +67,7 @@
 
     &__item {
       padding: 0 5px;
-      color: $gray-darker;
+      color: $gray-dark;
 
       &--selected {
         color: $black;