add 国际化

components/locale-provider/LocaleReceiver.vue

@@ -0,0 +1,43 @@
+<script>
+import PropTypes from '../_util/vue-types'
+
+export default {
+  props: {
+    componentName: PropTypes.string,
+    defaultLocale: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.func,
+    ]),
+    children: PropTypes.func,
+  },
+  inject: {
+    antLocale: { default: {}},
+  },
+  methods: {
+    getLocale () {
+      const { componentName, defaultLocale } = this.props
+      const { antLocale } = this
+      const localeFromContext = antLocale && antLocale[componentName]
+      return {
+        ...(typeof defaultLocale === 'function' ? defaultLocale() : defaultLocale),
+        ...(localeFromContext || {}),
+      }
+    },
+
+    getLocaleCode () {
+      const { antLocale } = this
+      const localeCode = antLocale && antLocale.locale
+      // Had use LocaleProvide but didn't set locale
+      if (antLocale && antLocale.exist && !localeCode) {
+        return 'en-us'
+      }
+      return localeCode
+    },
+  },
+
+  render () {
+    return this.children(this.getLocale(), this.getLocaleCode())
+  },
+}
+
+</script>

components/locale-provider/default.js

@@ -0,0 +1,45 @@
+// import Pagination from 'rc-pagination/lib/locale/en_US'
+// import DatePicker from '../date-picker/locale/en_US'
+// import TimePicker from '../time-picker/locale/en_US'
+// import Calendar from '../calendar/locale/en_US'
+
+export default {
+  locale: 'en',
+  // Pagination,
+  // DatePicker,
+  // TimePicker,
+  // Calendar,
+  Table: {
+    filterTitle: 'Filter menu',
+    filterConfirm: 'OK',
+    filterReset: 'Reset',
+    emptyText: 'No data',
+    selectAll: 'Select current page',
+    selectInvert: 'Invert current page',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Cancel',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Cancel',
+  },
+  Transfer: {
+    titles: ['', ''],
+    notFoundContent: 'Not Found',
+    searchPlaceholder: 'Search here',
+    itemUnit: 'item',
+    itemsUnit: 'items',
+  },
+  Select: {
+    notFoundContent: 'Not Found',
+  },
+  Upload: {
+    uploading: 'Uploading...',
+    removeFile: 'Remove file',
+    uploadError: 'Upload error',
+    previewFile: 'Preview file',
+  },
+}

components/locale-provider/index.vue

@@ -0,0 +1,63 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import * as moment from 'moment'
+// import { ModalLocale, changeConfirmLocale } from '../modal/locale'
+
+// export interface Locale {
+//   locale: string;
+//   Pagination?: Object;
+//   DatePicker?: Object;
+//   TimePicker?: Object;
+//   Calendar?: Object;
+//   Table?: Object;
+//   Modal?: ModalLocale;
+//   Popconfirm?: Object;
+//   Transfer?: Object;
+//   Select?: Object;
+//   Upload?: Object;
+// }
+
+function setMomentLocale (locale) {
+  if (locale && locale.locale) {
+    moment.locale(locale.locale)
+  } else {
+    moment.locale('en')
+  }
+}
+
+export default {
+  name: 'LocaleProvider',
+  props: {
+    locale: PropTypes.object.def({}),
+  },
+  provide () {
+    return {
+      antLocale: {
+        ...this.locale,
+        exist: true,
+      },
+    }
+  },
+  watch: {
+    locale (val) {
+      setMomentLocale(val)
+    },
+  },
+  beforeMount () {
+    const { locale } = this
+    setMomentLocale(locale)
+    // changeConfirmLocale(locale && locale.Modal)
+  },
+  updated () {
+    // const { locale } = this
+    // changeConfirmLocale(locale && locale.Modal)
+  },
+  beforeDestroy () {
+    // changeConfirmLocale()
+  },
+  render () {
+    return this.$slots.default
+  },
+}
+
+</script>

components/locale-provider/style/index.js

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

components/locale-provider/style/index.less

@@ -0,0 +1,2 @@
+// placeholder
+@import "../../style/themes/default";

components/select/index.vue

