feat(SidebarItem): add disabled prop (#4325)

src/sidebar-item/index.js

@@ -12,7 +12,8 @@ export default createComponent({
   props: {
     ...routeProps,
     info: [Number, String],
-    title: String
+    title: String,
+    disabled: Boolean
   },
 
   computed: {
@@ -23,6 +24,10 @@ export default createComponent({
 
   methods: {
     onClick() {
+      if (this.disabled) {
+        return;
+      }
+
       this.$emit('click', this.index);
       this.parent.$emit('input', this.index);
       this.parent.$emit('change', this.index);
@@ -33,7 +38,7 @@ export default createComponent({
   render() {
     return (
       <a
-        class={[bem({ select: this.select }), BORDER]}
+        class={[bem({ select: this.select, disabled: this.disabled }), BORDER]}
         onClick={this.onClick}
       >
         <div class={bem('text')}>

src/sidebar-item/index.less

@@ -40,4 +40,12 @@
       background-color: @sidebar-selected-background-color;
     }
   }
+
+  &--disabled {
+    color: @sidebar-disabled-text-color;
+
+    &:active {
+      background-color: @sidebar-background-color;
+    }
+  }
 }

src/sidebar/README.md

@@ -62,6 +62,7 @@ export default {
 |------|------|------|------|------|
 | title | Content | *string* | `''` | - |
 | info | Info Message | *string \| number* | `''` | - |
+| disabled | Whether to be disabled | *boolean* | `false` | 2.1.9 |
 | url | Link | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.0.4 |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | 2.0.4 |

src/sidebar/README.zh-CN.md

@@ -66,6 +66,7 @@ export default {
 |------|------|------|------|------|
 | title | 内容 | *string* | `''` | - |
 | info | 提示消息 | *string \| number* | `''` | - |
+| disabled | 是否禁用该项 | *boolean* | `false` | 2.1.9 |
 | url | 跳转链接 | *string* | - | - |
 | to | 路由跳转对象，同 vue-router 的 to 属性 | *string \| object* | - | 2.0.4 |
 | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | 2.0.4 |

src/sidebar/demo/index.vue

@@ -1,29 +1,33 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <van-grid :column-num="2" :border="false">
+      <van-grid-item>
+        <h3 class="demo-sidebar-title">{{ $t('basicUsage') }}</h3>
         <van-sidebar v-model="activeKey1">
           <van-sidebar-item :title="$t('title')" />
           <van-sidebar-item :title="$t('title')" />
           <van-sidebar-item :title="$t('title')" />
         </van-sidebar>
-    </demo-block>
+      </van-grid-item>
 
-    <demo-block :title="$t('showBadge')">
+      <van-grid-item>
+        <h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3>
         <van-sidebar v-model="activeKey2">
-        <van-sidebar-item
+          <van-sidebar-item :title="$t('title')" info="8" />
-          :title="$t('title')"
+          <van-sidebar-item :title="$t('title')" info="99" />
-          info="8"
+          <van-sidebar-item :title="$t('title')" info="99+" />
-        />
-        <van-sidebar-item
-          :title="$t('title')"
-          info="99"
-        />
-        <van-sidebar-item
-          :title="$t('title')"
-          info="99+"
-        />
         </van-sidebar>
-    </demo-block>
+      </van-grid-item>
+
+      <van-grid-item>
+        <h3 class="demo-sidebar-title">{{ $t('disabled') }}</h3>
+        <van-sidebar v-model="activeKey3">
+          <van-sidebar-item :title="$t('title')" />
+          <van-sidebar-item :title="$t('title')" disabled />
+          <van-sidebar-item :title="$t('title')" />
+        </van-sidebar>
+      </van-grid-item>
+    </van-grid>
   </demo-section>
 </template>
 
@@ -31,18 +35,21 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '标签名称',
+      title: '标签名',
-      showBadge: '显示徽标'
+      showBadge: '显示徽标',
+      disabled: '禁用选项'
     },
     'en-US': {
-      showBadge: 'Show Badge'
+      showBadge: 'Show Badge',
+      disabled: 'Disabled'
     }
   },
 
   data() {
     return {
       activeKey1: 0,
-      activeKey2: 0
+      activeKey2: 0,
+      activeKey3: 0
     };
   }
 };
@@ -57,5 +64,12 @@ export default {
   .van-sidebar {
     margin-left: @padding-md;
   }
+
+  &-title {
+    margin-bottom: 16px;
+    color: @gray-dark;
+    font-weight: normal;
+    font-size: 14px;
+  }
 }
 </style>

src/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -2,32 +2,58 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div>
+  <div class="van-grid">
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">基础用法</h3>
         <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
-        <div class="van-sidebar-item__text">标签名称
+            <div class="van-sidebar-item__text">标签名
               <!---->
             </div>
           </a> <a class="van-sidebar-item van-hairline">
-        <div class="van-sidebar-item__text">标签名称
+            <div class="van-sidebar-item__text">标签名
               <!---->
             </div>
           </a> <a class="van-sidebar-item van-hairline">
-        <div class="van-sidebar-item__text">标签名称
+            <div class="van-sidebar-item__text">标签名
               <!---->
             </div>
           </a></div>
       </div>
-  <div>
+    </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">显示徽标</h3>
         <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
-        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">8</div>
             </div>
           </a> <a class="van-sidebar-item van-hairline">
-        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99</div>
             </div>
           </a> <a class="van-sidebar-item van-hairline">
-        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>
             </div>
           </a></div>
       </div>
     </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">禁用选项</h3>
+        <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item van-sidebar-item--disabled van-hairline">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item van-hairline">
+            <div class="van-sidebar-item__text">标签名
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

src/sidebar/test/index.spec.js

@@ -1,20 +1,20 @@
 import { mount } from '../../../test/utils';
+import Vue from 'vue';
 import Sidebar from '..';
 import SidebarItem from '../../sidebar-item';
 
+Vue.use(Sidebar);
+Vue.use(SidebarItem);
+
 test('click event & change event', () => {
   const onClick = jest.fn();
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <sidebar @change="onChange">
+      <van-sidebar @change="onChange">
-        <sidebar-item @click="onClick">Text</sidebar-item>
+        <van-sidebar-item @click="onClick">Text</van-sidebar-item>
-      </sidebar>
+      </van-sidebar>
     `,
-    components: {
-      Sidebar,
-      SidebarItem
-    },
     methods: {
       onClick,
       onChange
@@ -30,15 +30,11 @@ test('click event & change event', () => {
 test('v-model', () => {
   const wrapper = mount({
     template: `
-      <sidebar v-model="active">
+      <van-sidebar v-model="active">
-        <sidebar-item>Text</sidebar-item>
+        <van-sidebar-item>Text</van-sidebar-item>
-        <sidebar-item>Text</sidebar-item>
+        <van-sidebar-item>Text</van-sidebar-item>
-      </sidebar>
+      </van-sidebar>
     `,
-    components: {
-      Sidebar,
-      SidebarItem
-    },
     data() {
       return {
         active: 0
@@ -50,6 +46,25 @@ test('v-model', () => {
   expect(wrapper.vm.active).toEqual(1);
 });
 
+test('disabled prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-sidebar v-model="active">
+        <van-sidebar-item>Text</van-sidebar-item>
+        <van-sidebar-item disabled>Text</van-sidebar-item>
+      </van-sidebar>
+    `,
+    data() {
+      return {
+        active: 0
+      };
+    }
+  });
+
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(wrapper.vm.active).toEqual(0);
+});
+
 test('without parent', () => {
   const consoleError = console.error;
   try {

src/style/var.less

@@ -15,7 +15,7 @@
 // Component Colors
 @text-color: #323233;
 @border-color: #ebedf0;
-@active-color: #f2f3f5;
+@active-color: #040405;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
 
@@ -479,10 +479,11 @@
 // SidebarItem
 @sidebar-font-size: @font-size-md;
 @sidebar-line-height: 1.4;
-@sidebar-text-color: @gray-darker;
+@sidebar-text-color: @text-color;
+@sidebar-disabled-text-color: @gray;
 @sidebar-padding: 20px @padding-sm 20px @padding-xs;
 @sidebar-active-color: @active-color;
-@sidebar-background-color: @background-color;
+@sidebar-background-color: @background-color-light;
 @sidebar-selected-font-weight: 500;
 @sidebar-selected-text-color: @text-color;
 @sidebar-selected-border-color: @red;