feat(Cascader): select options

src/cascader/index.js

@@ -1,6 +1,7 @@
 import { createNamespace } from '../utils';
 import Tab from '../tab';
 import Tabs from '../tabs';
+import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('cascader');
 
@@ -47,12 +48,40 @@ export default createComponent({
           {
             title: this.placeholder || this.t('placeholder'),
             options: this.options,
+            selected: null,
           },
         ];
       }
     },
 
-    genHeader() {
+    onSelect(option, tabIndex) {
+      this.tabs[tabIndex].title = option.text;
+      this.tabs[tabIndex].selected = option.value;
+
+      if (this.tabs.length > tabIndex + 1) {
+        this.tabs = this.tabs.slice(0, tabIndex + 1);
+      }
+
+      if (option.children) {
+        const nextTab = {
+          title: this.placeholder || this.t('placeholder'),
+          options: option.children,
+          selected: null,
+        };
+
+        if (this.tabs[tabIndex + 1]) {
+          this.$set(this.tabs, tabIndex + 1, nextTab);
+        } else {
+          this.tabs.push(nextTab);
+        }
+
+        this.$nextTick(() => {
+          this.activeTab++;
+        });
+      }
+    },
+
+    renderHeader() {
       return (
         <div class={bem('header')}>
           <h2 class={bem('title')}>{this.slots('title') || this.title}</h2>
@@ -60,23 +89,41 @@ export default createComponent({
       );
     },
 
-    genTabs() {
+    renderOptions(options, selected, tabIndex) {
       return (
-        <Tabs class={bem('tabs')}>
-          {this.tabs.map((item) => (
-            <Tab title={item.title}>{this.genOptions(item.options)}</Tab>
-          ))}
-        </Tabs>
+        <ul class={bem('options')}>
+          {options.map((option) => {
+            const isSelected = option.value === selected;
+            return (
+              <li
+                class={bem('option', { selected: isSelected })}
+                onClick={() => {
+                  this.onSelect(option, tabIndex);
+                }}
+              >
+                <span>{option.text}</span>
+                {isSelected ? (
+                  <Icon name="success" class={bem('selected-icon')} />
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
       );
     },
 
-    genOptions(options) {
+    renderTabs() {
       return (
-        <ul class={bem('options')}>
-          {options.map((option) => (
-            <li class={bem('option')}>{option.text}</li>
+        <Tabs vModel={this.activeTab} animated swipeable class={bem('tabs')}>
+          {this.tabs.map((item, tabIndex) => (
+            <Tab
+              title={item.title}
+              titleClass={bem('tab-title', { unselected: !item.selected })}
+            >
+              {this.renderOptions(item.options, item.selected, tabIndex)}
+            </Tab>
           ))}
-        </ul>
+        </Tabs>
       );
     },
   },
@@ -84,8 +131,8 @@ export default createComponent({
   render() {
     return (
       <div class={bem()}>
-        {this.genHeader()}
-        {this.genTabs()}
+        {this.renderHeader()}
+        {this.renderTabs()}
       </div>
     );
   },