@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/date-picker/wrapPicker.js

@@ -0,0 +1,258 @@
+import TimePickerPanel from '../vc-time-picker/Panel';
+import classNames from 'classnames';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { generateShowHourMinuteSecond } from '../time-picker';
+import enUS from './locale/en_US';
+import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
+import { getStatusClassNames } from './statusUtils';
+
+const DEFAULT_FORMAT = {
+  date: 'YYYY-MM-DD',
+  dateTime: 'YYYY-MM-DD HH:mm:ss',
+  week: 'gggg-wo',
+  month: 'YYYY-MM',
+};
+
+const LOCALE_FORMAT_MAPPING = {
+  date: 'dateFormat',
+  dateTime: 'dateTimeFormat',
+  week: 'weekFormat',
+  month: 'monthFormat',
+};
+
+function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
+  let column = 0;
+  if (showHour) {
+    column += 1;
+  }
+  if (showMinute) {
+    column += 1;
+  }
+  if (showSecond) {
+    column += 1;
+  }
+  if (use12Hours) {
+    column += 1;
+  }
+  return column;
+}
+
+export default function wrapPicker(Picker, props, pickerType) {
+  return {
+    name: Picker.name,
+    props: initDefaultProps(props, {
+      transitionName: 'slide-up',
+      popupStyle: {},
+      locale: {},
+    }),
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+    inject: {
+      configProvider: { default: () => ConfigConsumerProps },
+    },
+    provide() {
+      return {
+        savePopupRef: this.savePopupRef,
+      };
+    },
+    mounted() {
+      const { autoFocus, disabled, value, defaultValue, valueFormat } = this;
+      checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
+      checkValidate('DatePicker', value, 'value', valueFormat);
+      if (autoFocus && !disabled) {
+        this.$nextTick(() => {
+          this.focus();
+        });
+      }
+    },
+    watch: {
+      value(val) {
+        checkValidate('DatePicker', val, 'value', this.valueFormat);
+      },
+    },
+    methods: {
+      getDefaultLocale() {
+        const result = {
+          ...enUS,
+          ...this.locale,
+        };
+        result.lang = {
+          ...result.lang,
+          ...(this.locale || {}).lang,
+        };
+        return result;
+      },
+
+      savePopupRef(ref) {
+        this.popupRef = ref;
+      },
+      handleOpenChange(open) {
+        this.$emit('openChange', open);
+      },
+
+      handleFocus(e) {
+        this.$emit('focus', e);
+      },
+
+      handleBlur(e) {
+        this.$emit('blur', e);
+      },
+
+      handleMouseEnter(e) {
+        this.$emit('mouseenter', e);
+      },
+
+      handleMouseLeave(e) {
+        this.$emit('mouseleave', e);
+      },
+      handleChange(date, dateString) {
+        this.$emit(
+          'change',
+          this.valueFormat ? momentToString(date, this.valueFormat) : date,
+          dateString,
+        );
+      },
+      handleOk(val) {
+        this.$emit('ok', this.valueFormat ? momentToString(val, this.valueFormat) : val);
+      },
+      handleCalendarChange(date, dateString) {
+        this.$emit(
+          'calendarChange',
+          this.valueFormat ? momentToString(date, this.valueFormat) : date,
+          dateString,
+        );
+      },
+      focus() {
+        this.$refs.picker.focus();
+      },
+
+      blur() {
+        this.$refs.picker.blur();
+      },
+
+      transformValue(props) {
+        if ('value' in props) {
+          props.value = stringToMoment(props.value, this.valueFormat);
+        }
+        if ('defaultValue' in props) {
+          props.defaultValue = stringToMoment(props.defaultValue, this.valueFormat);
+        }
+        if ('defaultPickerValue' in props) {
+          props.defaultPickerValue = stringToMoment(props.defaultPickerValue, this.valueFormat);
+        }
+      },
+
+      renderPicker(locale, localeCode) {
+        const props = getOptionProps(this);
+        this.transformValue(props);
+        const {
+          prefixCls: customizePrefixCls,
+          inputPrefixCls: customizeInputPrefixCls,
+          getCalendarContainer,
+          size,
+          showTime,
+          disabled,
+          format,
+          status,
+          bordered,
+        } = props;
+        const mergedPickerType = showTime ? `${pickerType}Time` : pickerType;
+        const mergedFormat =
+          format ||
+          locale[LOCALE_FORMAT_MAPPING[mergedPickerType]] ||
+          DEFAULT_FORMAT[mergedPickerType];
+
+        const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
+        const getPopupContainer = getCalendarContainer || getContextPopupContainer;
+        const prefixCls = getPrefixCls('calendar', customizePrefixCls);
+        const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+
+        const pickerClass = classNames(
+          `${prefixCls}-picker`,
+          {
+            [`${prefixCls}-picker-${size}`]: !!size,
+            [`${prefixCls}-picker-borderless`]: bordered === false,
+          },
+          getStatusClassNames(`${prefixCls}-picker`, status, false),
+        );
+        const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, {
+          [`${inputPrefixCls}-lg`]: size === 'large',
+          [`${inputPrefixCls}-sm`]: size === 'small',
+          [`${inputPrefixCls}-disabled`]: disabled,
+        });
+
+        const timeFormat = (showTime && showTime.format) || 'HH:mm:ss';
+        const vcTimePickerProps = {
+          ...generateShowHourMinuteSecond(timeFormat),
+          format: timeFormat,
+          use12Hours: showTime && showTime.use12Hours,
+        };
+        const columns = getColumns(vcTimePickerProps);
+        const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
+        const timePickerPanelProps = {
+          props: {
+            ...vcTimePickerProps,
+            ...showTime,
+            prefixCls: `${prefixCls}-time-picker`,
+            placeholder: locale.timePickerLocale.placeholder,
+            transitionName: 'slide-up',
+          },
+          class: timePickerCls,
+          on: {
+            esc: () => {},
+          },
+        };
+        const timePicker = showTime ? <TimePickerPanel {...timePickerPanelProps} /> : null;
+        const pickerProps = {
+          props: {
+            ...props,
+            getCalendarContainer: getPopupContainer,
+            format: mergedFormat,
+            pickerClass,
+            pickerInputClass,
+            locale,
+            localeCode,
+            timePicker,
+          },
+          on: {
+            ...getListeners(this),
+            openChange: this.handleOpenChange,
+            focus: this.handleFocus,
+            blur: this.handleBlur,
+            mouseenter: this.handleMouseEnter,
+            mouseleave: this.handleMouseLeave,
+            change: this.handleChange,
+            ok: this.handleOk,
+            calendarChange: this.handleCalendarChange,
+          },
+          ref: 'picker',
+          scopedSlots: this.$scopedSlots || {},
+        };
+        return (
+          <Picker {...pickerProps}>
+            {this.$slots &&
+              Object.keys(this.$slots).map(key => (
+                <template slot={key} key={key}>
+                  {this.$slots[key]}
+                </template>
+              ))}
+          </Picker>
+        );
+      },
+    },
+
+    render() {
+      return (
+        <LocaleReceiver
+          componentName="DatePicker"
+          defaultLocale={this.getDefaultLocale}
+          scopedSlots={{ default: this.renderPicker }}
+        />
+      );
+    },
+  };
+}

