From 14a63187d4d88e9ceddb910ebd89b61a03c761e4 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 1 Nov 2022 16:48:24 +0800
Subject: [PATCH] feat(Cascader): update demo

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 232 ++++++++++++++++++
 src/cascader/__test__/demo.test.jsx           |   2 +
 src/cascader/demos/mobile.vue                 |  59 +----
 src/cascader/demos/status.vue                 |  55 +++++
 4 files changed, 293 insertions(+), 55 deletions(-)
 create mode 100644 src/cascader/demos/status.vue

diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index ac5aee06c..f888489a5 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -497,6 +497,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       禁用可选项
     </p>
     
+    
     <div
       class="t-cell t-cell--middle t-cell--bordered t-input t-input--size-small"
     >
@@ -719,6 +720,237 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
     </div>
     <!--teleport end-->
     
+    
   </div>
 </div>
 `;
+
+exports[`Cascader > Cascader statusVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="t-cell t-cell--middle t-cell--bordered t-input t-input--size-small"
+  >
+    <div
+      class="t-cell__left-icon"
+    >
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-cell__title"
+    >
+      
+      <div
+        class="t-input--label"
+      >
+        地址
+      </div>
+      
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      
+      <div
+        class="t-input__wrap"
+      >
+        <input
+          autocomplete="Off"
+          class="t-input__control"
+          maxlength="-1"
+          name=""
+          placeholder="选择地址"
+          readonly=""
+          type="text"
+        />
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+      
+    </div>
+    <!--v-if-->
+  </div>
+  <!--teleport start-->
+  <div
+    class="t-popup"
+  >
+    <transition-stub
+      appear="false"
+      css="true"
+      name="fade"
+      persisted="false"
+    >
+      <transition-stub
+        appear="false"
+        css="true"
+        name="t-overlay"
+        persisted="true"
+      >
+        <div
+          class="t-overlay"
+          style="z-index: 1000; transition-duration: 300ms; display: none;"
+        >
+          
+          
+        </div>
+      </transition-stub>
+    </transition-stub>
+    <transition-stub
+      appear="false"
+      css="true"
+      name="slide-bottom"
+      persisted="true"
+    >
+      <div
+        class="t-popup--content t-popup--content-bottom"
+        style="display: none;"
+      >
+        
+        <div
+          class="t-cascader__wrapper"
+        >
+          <div
+            class="t-cascader__title"
+          >
+            
+            标题
+            
+          </div>
+          <div
+            class="t-cascader__close-btn"
+          >
+            <svg
+              class="t-icon t-icon-close"
+              fill="none"
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+            >
+              <path
+                d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+                fill="currentColor"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-cascader__content"
+          >
+            <div
+              class="t-cascader__steps"
+            >
+              
+              <div
+                class="t-cascader__step"
+              >
+                <div
+                  class="t-cascader__step-dot t-cascader__step-dot--active t-cascader__step-dot--last"
+                />
+                <div
+                  class="t-cascader__step-label t-cascader__step-label--active"
+                >
+                  选择选项
+                </div>
+              </div>
+              
+            </div>
+            <div
+              class="t-cascader__options-title"
+            >
+              选项标题
+            </div>
+            <div
+              class="t-cascader__options-content"
+            >
+              
+              <div
+                style="width: 100%;"
+              >
+                <transition-stub
+                  appear="true"
+                  css="true"
+                  name="slide"
+                  persisted="true"
+                >
+                  <div
+                    style="width: 100%;"
+                  >
+                    
+                    <div
+                      class="t-cascader-item disabled"
+                    >
+                      <div
+                        class="t-cascader-item-content"
+                      >
+                        <!-- &lt;t-node v-if="!(typeof labelTNode === 'string')" :content="labelTNode"&gt;&lt;/t-node&gt; -->
+                        浙江省
+                      </div>
+                      <div
+                        class="t-cascader-item-active-icon"
+                        style="display: none;"
+                      >
+                        <svg
+                          class="t-icon t-icon-check"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 16 16"
+                          width="1em"
+                        >
+                          <path
+                            d="M6.43 9.92l6.23-6.22.92.92-7.15 7.14L1.97 7.3l.92-.92 3.54 3.54z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      class="t-cascader-item"
+                    >
+                      <div
+                        class="t-cascader-item-content"
+                      >
+                        <!-- &lt;t-node v-if="!(typeof labelTNode === 'string')" :content="labelTNode"&gt;&lt;/t-node&gt; -->
+                        江苏省
+                      </div>
+                      <div
+                        class="t-cascader-item-active-icon"
+                        style="display: none;"
+                      >
+                        <svg
+                          class="t-icon t-icon-check"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 16 16"
+                          width="1em"
+                        >
+                          <path
+                            d="M6.43 9.92l6.23-6.22.92.92-7.15 7.14L1.97 7.3l.92-.92 3.54 3.54z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    
+                  </div>
+                </transition-stub>
+              </div>
+              
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </transition-stub>
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
diff --git a/src/cascader/__test__/demo.test.jsx b/src/cascader/__test__/demo.test.jsx
index 27954703a..d545c1e06 100644
--- a/src/cascader/__test__/demo.test.jsx
+++ b/src/cascader/__test__/demo.test.jsx
@@ -5,10 +5,12 @@
 import { mount } from '@vue/test-utils';
 import baseVue from '@/cascader/demos/base.vue';
 import mobileVue from '@/cascader/demos/mobile.vue';