@@ -0,0 +1,147 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import VcSelect, { Option, OptGroup } from '../vc-select'
+import LocaleReceiver from '../locale-provider/LocaleReceiver'
+import defaultLocale from '../locale-provider/default'
+
+const AbstractSelectProps = {
+  prefixCls: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'large', 'default']),
+  notFoundContent: PropTypes.any,
+  transitionName: PropTypes.string,
+  choiceTransitionName: PropTypes.string,
+  showSearch: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  placeholder: PropTypes.string,
+  defaultActiveFirstOption: PropTypes.bool,
+  dropdownClassName: PropTypes.string,
+  dropdownStyle: PropTypes.any,
+  dropdownMenuStyle: PropTypes.any,
+  // onSearch: (value: string) => any,
+  filterOption: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.func,
+  ]),
+}
+
+const SelectValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.array,
+])
+
+const SelectProps = {
+  ...AbstractSelectProps,
+  value: SelectValue,
+  defaultValue: SelectValue,
+  mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
+  optionLabelProp: PropTypes.string,
+  // onChange?: (value: SelectValue, option: React.ReactElement<any> | React.ReactElement<any>[]) => void;
+  // onSelect?: (value: SelectValue, option: React.ReactElement<any>) => any;
+  // onDeselect?: (value: SelectValue) => any;
+  // onBlur?: () => any;
+  // onFocus?: () => any;
+  // onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  maxTagCount: PropTypes.number,
+  maxTagPlaceholder: PropTypes.any,
+  dropdownMatchSelectWidth: PropTypes.bool,
+  optionFilterProp: PropTypes.string,
+  labelInValue: PropTypes.boolean,
+  getPopupContainer: PropTypes.func,
+  tokenSeparators: PropTypes.arrayOf(PropTypes.string),
+  getInputElement: PropTypes.func,
+  autoFocus: PropTypes.bool,
+}
+
+const SelectPropTypes = {
+  prefixCls: PropTypes.string,
+  size: PropTypes.oneOf(['default', 'large', 'small']),
+  combobox: PropTypes.bool,
+  notFoundContent: PropTypes.any,
+  showSearch: PropTypes.bool,
+  optionLabelProp: PropTypes.string,
+  transitionName: PropTypes.string,
+  choiceTransitionName: PropTypes.string,
+}
+
+export default {
+  Option,
+  OptGroup,
+  name: 'Select',
+  props: {
+    ...SelectProps,
+    prefixCls: PropTypes.string.def('ant-select'),
+    showSearch: PropTypes.bool.def(false),
+    transitionName: PropTypes.string.def('slide-up'),
+    choiceTransitionName: PropTypes.string.def('zoom'),
+  },
+  propTypes: SelectPropTypes,
+  methods: {
+    focus () {
+      this.$refs.vcSelect.focus()
+    },
+    blur () {
+      this.$refs.vcSelect.blur()
+    },
+    getNotFoundContent (locale) {
+      const { notFoundContent, mode } = this.$props
+      const isCombobox = mode === 'combobox'
+      if (isCombobox) {
+      // AutoComplete don't have notFoundContent defaultly
+        return notFoundContent === undefined ? null : notFoundContent
+      }
+      return notFoundContent === undefined ? locale.notFoundContent : notFoundContent
+    },
+    renderSelect (locale) {
+      const {
+        prefixCls,
+        size,
+        mode,
+        ...restProps
+      } = this.$props
+      const cls = {
+        [`${prefixCls}-lg`]: size === 'large',
+        [`${prefixCls}-sm`]: size === 'small',
+      }
+
+      let { optionLabelProp } = this.$props
+      const isCombobox = mode === 'combobox'
+      if (isCombobox) {
+      // children 带 dom 结构时，无法填入输入框
+        optionLabelProp = optionLabelProp || 'value'
+      }
+
+      const modeConfig = {
+        multiple: mode === 'multiple',
+        tags: mode === 'tags',
+        combobox: isCombobox,
+      }
+
+      return (
+        <VcSelect
+          {...restProps}
+          {...modeConfig}
+          prefixCls={prefixCls}
+          class={cls}
+          optionLabelProp={optionLabelProp || 'children'}
+          notFoundContent={this.getNotFoundContent(locale)}
+          ref='vcSelect'
+        >
+          {this.$slots.default}
+        </VcSelect>
+      )
+    },
+  },
+  render () {
+    return (
+      <LocaleReceiver
+        componentName='Select'
+        defaultLocale={defaultLocale.Select}
+        children={this.renderSelect}
+      />
+    )
+  },
+}
+
+</script>