package/src/components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./antdv-demo/docs/empty/demo/basic.md correctly 1`] = `
+<div class="ant-empty">
+  <div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <g transform="translate(24 31.67)">
+          <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
+          <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
+          <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
+          <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
+          <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
+        </g>
+        <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
+        <g transform="translate(149.65 15.383)" fill="#FFF">
+          <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
+          <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
+        </g>
+      </g>
+    </svg></div>
+  <p class="ant-empty-description">No Data</p>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/empty/demo/config-provider.md correctly 1`] = `
+<div><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">default</span></button>
+  <div role="separator" class="ant-divider ant-divider-horizontal"></div>
+  <div class="config-provider">
+    <h3>Select</h3>
+    <div tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;">
+      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+        <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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></i></span>
+      </div>
+    </div>
+    <h3>TreeSelect</h3> <span role="combobox" aria-haspopup="listbox" tabindex="0" class="ant-select ant-select-enabled" style="width: 200px;"><span class="ant-select-selection ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder"></span></span><span class="ant-select-arrow" style="outline: none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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></i></span></span></span>
+    <h3>Cascader</h3> <span tabindex="0" class="ant-cascader-picker ant-cascader-picker-show-search" style="width: 200px;"><span class="ant-cascader-picker-label"></span><input placeholder="Please select" type="text" class="ant-input ant-cascader-input "><i aria-label="icon: down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <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></i></span>
+    <h3>Transfer</h3>
+    <div class="ant-transfer">
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
+        <div class="ant-transfer-list-body">
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-normal ant-empty-small">
+              <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+                  <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g fillRule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+              <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+            </svg></i></button><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+              <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
+            </svg></i></button></div>
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span></div>
+        <div class="ant-transfer-list-body">
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-normal ant-empty-small">
+              <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+                  <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g fillRule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h3>Table</h3>
+    <div class="ant-table-wrapper" style="margin-top: 8px;">
+      <div class="ant-spin-nested-loading">
+        <div class="ant-spin-container">
+          <div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-empty">
+            <div class="ant-table-content">
+              <!---->
+              <div class="ant-table-body">
+                <table class="">
+                  <colgroup>
+                    <col>
+                    <col>
+                  </colgroup>
+                  <thead class="ant-table-thead">
+                    <tr>
+                      <th key="name" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"></span>
+              </div></span></th>
+              <th key="age" class="ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"></span>
+            </div></span></th>
+            </tr>
+            </thead>
+            <tbody class="ant-table-tbody"></tbody>
+            </table>
+          </div>
+          <div class="ant-table-placeholder">
+            <div class="ant-empty ant-empty-normal">
+              <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+                  <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g fillRule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h3>List</h3>
+<div class="ant-list ant-list-split">
+  <div class="ant-spin-nested-loading">
+    <div class="ant-spin-container">
+      <div class="ant-list-empty-text">
+        <div class="ant-empty ant-empty-normal">
+          <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+              <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+                <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                <g fillRule="nonzero" stroke="#D9D9D9">
+                  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                  <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+                </g>
+              </g>
+            </svg></div>
+          <p class="ant-empty-description">No Data</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/empty/demo/customize.md correctly 1`] = `
+<div class="ant-empty">
+  <div class="ant-empty-image" style="height: 60px;"><img alt="empty" src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"></div>
+  <p class="ant-empty-description"><span> Customize <a href="#API">Description</a></span></p>
+  <div class="ant-empty-footer"> <button type="button" class="ant-btn ant-btn-primary"><span>Create Now</span></button></div>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/empty/demo/description.md correctly 1`] = `
+<div class="ant-empty">
+  <div class="ant-empty-image"><svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <g transform="translate(24 31.67)">
+          <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
+          <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path>
+          <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
+          <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
+          <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path>
+        </g>
+        <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path>
+        <g transform="translate(149.65 15.383)" fill="#FFF">
+          <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
+          <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
+        </g>
+      </g>
+    </svg></div>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/empty/demo/simple.md correctly 1`] = `
+<div class="ant-empty ant-empty-normal">
+  <div class="ant-empty-image"><svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+      <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+        <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+        <g fillRule="nonzero" stroke="#D9D9D9">
+          <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+          <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
+        </g>
+      </g>
+    </svg></div>
+  <p class="ant-empty-description">No Data</p>
+</div>
+`;

package/src/components/empty/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('empty');

package/src/components/empty/__tests__/index.test.js

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils';
+import Empty from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Empty', () => {
+  mountTest(Empty);
+
+  it('image size should change', () => {
+    const wrapper = mount({
+      render() {
+        return <Empty imageStyle={{ height: '20px' }} />;
+      },
+    });
+    expect(wrapper.find('.ant-empty-image').element.style.height).toBe('20px');
+  });
+
+  it('description can be false', () => {
+    const wrapper = mount({
+      render() {
+        return <Empty description={false} />;
+      },
+    });
+    expect(wrapper.findAll('.ant-empty-description').length).toBe(0);
+  });
+});

package/src/components/empty/empty.jsx

@@ -0,0 +1,47 @@
+export default {
+  functional: true,
+  PRESENTED_IMAGE_DEFAULT: true,
+  render() {
+    return (
+      <svg width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(24 31.67)">
+            <ellipse
+              fillOpacity=".8"
+              fill="#F5F5F7"
+              cx="67.797"
+              cy="106.89"
+              rx="67.797"
+              ry="12.668"
+            />
+            <path
+              d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+              fill="#AEB8C2"
+            />
+            <path
+              d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+              fill="url(#linearGradient-1)"
+              transform="translate(13.56)"
+            />
+            <path
+              d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+              fill="#F5F5F7"
+            />
+            <path
+              d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+              fill="#DCE0E6"
+            />
+          </g>
+          <path
+            d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+            fill="#DCE0E6"
+          />
+          <g transform="translate(149.65 15.383)" fill="#FFF">
+            <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
+            <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
+          </g>
+        </g>
+      </svg>
+    );
+  },
+};

package/src/components/empty/index.jsx

@@ -0,0 +1,78 @@
+import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import DefaultEmptyImg from './empty';
+import SimpleEmptyImg from './simple';
+import Base from '../base';
+
+export const TransferLocale = () => {
+  return {
+    description: PropTypes.string,
+  };
+};
+
+export const EmptyProps = () => {
+  return {
+    prefixCls: PropTypes.string,
+    image: PropTypes.any,
+    description: PropTypes.any,
+    imageStyle: PropTypes.object,
+  };
+};
+
+const Empty = {
+  name: 'AEmpty',
+  props: {
+    ...EmptyProps(),
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  methods: {
+    renderEmpty(contentLocale) {
+      const { prefixCls: customizePrefixCls, imageStyle } = this.$props;
+      const { getPrefixCls } = this.configProvider;
+      const prefixCls = getPrefixCls('empty', customizePrefixCls);
+      const image = getComponentFromProp(this, 'image') || <DefaultEmptyImg />;
+      const description = getComponentFromProp(this, 'description');
+
+      const des = typeof description !== 'undefined' ? description : contentLocale.description;
+      const alt = typeof des === 'string' ? des : 'empty';
+      const cls = { [prefixCls]: true };
+      let imageNode = null;
+      if (typeof image === 'string') {
+        imageNode = <img alt={alt} src={image} />;
+      } else if (typeof image === 'object' && image.PRESENTED_IMAGE_SIMPLE) {
+        const Image = image;
+        imageNode = <Image />;
+        cls[`${prefixCls}-normal`] = true;
+      } else {
+        imageNode = image;
+      }
+      return (
+        <div class={cls} {...{ on: getListeners(this) }}>
+          <div class={`${prefixCls}-image`} style={imageStyle}>
+            {imageNode}
+          </div>
+          {des && <p class={`${prefixCls}-description`}>{des}</p>}
+          {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
+        </div>
+      );
+    },
+  },
+  render() {
+    return <LocaleReceiver componentName="Empty" scopedSlots={{ default: this.renderEmpty }} />;
+  },
+};
+
+Empty.PRESENTED_IMAGE_DEFAULT = DefaultEmptyImg;
+Empty.PRESENTED_IMAGE_SIMPLE = SimpleEmptyImg;
+
+/* istanbul ignore next */
+Empty.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(Empty.name, Empty);
+};
+
+export default Empty;

package/src/components/empty/simple.jsx

@@ -0,0 +1,20 @@
+export default {
+  functional: true,
+  PRESENTED_IMAGE_SIMPLE: true,
+  render() {
+    return (
+      <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+          <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7" />
+          <g fillRule="nonzero" stroke="#D9D9D9">
+            <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="#FAFAFA"
+            />
+          </g>
+        </g>
+      </svg>
+    );
+  },
+};

package/src/components/empty/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';