+import statusVue from '@/cascader/demos/status.vue';
 
 const mapper = {
   baseVue,
   mobileVue,
+  statusVue,
 };
 
 describe('Cascader', () => {
diff --git a/src/cascader/demos/mobile.vue b/src/cascader/demos/mobile.vue
index cc1370c8f..14d09a368 100644
--- a/src/cascader/demos/mobile.vue
+++ b/src/cascader/demos/mobile.vue
@@ -3,65 +3,14 @@
     <h1 class="title">Cascader 级联选择器</h1>
     <p class="summary">用于多层级数据选择，主要为树形结构，可展示更多的数据</p>
     <tdesign-demo-block title="01 基础" summary="基本用法">
-      <base-vue />
+      <base-demo />
     </tdesign-demo-block>
     <tdesign-demo-block title="02 状态" summary="禁用可选项">
-      <t-input :value="address.address4" label="地址" placeholder="选择地址" readonly @click="show.show4 = true" />
-      <t-popup v-model="show.show4" placement="bottom">
-        <t-cascader
-          v-model="address.address4"
-          :options="provinces"
-          @change="onChange"
-          @cancel="show.show4 = false"
-          @confirm="onConfirm"
-        >
-        </t-cascader>
-      </t-popup>
+      <status-demo />
     </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from 'vue';
-import { TdCascaderItems } from '../type';
-
-import baseVue from './base.vue';
-
-const provinces: TdCascaderItems = [
-  {
-    label: '浙江省',
-    value: '浙江省',
-    disabled: true,
-  },
-  {
-    label: '江苏省',
-    value: '江苏省',
-  },
-];
-
-const show = reactive({
-  show1: false,
-  show2: false,
-  show3: false,
-  show4: false,
-});
-
-const address = reactive({
-  address1: '',
-  address2: '',
-  address3: '',
-  address4: '',
-  address5: '',
-});
-
-const onChange = (value: TdCascaderItems, options) => {
-  console.log(options);
-  show.show1 = false;
-  show.show2 = false;
-  show.show3 = false;
-  show.show4 = false;
-};
-
-const onConfirm = () => {
-  console.log('confirm');
-};
+import baseDemo from './base.vue';
+import statusDemo from './status.vue';
 </script>
diff --git a/src/cascader/demos/status.vue b/src/cascader/demos/status.vue
new file mode 100644
index 000000000..633220ba6
--- /dev/null
+++ b/src/cascader/demos/status.vue
@@ -0,0 +1,55 @@
+<template>
+  <t-input :value="address.address4" label="地址" placeholder="选择地址" readonly @click="show.show4 = true" />
+  <t-popup v-model="show.show4" placement="bottom">
+    <t-cascader
+      v-model="address.address4"
+      :options="provinces"
+      @change="onChange"
+      @cancel="show.show4 = false"
+      @confirm="onConfirm"
+    >
+    </t-cascader>
+  </t-popup>
+</template>
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { TdCascaderItems } from '../type';
+
+const provinces: TdCascaderItems = [
+  {
+    label: '浙江省',
+    value: '浙江省',
+    disabled: true,
+  },
+  {
+    label: '江苏省',
+    value: '江苏省',
+  },
+];
+
+const show = reactive({
+  show1: false,
+  show2: false,
+  show3: false,
+  show4: false,
+});
+
+const address = reactive({
+  address1: '',
+  address2: '',
+  address3: '',
+  address4: '',
+  address5: '',
+});
+
+const onChange = (value: TdCascaderItems, options: any) => {
+  show.show1 = false;
+  show.show2 = false;
+  show.show3 = false;
+  show.show4 = false;
+};
+
+const onConfirm = () => {
+  console.log('confirm');
+};
+</script>