components/select/style/index.js

@@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../input/style'

components/select/style/index.less

@@ -0,0 +1,563 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@select-prefix-cls: ~"@{ant-prefix}-select";
+
+.selection__clear() {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  opacity: 0;
+  position: absolute;
+  right: @control-padding-horizontal - 1px;
+  z-index: 1;
+  background: @component-background;
+  top: 50%;
+  font-size: @font-size-sm;
+  color: @disabled-color;
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease, opacity 0.15s ease;
+  &:before {
+    display: block;
+    .iconfont-font("\e62e");
+  }
+  &:hover {
+    color: @text-color-secondary;
+  }
+}
+
+.@{select-prefix-cls} {
+  .reset-component;
+  display: inline-block;
+  position: relative;
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  > ul > li > a {
+    padding: 0;
+    background-color: @component-background;
+  }
+
+  // arrow
+  &-arrow {
+    .iconfont-mixin();
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal - 1px;
+    line-height: 1;
+    margin-top: -@font-size-sm / 2;
+    transform-origin: 50% 50%;
+    color: @disabled-color;
+    font-size: @font-size-sm;
+
+    * {
+      display: none;
+    }
+
+    &:before {
+      content: '\e61d';
+      transition: transform .3s;
+    }
+  }
+
+  &-selection {
+    outline: none;
+    user-select: none;
+
+    box-sizing: border-box;
+    display: block;
+
+    background-color: @component-background;
+    border-radius: @border-radius-base;
+    border: @border-width-base @border-style-base @border-color-base;
+    // strange align fix for chrome but works
+    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+    border-top-width: @border-width-base + 0.02px;
+    transition: all .3s @ease-in-out;
+
+    &:hover {
+      .hover;
+    }
+
+    .@{select-prefix-cls}-focused &,
+    &:focus,
+    &:active {
+      .active;
+    }
+
+    &__clear {
+      .selection__clear();
+    }
+
+    &:hover &__clear {
+      opacity: 1;
+    }
+
+    &-selected-value {
+      float: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      padding-right: 20px;
+    }
+  }
+
+  &-disabled {
+    color: @disabled-color;
+  }
+
+  &-disabled &-selection {
+    background: @input-disabled-bg;
+    cursor: not-allowed;
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: @border-color-base;
+      box-shadow: none;
+    }
+
+    &__clear {
+      display: none;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  &-disabled &-selection--multiple &-selection__choice {
+    background: @background-color-base;
+    color: #aaa;
+    padding-right: 10px;
+    &__remove {
+      display: none;
+    }
+  }
+
+  &-selection--single {
+    height: @input-height-base;
+    position: relative;
+    cursor: pointer;
+  }
+
+  &-selection__rendered {
+    display: block;
+    margin-left: @control-padding-horizontal - 1px;
+    margin-right: @control-padding-horizontal - 1px;
+    position: relative;
+    line-height: @input-height-base - 2px;
+    // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
+    &:after {
+      content: '.';
+      visibility: hidden;
+      pointer-events: none;
+      display: inline-block;
+      width: 0;
+    }
+  }
+
+  &-lg {
+    font-size: @font-size-lg;
+    .@{select-prefix-cls}-selection--single {
+      height: @input-height-lg;
+    }
+    .@{select-prefix-cls}-selection__rendered {
+      line-height: @input-height-lg - 2px;
+    }
+    .@{select-prefix-cls}-selection--multiple {
+      min-height: @input-height-lg;
+      .@{select-prefix-cls}-selection__rendered {
+        li {
+          height: @input-height-lg - 8px;
+          line-height: @input-height-lg - 8px;
+        }
+      }
+      .@{select-prefix-cls}-selection__clear {
+        top: @input-height-lg / 2;
+      }
+    }
+  }
+
+  &-sm {
+    .@{select-prefix-cls}-selection--single {
+      height: @input-height-sm;
+    }
+    .@{select-prefix-cls}-selection__rendered {
+      line-height: @input-height-sm - 2px;
+      margin: 0 @control-padding-horizontal-sm - 1px;
+    }
+    .@{select-prefix-cls}-selection--multiple {
+      min-height: @input-height-sm;
+      .@{select-prefix-cls}-selection__rendered {
+        li {
+          height: @input-height-sm - 8px;
+          line-height: @input-height-sm - 10px;
+        }
+      }
+      .@{select-prefix-cls}-selection__clear {
+        top: @input-height-sm / 2;
+      }
+    }
+    .@{select-prefix-cls}-selection__clear,
+    .@{select-prefix-cls}-arrow {
+      right: @control-padding-horizontal-sm;
+    }
+  }
+
+  &-disabled &-selection__choice__remove {
+    color: @disabled-color;
+    cursor: default;
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+
+  &-search__field__wrap {
+    display: inline-block;
+    position: relative;
+  }
+
+  &-selection__placeholder,
+  &-search__field__placeholder { // for TreeSelect compatibility
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 9px;
+    color: @input-placeholder-color;
+    line-height: 20px;
+    height: 20px;
+    max-width: 100%;
+    margin-top: -10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  &-search__field__placeholder {
+    left: @control-padding-horizontal;
+  }
+
+  &-search__field__mirror {
+    position: absolute;
+    top: 0;
+    left: -9999px;
+    white-space: pre;
+    pointer-events: none;
+  }
+
+  &-search--inline {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    .@{select-prefix-cls}-search__field__wrap {
+      width: 100%;
+      height: 100%;
+    }
+
+    .@{select-prefix-cls}-search__field {
+      border-width: 0;
+      font-size: 100%;
+      height: 100%;
+      width: 100%;
+      background: transparent;
+      outline: 0;
+      border-radius: @border-radius-base;
+      line-height: 1;
+    }
+
+    > i {
+      float: right;
+    }
+  }
+
+  &-selection--multiple {
+    min-height: @input-height-base;
+    cursor: text;
+    padding-bottom: 3px;
+    .clearfix;
+
+    .@{select-prefix-cls}-search--inline {
+      float: left;
+      position: static;
+      width: auto;
+      padding: 0;
+      max-width: 100%;
+      .@{select-prefix-cls}-search__field {
+        max-width: 100%;
+        width: 0.75em;
+      }
+    }
+
+    .@{select-prefix-cls}-selection__rendered {
+      margin-left: 5px;
+      margin-bottom: -3px;
+      height: auto;
+    }
+
+    .@{select-prefix-cls}-selection__placeholder {
+      margin-left: 6px;
+    }
+
+    > ul > li,
+    .@{select-prefix-cls}-selection__rendered > ul > li {  // for tree-select
+      margin-top: 3px;
+      height: @input-height-base - 8px;
+      line-height: @input-height-base - 8px - 2px;
+    }
+
+    .@{select-prefix-cls}-selection__choice {
+      color: @tag-default-color;
+      background-color: @tag-default-bg;
+      border: 1px solid @border-color-split;
+      border-radius: @border-radius-sm;
+      cursor: default;
+      float: left;
+      margin-right: 4px;
+      max-width: 99%;
+      position: relative;
+      overflow: hidden;
+      transition: padding .3s @ease-in-out;
+      padding: 0 20px 0 10px;
+      &__disabled {
+        padding: 0 10px;
+      }
+    }
+
+    .@{select-prefix-cls}-selection__choice__content {
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      transition: margin .3s @ease-in-out;
+    }
+
+    .@{select-prefix-cls}-selection__choice__remove {
+      .iconfont-mixin();
+      color: @text-color-secondary;
+      line-height: inherit;
+      cursor: pointer;
+      display: inline-block;
+      font-weight: bold;
+      transition: all .3s;
+      font-size: @font-size-sm;
+      .iconfont-size-under-12px(10px);
+      position: absolute;
+      right: 4px;
+      &:hover {
+        color: #404040;
+      }
+      &:before {
+        content: "\e633";
+      }
+    }
+
+    .@{select-prefix-cls}-selection__clear {
+      top: @input-height-base / 2;
+    }
+  }
+
+  &-allow-clear &-selection--multiple &-selection__rendered {
+    margin-right: 20px; // In case that clear button will overlap content
+  }
+
+  &-open {
+    .@{select-prefix-cls}-arrow:before {
+      transform: rotate(180deg);
+    }
+    .@{select-prefix-cls}-selection {
+      .active();
+    }
+  }
+
+  &-combobox {
+    .@{select-prefix-cls}-arrow {
+      display: none;
+    }
+    .@{select-prefix-cls}-search--inline {
+      height: 100%;
+      width: 100%;
+      float: none;
+    }
+    .@{select-prefix-cls}-search__field__wrap {
+      width: 100%;
+      height: 100%;
+    }
+    .@{select-prefix-cls}-search__field {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      z-index: 1;
+      transition: all .3s @ease-in-out;
+      box-shadow: none;
+    }
+  }
+  &-combobox&-allow-clear &-selection:hover &-selection__rendered {
+    margin-right: 20px; // In case that clear button will overlap content
+  }
+}
+
+.@{select-prefix-cls}-dropdown {
+  .reset-component;
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+    animation-name: antSlideUpOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+    animation-name: antSlideDownOut;
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  background-color: @component-background;
+  box-shadow: @box-shadow-base;
+  border-radius: @border-radius-base;
+  box-sizing: border-box;
+  z-index: @zindex-dropdown;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  font-size: @font-size-base;
+
+  &-menu {
+    outline: none;
+    margin-bottom: 0;
+    padding-left: 0; // Override default ul/ol
+    list-style: none;
+    max-height: 250px;
+    overflow: auto;
+
+    &-item-group-list {
+      margin: 0;
+      padding: 0;
+
+      > .@{select-prefix-cls}-dropdown-menu-item {
+        padding-left: 20px;
+      }
+    }
+
+    &-item-group-title {
+      color: @text-color-secondary;
+      padding: 0 @control-padding-horizontal;
+      height: 32px;
+      line-height: 32px;
+      font-size: @font-size-sm;
+    }
+
+    &-item {
+      position: relative;
+      display: block;
+      padding: 5px @control-padding-horizontal;
+      line-height: 22px;
+      font-weight: normal;
+      color: @text-color;
+      white-space: nowrap;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: background 0.3s ease;
+
+      &:hover {
+        background-color: @item-hover-bg;
+      }
+
+      &-disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+
+        &:hover {
+          color: @disabled-color;
+          background-color: @component-background;
+          cursor: not-allowed;
+        }
+      }
+
+      &-selected {
+        &,
+        &:hover {
+          background-color: @background-color-light;
+          font-weight: 600;
+          color: @text-color;
+        }
+      }
+
+      &-active {
+        background-color: @item-active-bg;
+      }
+
+      &-divider {
+        height: 1px;
+        margin: 1px 0;
+        overflow: hidden;
+        background-color: @border-color-split;
+        line-height: 0;
+      }
+    }
+  }
+
+  &&--multiple {
+    .@{select-prefix-cls}-dropdown-menu-item {
+      &:after {
+        .iconfont-font("\e632");
+        color: transparent;
+        .iconfont-size-under-12px(10px);
+        transition: all 0.2s ease;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: @control-padding-horizontal;
+        font-weight: bold;
+        text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
+      }
+
+      &:hover:after {
+        color: #ddd;
+      }
+
+      &-disabled:after {
+        display: none;
+      }
+
+      &-selected:after,
+      &-selected:hover:after {
+        color: @primary-color;
+        display: inline-block;
+      }
+    }
+  }
+
+  &-container-open,
+  &-open {
+    .@{select-prefix-cls}-dropdown {
+      display: block;
+    }
+  }
+}

package.json

@@ -97,6 +97,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.isplainobject": "^4.0.6",
+    "moment": "^2.20.1",
     "omit.js": "^1.0.0",
     "vue": "^2.5.13",
     "vue-clipboard2": "0.0.8",