diff --git a/components/locale-provider/LocaleReceiver.vue b/components/locale-provider/LocaleReceiver.vue new file mode 100644 index 000000000..1ec74ad21 --- /dev/null +++ b/components/locale-provider/LocaleReceiver.vue @@ -0,0 +1,43 @@ + diff --git a/components/locale-provider/default.js b/components/locale-provider/default.js new file mode 100644 index 000000000..5d8c10b1c --- /dev/null +++ b/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', + }, +} diff --git a/components/locale-provider/index.vue b/components/locale-provider/index.vue new file mode 100644 index 000000000..a6e837507 --- /dev/null +++ b/components/locale-provider/index.vue @@ -0,0 +1,63 @@ + diff --git a/components/locale-provider/style/index.js b/components/locale-provider/style/index.js new file mode 100644 index 000000000..1526e4dff --- /dev/null +++ b/components/locale-provider/style/index.js @@ -0,0 +1 @@ +import './index.less' diff --git a/components/locale-provider/style/index.less b/components/locale-provider/style/index.less new file mode 100644 index 000000000..c171cc249 --- /dev/null +++ b/components/locale-provider/style/index.less @@ -0,0 +1,2 @@ +// placeholder +@import "../../style/themes/default"; diff --git a/components/select/index.vue b/components/select/index.vue new file mode 100644 index 000000000..d3015da79 --- /dev/null +++ b/components/select/index.vue @@ -0,0 +1,147 @@ + diff --git a/components/select/style/index.js b/components/select/style/index.js new file mode 100644 index 000000000..992a50794 --- /dev/null +++ b/components/select/style/index.js @@ -0,0 +1,5 @@ +import '../../style/index.less' +import './index.less' + +// style dependencies +import '../../input/style' diff --git a/components/select/style/index.less b/components/select/style/index.less new file mode 100644 index 000000000..28d2e45eb --- /dev/null +++ b/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; + } + } +} diff --git a/package.json b/package.json index f6aeca1e0..1f11fc486 100644 --- a/package.json +++ b/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",