feat: space support vue3

antdv-demo

@@ -1 +1 @@
-Subproject commit 747488ec6b7df7cb3f7fd2a3c15c16e4368a79ec
+Subproject commit c0e98550d636c6b056ad1df07f4cdc446675d22e

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -612,6 +612,420 @@ exports[`renders ./antdv-demo/docs/calendar/demo/card.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./antdv-demo/docs/calendar/demo/customize-header.md correctly 1`] = `
+<div style="width: 300px; border: 1px solid #d9d9d9; border-radius: 4px;">
+  <div class="">
+    <div style="padding: 10px;">
+      <div style="margin-bottom: 10px;">Custom header</div>
+      <div class="ant-row-flex ant-row-flex-space-between">
+        <div class="ant-col">
+          <div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
+        </div>
+        <div class="ant-col">
+          <!---->
+          <div class="my-year-select ant-select-sm my-year-select ant-select ant-select-enabled" tabindex="0">
+            <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+              <div class="ant-select-selection__rendered">
+                <!---->
+                <div class="ant-select-selection-selected-value" title="2016" style="display: block; opacity: 1;">2016</div>
+              </div>
+              <!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div>
+          </div>
+        </div>
+        <div class="ant-col">
+          <!---->
+          <div class="ant-select-sm ant-select ant-select-enabled" tabindex="0">
+            <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+              <div class="ant-select-selection__rendered">
+                <!---->
+                <div class="ant-select-selection-selected-value" title="Nov" style="display: block; opacity: 1;">Nov</div>
+              </div>
+              <!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-fullcalendar ant-fullcalendar-full" tabindex="0">
+      <!---->
+      <div class="ant-fullcalendar-calendar-body">
+        <table class="ant-fullcalendar-table" cellspacing="0" role="grid">
+          <thead>
+            <tr role="row">
+              <!---->
+              <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+              <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+              <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+              <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+              <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+              <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+              <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+            </tr>
+          </thead>
+          <tbody class="ant-fullcalendar-tbody">
+            <tr role="row" class="">
+              <!---->
+              <td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">30</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">31</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">01</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">02</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">03</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">04</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">05</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr role="row" class="">
+              <!---->
+              <td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">06</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">07</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">08</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">09</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">10</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">11</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">12</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr role="row" class="">
+              <!---->
+              <td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">13</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">14</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">15</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">16</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">17</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">18</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">19</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+              <!---->
+              <td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">20</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">21</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">22</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">23</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">24</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">25</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">26</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr role="row" class="">
+              <!---->
+              <td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">27</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">28</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">29</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">30</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">01</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">02</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">03</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr role="row" class="">
+              <!---->
+              <td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">04</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">05</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">06</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">07</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">08</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">09</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+              <td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+                <div class="ant-fullcalendar-date">
+                  <div class="ant-fullcalendar-value">10</div>
+                  <div class="ant-fullcalendar-content">
+                    <!---->
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./antdv-demo/docs/calendar/demo/notice-calendar.md correctly 1`] = `
 <div class=" ant-fullcalendar-fullscreen">
   <div class="ant-fullcalendar-header">

components/space/__tests__/__snapshots__/index.test.js.snap

@@ -7,3 +7,5 @@ exports[`Space should render correct with children 1`] = `
   <div class="ant-space-item">text3</div>
 </div>
 `;
+
+exports[`Space should render width empty children 1`] = `<!---->`;

components/space/__tests__/index.test.js

@@ -11,7 +11,7 @@ describe('Space', () => {
         return <Space />;
       },
     });
-    expect(wrapper.html()).toBeUndefined();
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should render width customize size', () => {
@@ -25,8 +25,8 @@ describe('Space', () => {
         );
       },
     });
-    expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginRight).toBe('10px');
+    expect(wrapper.findAll('.ant-space-item')[0].element.style.marginRight).toBe('10px');
-    expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginRight).toBeFalsy();
+    expect(wrapper.findAll('.ant-space-item')[1].element.style.marginRight).toBeFalsy();
   });
 
   it('should render vertical space width customize size', () => {
@@ -41,8 +41,8 @@ describe('Space', () => {
       },
     });
 
-    expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginBottom).toBe('10px');
+    expect(wrapper.findAll('.ant-space-item')[0].element.style.marginBottom).toBe('10px');
-    expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginBottom).toBeFalsy();
+    expect(wrapper.findAll('.ant-space-item')[1].element.style.marginBottom).toBeFalsy();
   });
 
   it('should render correct with children', () => {

components/space/index.jsx

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty, initDefaultProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
@@ -20,27 +21,13 @@ export const SpaceProps = {
   align: PropTypes.oneOf(['start', 'end', 'center', 'baseline']),
 };
 
-const Space = {
+const ASpace = (props, { slots }) => {
-  functional: true,
+  const configProvider = inject('configProvider', ConfigConsumerProps);
-  name: 'ASpace',
+  const { align, size, direction, prefixCls: customizePrefixCls } = props;
-  props: initDefaultProps(SpaceProps, {
-    size: 'small',
-    direction: 'horizontal',
-  }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
-  render(h, content) {
-    const {
-      prefixCls: customizePrefixCls,
-      injections: { configProvider },
-      children,
-    } = content;
-    const { align, size, direction } = content.props;
 
   const getPrefixCls = configProvider.getPrefixCls;
   const prefixCls = getPrefixCls('space', customizePrefixCls);
-    const items = filterEmpty(children);
+  const items = filterEmpty(slots.default && slots.default());
   const len = items.length;
 
   if (len === 0) {
@@ -79,11 +66,14 @@ const Space = {
       ))}
     </div>
   );
-  },
 };
+ASpace.props = initDefaultProps(SpaceProps, {
+  size: 'small',
+  direction: 'horizontal',
+});
 
 /* istanbul ignore next */
-Space.install = function(Vue) {
+ASpace.install = function(app) {
-  Vue.component(Space.name, Space);
+  app.component(ASpace.name, ASpace);
 };
-export default Space;
+export default ASpace;

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/tree-select/demo/index';
+import demo from '../antdv-demo/docs/space/demo/index';
 
 export default {
   components: {