docs: synchronous config-provider demo (#6706)

Author: selicens

components/config-provider/demo/locale.vue

@@ -16,53 +16,105 @@ Components which need localization support are listed here, you can toggle the l
 </docs>
 
 <template>
-  <div class="change-locale">
+  <div style="margin-bottom: 16px">
     <span style="margin-right: 16px">Change locale of components:</span>
     <a-radio-group v-model:value="locale">
       <a-radio-button key="en" :value="enUS.locale">English</a-radio-button>
       <a-radio-button key="cn" :value="zhCN.locale">中文</a-radio-button>
     </a-radio-group>
   </div>
   <a-config-provider :locale="locale === 'en' ? enUS : zhCN">
-    <div class="locale-components">
-      <div class="example">
-        <a-pagination :total="50" show-size-changer />
-      </div>
-      <div class="example">
+    <a-space
+      direction="vertical"
+      :size="[0, 16]"
+      :style="{ width: '100%', paddingTop: '16px', borderTop: `1px solid ${token.colorBorder}` }"
+    >
+      <a-pagination :total="50" show-size-changer />
+      <a-space wrap>
         <a-select show-search style="width: 200px">
           <a-select-option value="jack">jack</a-select-option>
           <a-select-option value="lucy">lucy</a-select-option>
         </a-select>
         <a-date-picker />
         <a-time-picker />
         <a-range-picker style="width: 200px" />
-      </div>
-      <div class="example">
+      </a-space>
+      <a-space wrap>
         <a-button type="primary" @click="visible = true">Show Modal</a-button>
         <a-button @click="info">Show info</a-button>
         <a-button @click="confirm">Show confirm</a-button>
         <a-popconfirm title="Question?">
           <a href="#">Click to confirm</a>
         </a-popconfirm>
-      </div>
-      <div class="example">
-        <a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
-      </div>
-      <div class="site-config-provider-calendar-wrapper">
+      </a-space>
+      <a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
+      <div
+        :style="{
+          width: '320px',
+          border: `1px solid ${token.colorBorder}`,
+          'border-radius': '8px',
+        }"
+      >
         <a-calendar :fullscreen="false" />
       </div>
-      <div class="example">
-        <a-table :data-source="[]" :columns="columns" />
-      </div>
+      <a-form
+        name="basic"
+        :model="formModel"
+        auto-complete="off"
+        :label-col="{ sm: { span: 4 } }"
+        :wrapper-col="{ span: 6 }"
+      >
+        <a-form-item label="UserName" name="username" :rules="[{ required: true }]">
+          <a-input v-model:value="formModel.username" :width="200" />
+        </a-form-item>
+        <a-form-item label="Age" name="age" :rules="[{ type: 'number', min: 0, max: 99 }]">
+          <a-input-number v-model:value="formModel.age" :width="200" />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 2, span: 6 }">
+          <a-button type="primary" html-type="submit">submit</a-button>
+        </a-form-item>
+      </a-form>
+      <a-table :data-source="[]" :columns="columns" />
       <a-modal v-model:open="visible" title="Locale Modal">
         <p>Locale Modal</p>
       </a-modal>
-    </div>
+      <a-space wrap :size="80">
+        <a-qrcode
+          value="https://antdv.com"
+          status="expired"
+          @refresh="() => console.log('refresh')"
+        />
+        <a-image
+          :width="160"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+      </a-space>
+      <a-upload list-type="picture-card" :file-list="fileList" />
+      <a-divider orientation="left">Tour</a-divider>
+      <a-button type="primary" @click="() => (tourOpen = true)">Begin Tour</a-button>
+      <a-space>
+        <a-button ref="ref1">upload</a-button>
+        <a-button ref="ref2" type="primary">save</a-button>
+        <a-button ref="ref3">
+          <template #icon>
+            <ellipsis-outlined />
+          </template>
+        </a-button>
+      </a-space>
+      <a-tour
+        v-model:current="current"
+        :open="tourOpen"
+        :steps="steps"
+        @close="() => (tourOpen = false)"
+      ></a-tour>
+    </a-space>
   </a-config-provider>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { Modal } from 'ant-design-vue';
+import { Modal, theme } from 'ant-design-vue';
+import type { TourProps, UploadFile } from 'ant-design-vue';
+import { EllipsisOutlined } from '@ant-design/icons-vue';
 import enUS from 'ant-design-vue/es/locale/en_US';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
@@ -104,33 +156,55 @@ const confirm = () => {
     content: 'some info',
   });
 };
-</script>
-<style scoped>
-.site-config-provider-calendar-wrapper {
-  width: 319px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-.locale-components {
-  border-top: 1px solid #d9d9d9;
-  padding-top: 16px;
-}
 
-.example {
-  margin: 16px 0;
-}
+const formModel = ref({
+  username: '',
+  age: '100',
+});
 
-.example > * {
-  margin-right: 8px;
-}
+const { token } = theme.useToken();
 
-.change-locale {
-  margin-bottom: 16px;
-}
-[data-theme='dark'] .locale-components {
-  border-top: 1px solid #303030;
-}
-[data-theme='dark'] .site-config-provider-calendar-wrapper {
-  border: 1px solid #303030;
-}
-</style>
+const fileList: UploadFile[] = [
+  {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-2',
+    percent: 50,
+    name: 'image.png',
+    status: 'uploading',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-3',
+    name: 'image.png',
+    status: 'error',
+  },
+];
+
+const ref1 = ref(null);
+const ref2 = ref(null);
+const ref3 = ref(null);
+const current = ref(0);
+const tourOpen = ref(false);
+const steps: TourProps['steps'] = [
+  {
+    title: 'Upload File',
+    description: 'Put your files here.',
+    target: () => ref1.value && ref1.value.$el,
+  },
+  {
+    title: 'Save',
+    description: 'Save your changes.',
+    target: () => ref2.value && ref2.value.$el,
+  },
+  {
+    title: 'Other Actions',
+    description: 'Click to see other actions.',
+    target: () => ref3.value && ref3.value.$el,
+  },
+];
+</script>