perf: remove no need file
tanjinzhou
parent
d2d613980a
commit
48f385556f
|
|
@ -13,6 +13,7 @@ module.exports = function(modules) {
|
|||
resolve('@babel/plugin-transform-object-assign'),
|
||||
resolve('@babel/plugin-proposal-object-rest-spread'),
|
||||
resolve('@babel/plugin-proposal-export-default-from'),
|
||||
resolve('@babel/plugin-proposal-export-namespace-from'),
|
||||
resolve('@babel/plugin-proposal-class-properties'),
|
||||
resolve('@babel/plugin-syntax-dynamic-import'),
|
||||
// resolve('babel-plugin-inline-import-data-uri'),
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ module.exports = {
|
|||
'@babel/plugin-transform-object-assign',
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-proposal-export-namespace-from',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
'@babel/plugin-transform-runtime',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import omit from 'omit.js';
|
||||
import classNames from '../_util/classNames';
|
||||
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select2';
|
||||
import { OptionProps as OptionPropsType } from '../vc-select2/Option';
|
||||
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
|
||||
import { OptionProps as OptionPropsType } from '../vc-select/Option';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import getIcons from './utils/iconUtil';
|
||||
import { computed, defineComponent, inject, ref, VNodeChild, App, PropType } from 'vue';
|
||||
|
|
|
|||
|
|
@ -1,268 +0,0 @@
|
|||
import { provide, inject, defineComponent, App } from 'vue';
|
||||
import warning from '../_util/warning';
|
||||
import omit from 'omit.js';
|
||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
||||
import { Select as VcSelect, Option, OptGroup } from '../vc-select';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
|
||||
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
|
||||
import DownOutlined from '@ant-design/icons-vue/DownOutlined';
|
||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
|
||||
const AbstractSelectProps = () => ({
|
||||
prefixCls: PropTypes.string,
|
||||
size: PropTypes.oneOf(['small', 'large', 'default']),
|
||||
showAction: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
|
||||
notFoundContent: PropTypes.VNodeChild,
|
||||
transitionName: PropTypes.string,
|
||||
choiceTransitionName: PropTypes.string,
|
||||
showSearch: PropTypes.looseBool,
|
||||
allowClear: PropTypes.looseBool,
|
||||
disabled: PropTypes.looseBool,
|
||||
tabindex: PropTypes.number,
|
||||
placeholder: PropTypes.VNodeChild,
|
||||
defaultActiveFirstOption: PropTypes.looseBool,
|
||||
dropdownClassName: PropTypes.string,
|
||||
dropdownStyle: PropTypes.style,
|
||||
dropdownMenuStyle: PropTypes.style,
|
||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
||||
// onSearch: (value: string) => any,
|
||||
filterOption: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
|
||||
autofocus: PropTypes.looseBool,
|
||||
backfill: PropTypes.looseBool,
|
||||
showArrow: PropTypes.looseBool,
|
||||
getPopupContainer: PropTypes.func,
|
||||
open: PropTypes.looseBool,
|
||||
defaultOpen: PropTypes.looseBool,
|
||||
autoClearSearchValue: PropTypes.looseBool,
|
||||
dropdownRender: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
loading: PropTypes.looseBool,
|
||||
});
|
||||
const Value = PropTypes.shape({
|
||||
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
}).loose;
|
||||
|
||||
const SelectValue = PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
PropTypes.arrayOf(PropTypes.oneOfType([Value, PropTypes.string, PropTypes.number])),
|
||||
Value,
|
||||
]);
|
||||
|
||||
const SelectProps = {
|
||||
...AbstractSelectProps(),
|
||||
value: SelectValue,
|
||||
defaultValue: SelectValue,
|
||||
// mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
|
||||
mode: PropTypes.string,
|
||||
optionLabelProp: PropTypes.string,
|
||||
firstActiveValue: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
||||
maxTagCount: PropTypes.number,
|
||||
maxTagPlaceholder: PropTypes.any,
|
||||
maxTagTextLength: PropTypes.number,
|
||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
||||
optionFilterProp: PropTypes.string,
|
||||
labelInValue: PropTypes.looseBool,
|
||||
getPopupContainer: PropTypes.func,
|
||||
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
||||
getInputElement: PropTypes.func,
|
||||
options: PropTypes.array,
|
||||
suffixIcon: PropTypes.any,
|
||||
removeIcon: PropTypes.any,
|
||||
clearIcon: PropTypes.any,
|
||||
menuItemSelectedIcon: PropTypes.any,
|
||||
};
|
||||
|
||||
const SelectPropTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
size: PropTypes.oneOf(['default', 'large', 'small']),
|
||||
// combobox: PropTypes.looseBool,
|
||||
notFoundContent: PropTypes.any,
|
||||
showSearch: PropTypes.looseBool,
|
||||
optionLabelProp: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
choiceTransitionName: PropTypes.string,
|
||||
};
|
||||
|
||||
export { AbstractSelectProps, SelectValue, SelectProps };
|
||||
const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
||||
const Select = defineComponent({
|
||||
SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
||||
Option: { ...Option, name: 'ASelectOption' },
|
||||
OptGroup: { ...OptGroup, name: 'ASelectOptGroup' },
|
||||
name: 'ASelect',
|
||||
props: {
|
||||
...SelectProps,
|
||||
showSearch: PropTypes.looseBool.def(false),
|
||||
transitionName: PropTypes.string.def('slide-up'),
|
||||
choiceTransitionName: PropTypes.string.def(''),
|
||||
},
|
||||
propTypes: SelectPropTypes,
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
popupRef: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
provide('savePopupRef', this.savePopupRef);
|
||||
warning(
|
||||
this.$props.mode !== 'combobox',
|
||||
'Select',
|
||||
'The combobox mode of Select is deprecated,' +
|
||||
'it will be removed in next major version,' +
|
||||
'please use AutoComplete instead',
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
getNotFoundContent(renderEmpty: any) {
|
||||
const notFoundContent = getComponent(this, 'notFoundContent');
|
||||
if (notFoundContent !== undefined) {
|
||||
return notFoundContent;
|
||||
}
|
||||
if (this.isCombobox()) {
|
||||
return null;
|
||||
}
|
||||
return renderEmpty('Select');
|
||||
},
|
||||
savePopupRef(ref) {
|
||||
this.popupRef = ref;
|
||||
},
|
||||
focus() {
|
||||
(this.$refs.vcSelect as any).focus();
|
||||
},
|
||||
blur() {
|
||||
(this.$refs.vcSelect as any).blur();
|
||||
},
|
||||
|
||||
isCombobox() {
|
||||
const { mode } = this;
|
||||
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
|
||||
},
|
||||
|
||||
renderSuffixIcon(prefixCls) {
|
||||
const { loading } = this.$props;
|
||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
||||
if (suffixIcon) {
|
||||
return isValidElement(suffixIcon)
|
||||
? cloneElement(suffixIcon, { class: `${prefixCls}-arrow-icon` })
|
||||
: suffixIcon;
|
||||
}
|
||||
if (loading) {
|
||||
return <LoadingOutlined />;
|
||||
}
|
||||
return <DownOutlined class={`${prefixCls}-arrow-icon`} />;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
size,
|
||||
mode,
|
||||
options,
|
||||
getPopupContainer,
|
||||
showArrow,
|
||||
...restProps
|
||||
} = getOptionProps(this);
|
||||
const { class: className } = this.$attrs as any;
|
||||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const renderEmpty = this.configProvider.renderEmpty;
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
let removeIcon = getComponent(this, 'removeIcon');
|
||||
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
|
||||
let clearIcon = getComponent(this, 'clearIcon');
|
||||
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
|
||||
let menuItemSelectedIcon = getComponent(this, 'menuItemSelectedIcon');
|
||||
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon)
|
||||
? menuItemSelectedIcon[0]
|
||||
: menuItemSelectedIcon;
|
||||
const rest = omit(restProps as any, [
|
||||
'inputIcon',
|
||||
'removeIcon',
|
||||
'clearIcon',
|
||||
'suffixIcon',
|
||||
'menuItemSelectedIcon',
|
||||
]);
|
||||
|
||||
const cls = {
|
||||
[className]: className,
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-show-arrow`]: showArrow,
|
||||
};
|
||||
|
||||
let { optionLabelProp } = this.$props;
|
||||
if (this.isCombobox()) {
|
||||
// children 带 dom 结构时，无法填入输入框
|
||||
optionLabelProp = optionLabelProp || 'value';
|
||||
}
|
||||
|
||||
const modeConfig = {
|
||||
multiple: mode === 'multiple',
|
||||
tags: mode === 'tags',
|
||||
combobox: this.isCombobox(),
|
||||
};
|
||||
const finalRemoveIcon = (removeIcon &&
|
||||
(isValidElement(removeIcon)
|
||||
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
|
||||
: removeIcon)) || <CloseOutlined class={`${prefixCls}-remove-icon`} />;
|
||||
|
||||
const finalClearIcon = (clearIcon &&
|
||||
(isValidElement(clearIcon)
|
||||
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
|
||||
: clearIcon)) || <CloseCircleFilled class={`${prefixCls}-clear-icon`} />;
|
||||
|
||||
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
|
||||
(isValidElement(menuItemSelectedIcon)
|
||||
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
|
||||
: menuItemSelectedIcon)) || <CheckOutlined class={`${prefixCls}-selected-icon`} />;
|
||||
|
||||
const selectProps = {
|
||||
inputIcon: this.renderSuffixIcon(prefixCls),
|
||||
removeIcon: finalRemoveIcon,
|
||||
clearIcon: finalClearIcon,
|
||||
menuItemSelectedIcon: finalMenuItemSelectedIcon,
|
||||
showArrow,
|
||||
...rest,
|
||||
...modeConfig,
|
||||
prefixCls,
|
||||
optionLabelProp: optionLabelProp || 'children',
|
||||
notFoundContent: this.getNotFoundContent(renderEmpty),
|
||||
maxTagPlaceholder: getComponent(this, 'maxTagPlaceholder'),
|
||||
placeholder: getComponent(this, 'placeholder'),
|
||||
children: options
|
||||
? options.map(option => {
|
||||
const { key, label = option.title, class: cls, style, ...restOption } = option;
|
||||
return (
|
||||
<Option key={key} {...{ class: cls, style, ...restOption }}>
|
||||
{label}
|
||||
</Option>
|
||||
);
|
||||
})
|
||||
: getSlot(this),
|
||||
dropdownRender: getComponent(this, 'dropdownRender', {}, false),
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
...this.$attrs,
|
||||
class: cls,
|
||||
ref: 'vcSelect',
|
||||
};
|
||||
return <VcSelect {...selectProps} __propsSymbol__={[]} />;
|
||||
},
|
||||
});
|
||||
|
||||
/* istanbul ignore next */
|
||||
Select.install = function(app: App) {
|
||||
app.component(Select.name, Select);
|
||||
app.component(Select.Option.name, Select.Option);
|
||||
app.component(Select.OptGroup.name, Select.OptGroup);
|
||||
return app;
|
||||
};
|
||||
export default Select;
|
||||
|
|
@ -1 +0,0 @@
|
|||
import './index.less';
|
||||
|
|
@ -1 +0,0 @@
|
|||
import './v2-compatible-reset.less';
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
import raf from 'raf';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import Menu from '../vc-menu';
|
||||
import scrollIntoView from 'dom-scroll-into-view';
|
||||
import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { findDOMNode, getSlot } from '../_util/props-util';
|
||||
|
||||
export default {
|
||||
name: 'DropdownMenu',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
ariaId: PropTypes.string,
|
||||
defaultActiveFirstOption: PropTypes.looseBool,
|
||||
value: PropTypes.any,
|
||||
dropdownMenuStyle: PropTypes.object,
|
||||
multiple: PropTypes.looseBool,
|
||||
// onPopupFocus: PropTypes.func,
|
||||
// onPopupScroll: PropTypes.func,
|
||||
// onMenuDeSelect: PropTypes.func,
|
||||
// onMenuSelect: PropTypes.func,
|
||||
prefixCls: PropTypes.string,
|
||||
menuItems: PropTypes.any,
|
||||
inputValue: PropTypes.string,
|
||||
visible: PropTypes.looseBool,
|
||||
backfillValue: PropTypes.any,
|
||||
firstActiveValue: PropTypes.string,
|
||||
menuItemSelectedIcon: PropTypes.any,
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (!val) {
|
||||
this.lastVisible = val;
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.scrollActiveItemToView();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.rafInstance = null;
|
||||
this.saveMenuRef = saveRef(this, 'menuRef');
|
||||
this.lastInputValue = this.$props.inputValue;
|
||||
this.lastVisible = false;
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.scrollActiveItemToView();
|
||||
});
|
||||
this.lastVisible = this.$props.visible;
|
||||
},
|
||||
updated() {
|
||||
const props = this.$props;
|
||||
// if (!this.prevVisible && props.visible) {
|
||||
// this.$nextTick(() => {
|
||||
// this.scrollActiveItemToView();
|
||||
// });
|
||||
// }
|
||||
this.lastVisible = props.visible;
|
||||
this.lastInputValue = props.inputValue;
|
||||
this.prevVisible = this.visible;
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.rafInstance) {
|
||||
raf.cancel(this.rafInstance);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollActiveItemToView() {
|
||||
// scroll into view
|
||||
const itemComponent = this.firstActiveItem && findDOMNode(this.firstActiveItem);
|
||||
const props = this.$props;
|
||||
const { value, visible, firstActiveValue } = props;
|
||||
if (!itemComponent || !visible) {
|
||||
return;
|
||||
}
|
||||
const scrollIntoViewOpts = {
|
||||
onlyScrollIfNeeded: true,
|
||||
};
|
||||
if ((!value || value.length === 0) && firstActiveValue) {
|
||||
scrollIntoViewOpts.alignWithTop = true;
|
||||
}
|
||||
// Delay to scroll since current frame item position is not ready when pre view is by filter
|
||||
// https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462
|
||||
this.rafInstance = raf(() => {
|
||||
scrollIntoView(itemComponent, findDOMNode(this.menuRef), scrollIntoViewOpts);
|
||||
});
|
||||
},
|
||||
|
||||
renderMenu() {
|
||||
const props = { ...this.$props, ...this.$attrs };
|
||||
const {
|
||||
menuItems,
|
||||
menuItemSelectedIcon,
|
||||
defaultActiveFirstOption,
|
||||
prefixCls,
|
||||
multiple,
|
||||
onMenuSelect,
|
||||
inputValue,
|
||||
backfillValue,
|
||||
onMenuDeselect,
|
||||
visible,
|
||||
} = props;
|
||||
const firstActiveValue = this.firstActiveValue;
|
||||
if (menuItems && menuItems.length) {
|
||||
const menuProps = {};
|
||||
if (multiple) {
|
||||
menuProps.onDeselect = onMenuDeselect;
|
||||
menuProps.onSelect = onMenuSelect;
|
||||
} else {
|
||||
menuProps.onClick = onMenuSelect;
|
||||
}
|
||||
|
||||
const value = this.value;
|
||||
const selectedKeys = getSelectKeys(menuItems, value);
|
||||
const activeKeyProps = {};
|
||||
|
||||
let defaultActiveFirst = defaultActiveFirstOption;
|
||||
let clonedMenuItems = menuItems;
|
||||
if (selectedKeys.length || firstActiveValue) {
|
||||
if (props.visible && !this.lastVisible) {
|
||||
activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
|
||||
} else if (!visible) {
|
||||
// Do not trigger auto active since we already have selectedKeys
|
||||
if (selectedKeys[0]) {
|
||||
defaultActiveFirst = false;
|
||||
}
|
||||
activeKeyProps.activeKey = undefined;
|
||||
}
|
||||
let foundFirst = false;
|
||||
// set firstActiveItem via cloning menus
|
||||
// for scroll into view
|
||||
const clone = item => {
|
||||
if (
|
||||
(!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
|
||||
(!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
|
||||
) {
|
||||
foundFirst = true;
|
||||
return cloneElement(item, {
|
||||
ref: ref => {
|
||||
this.firstActiveItem = ref;
|
||||
},
|
||||
});
|
||||
}
|
||||
return item;
|
||||
};
|
||||
|
||||
clonedMenuItems = menuItems.map(item => {
|
||||
if (item.type.isMenuItemGroup) {
|
||||
const children = getSlot(item).map(clone);
|
||||
const newItem = cloneElement(item);
|
||||
newItem.children = { ...item.children, default: () => children };
|
||||
return newItem;
|
||||
}
|
||||
return clone(item);
|
||||
});
|
||||
} else {
|
||||
// Clear firstActiveItem when dropdown menu items was empty
|
||||
// Avoid `Unable to find node on an unmounted component`
|
||||
// https://github.com/ant-design/ant-design/issues/10774
|
||||
this.firstActiveItem = null;
|
||||
}
|
||||
|
||||
// clear activeKey when inputValue change
|
||||
const lastValue = value && value[value.length - 1];
|
||||
if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
|
||||
activeKeyProps.activeKey = '';
|
||||
}
|
||||
return (
|
||||
<Menu
|
||||
ref={this.saveMenuRef}
|
||||
style={this.dropdownMenuStyle}
|
||||
defaultActiveFirst={defaultActiveFirst}
|
||||
role="listbox"
|
||||
itemIcon={multiple ? menuItemSelectedIcon : null}
|
||||
{...activeKeyProps}
|
||||
multiple={multiple}
|
||||
{...menuProps}
|
||||
selectedKeys={selectedKeys}
|
||||
prefixCls={`${prefixCls}-menu`}
|
||||
children={clonedMenuItems}
|
||||
></Menu>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const renderMenu = this.renderMenu();
|
||||
const { onPopupFocus, onPopupScroll } = this.$attrs;
|
||||
return renderMenu ? (
|
||||
<div
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
transform: 'translateZ(0)',
|
||||
}}
|
||||
id={this.$props.ariaId}
|
||||
tabindex="-1"
|
||||
onFocus={onPopupFocus}
|
||||
onMousedown={preventDefaultEvent}
|
||||
onScroll={onPopupScroll}
|
||||
>
|
||||
{renderMenu}
|
||||
</div>
|
||||
) : null;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
},
|
||||
isSelectOptGroup: true,
|
||||
render() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
disabled: PropTypes.looseBool,
|
||||
title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
},
|
||||
isSelectOption: true,
|
||||
render() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
|
||||
export const SelectPropTypes = {
|
||||
defaultActiveFirstOption: PropTypes.looseBool,
|
||||
multiple: PropTypes.looseBool,
|
||||
filterOption: PropTypes.any,
|
||||
// children: PropTypes.any,
|
||||
showSearch: PropTypes.looseBool,
|
||||
disabled: PropTypes.looseBool,
|
||||
allowClear: PropTypes.looseBool,
|
||||
showArrow: PropTypes.looseBool,
|
||||
tags: PropTypes.looseBool,
|
||||
prefixCls: PropTypes.string,
|
||||
// className: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
optionLabelProp: PropTypes.string,
|
||||
optionFilterProp: PropTypes.string,
|
||||
animation: PropTypes.string,
|
||||
choiceTransitionName: PropTypes.string,
|
||||
open: PropTypes.looseBool,
|
||||
defaultOpen: PropTypes.looseBool,
|
||||
// onChange: PropTypes.func,
|
||||
// onBlur: PropTypes.func,
|
||||
// onFocus: PropTypes.func,
|
||||
// onSelect: PropTypes.func,
|
||||
// onSearch: PropTypes.func,
|
||||
// onPopupScroll: PropTypes.func,
|
||||
// onMouseEnter: PropTypes.func,
|
||||
// onMouseLeave: PropTypes.func,
|
||||
// onInputKeyDown: PropTypes.func,
|
||||
placeholder: PropTypes.any,
|
||||
// onDeselect: PropTypes.func,
|
||||
labelInValue: PropTypes.looseBool,
|
||||
loading: PropTypes.looseBool,
|
||||
value: PropTypes.any,
|
||||
defaultValue: PropTypes.any,
|
||||
dropdownStyle: PropTypes.object,
|
||||
dropdownClassName: PropTypes.string,
|
||||
maxTagTextLength: PropTypes.number,
|
||||
maxTagCount: PropTypes.number,
|
||||
maxTagPlaceholder: PropTypes.any,
|
||||
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
||||
getInputElement: PropTypes.func,
|
||||
showAction: PropTypes.arrayOf(PropTypes.string),
|
||||
autofocus: PropTypes.looseBool,
|
||||
getPopupContainer: PropTypes.func,
|
||||
clearIcon: PropTypes.any,
|
||||
inputIcon: PropTypes.any,
|
||||
removeIcon: PropTypes.any,
|
||||
menuItemSelectedIcon: PropTypes.any,
|
||||
dropdownRender: PropTypes.func,
|
||||
mode: PropTypes.oneOf(['multiple', 'tags']),
|
||||
backfill: PropTypes.looseBool,
|
||||
dropdownAlign: PropTypes.any,
|
||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
||||
dropdownMenuStyle: PropTypes.object,
|
||||
notFoundContent: PropTypes.oneOfType([String, Number]),
|
||||
tabindex: PropTypes.oneOfType([String, Number]),
|
||||
__propsSymbol__: PropTypes.any,
|
||||
children: PropTypes.array,
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,214 +0,0 @@
|
|||
import classnames from '../_util/classNames';
|
||||
import raf from 'raf';
|
||||
import Trigger from '../vc-trigger';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import DropdownMenu from './DropdownMenu';
|
||||
import { isSingleMode, saveRef } from './util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { findDOMNode, getSlot } from '../_util/props-util';
|
||||
|
||||
const BUILT_IN_PLACEMENTS = {
|
||||
bottomLeft: {
|
||||
points: ['tl', 'bl'],
|
||||
offset: [0, 4],
|
||||
overflow: {
|
||||
adjustX: 0,
|
||||
adjustY: 1,
|
||||
},
|
||||
},
|
||||
topLeft: {
|
||||
points: ['bl', 'tl'],
|
||||
offset: [0, -4],
|
||||
overflow: {
|
||||
adjustX: 0,
|
||||
adjustY: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'SelectTrigger',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
// onPopupFocus: PropTypes.func,
|
||||
// onPopupScroll: PropTypes.func,
|
||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
||||
defaultActiveFirstOption: PropTypes.looseBool,
|
||||
dropdownAlign: PropTypes.object,
|
||||
visible: PropTypes.looseBool,
|
||||
disabled: PropTypes.looseBool,
|
||||
showSearch: PropTypes.looseBool,
|
||||
dropdownClassName: PropTypes.string,
|
||||
dropdownStyle: PropTypes.object,
|
||||
dropdownMenuStyle: PropTypes.object,
|
||||
multiple: PropTypes.looseBool,
|
||||
inputValue: PropTypes.string,
|
||||
filterOption: PropTypes.any,
|
||||
empty: PropTypes.looseBool,
|
||||
options: PropTypes.any,
|
||||
prefixCls: PropTypes.string,
|
||||
popupClassName: PropTypes.string,
|
||||
value: PropTypes.array,
|
||||
// children: PropTypes.any,
|
||||
showAction: PropTypes.arrayOf(PropTypes.string),
|
||||
combobox: PropTypes.looseBool,
|
||||
animation: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
getPopupContainer: PropTypes.func,
|
||||
backfillValue: PropTypes.any,
|
||||
menuItemSelectedIcon: PropTypes.any,
|
||||
dropdownRender: PropTypes.func,
|
||||
ariaId: PropTypes.string,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownWidth: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.rafInstance = null;
|
||||
this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
|
||||
this.saveTriggerRef = saveRef(this, 'triggerRef');
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.setDropdownWidth();
|
||||
});
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.$nextTick(() => {
|
||||
this.setDropdownWidth();
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.cancelRafInstance();
|
||||
},
|
||||
methods: {
|
||||
setDropdownWidth() {
|
||||
this.cancelRafInstance();
|
||||
this.rafInstance = raf(() => {
|
||||
const width = findDOMNode(this)?.offsetWidth;
|
||||
if (width !== this.dropdownWidth) {
|
||||
this.setState({ dropdownWidth: width });
|
||||
}
|
||||
});
|
||||
},
|
||||
cancelRafInstance() {
|
||||
if (this.rafInstance) {
|
||||
raf.cancel(this.rafInstance);
|
||||
}
|
||||
},
|
||||
getInnerMenu() {
|
||||
return this.dropdownMenuRef && this.dropdownMenuRef.menuRef;
|
||||
},
|
||||
|
||||
getPopupDOMNode() {
|
||||
return this.triggerRef.getPopupDomNode();
|
||||
},
|
||||
|
||||
getDropdownElement(newProps) {
|
||||
const props = { ...this.$props, ...this.$attrs };
|
||||
const { dropdownRender, ariaId } = props;
|
||||
const menuNode = (
|
||||
<DropdownMenu
|
||||
ref={this.saveDropdownMenuRef}
|
||||
{...newProps}
|
||||
ariaId={ariaId}
|
||||
prefixCls={this.getDropdownPrefixCls()}
|
||||
onMenuSelect={props.onMenuSelect}
|
||||
onMenuDeselect={props.onMenuDeselect}
|
||||
onPopupScroll={props.onPopupScroll}
|
||||
value={props.value}
|
||||
backfillValue={props.backfillValue}
|
||||
firstActiveValue={props.firstActiveValue}
|
||||
defaultActiveFirstOption={props.defaultActiveFirstOption}
|
||||
dropdownMenuStyle={props.dropdownMenuStyle}
|
||||
menuItemSelectedIcon={props.menuItemSelectedIcon}
|
||||
/>
|
||||
);
|
||||
|
||||
if (dropdownRender) {
|
||||
return dropdownRender({ menuNode, props });
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
getDropdownTransitionName() {
|
||||
const props = this.$props;
|
||||
let transitionName = props.transitionName;
|
||||
if (!transitionName && props.animation) {
|
||||
transitionName = `${this.getDropdownPrefixCls()}-${props.animation}`;
|
||||
}
|
||||
return transitionName;
|
||||
},
|
||||
|
||||
getDropdownPrefixCls() {
|
||||
return `${this.prefixCls}-dropdown`;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { onPopupFocus, empty, ...props } = { ...this.$props, ...this.$attrs };
|
||||
const {
|
||||
multiple,
|
||||
visible,
|
||||
inputValue,
|
||||
dropdownAlign,
|
||||
disabled,
|
||||
showSearch,
|
||||
dropdownClassName,
|
||||
dropdownStyle,
|
||||
dropdownMatchSelectWidth,
|
||||
} = props;
|
||||
const dropdownPrefixCls = this.getDropdownPrefixCls();
|
||||
const popupClassName = {
|
||||
[dropdownClassName]: !!dropdownClassName,
|
||||
[`${dropdownPrefixCls}--${multiple ? 'multiple' : 'single'}`]: 1,
|
||||
[`${dropdownPrefixCls}--empty`]: empty,
|
||||
};
|
||||
const popupElement = this.getDropdownElement({
|
||||
menuItems: props.options,
|
||||
multiple,
|
||||
inputValue,
|
||||
visible,
|
||||
onPopupFocus,
|
||||
});
|
||||
let hideAction;
|
||||
if (disabled) {
|
||||
hideAction = [];
|
||||
} else if (isSingleMode(props) && !showSearch) {
|
||||
hideAction = ['click'];
|
||||
} else {
|
||||
hideAction = ['blur'];
|
||||
}
|
||||
const popupStyle = { ...dropdownStyle };
|
||||
const widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
|
||||
if (this.dropdownWidth) {
|
||||
popupStyle[widthProp] = `${this.dropdownWidth}px`;
|
||||
}
|
||||
return (
|
||||
<Trigger
|
||||
{...props}
|
||||
showAction={disabled ? [] : this.$props.showAction}
|
||||
hideAction={hideAction}
|
||||
ref={this.saveTriggerRef}
|
||||
popupPlacement="bottomLeft"
|
||||
builtinPlacements={BUILT_IN_PLACEMENTS}
|
||||
prefixCls={dropdownPrefixCls}
|
||||
popupTransitionName={this.getDropdownTransitionName()}
|
||||
onPopupVisibleChange={props.onDropdownVisibleChange}
|
||||
popup={popupElement}
|
||||
popupAlign={dropdownAlign}
|
||||
popupVisible={visible}
|
||||
getPopupContainer={props.getPopupContainer}
|
||||
popupClassName={classnames(popupClassName)}
|
||||
popupStyle={popupStyle}
|
||||
>
|
||||
{getSlot(this)[0]}
|
||||
</Trigger>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,11 +1,267 @@
|
|||
@selectPrefixCls: rc-select;
|
||||
@select-prefix: ~'rc-select';
|
||||
|
||||
@keyframes select-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-input-without-border() {
|
||||
.@{select-prefix}-selection-search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.@{select-prefix} {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
& input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selector {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow&-loading {
|
||||
.@{select-prefix}-arrow {
|
||||
&-icon::after {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #999;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: none;
|
||||
margin-top: 4px;
|
||||
|
||||
animation: rcSelectLoadingIcon 0.5s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Selector ===============
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// ============== Search ===============
|
||||
.@{select-prefix}-selection-search-input {
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- Single ----------------
|
||||
&-single {
|
||||
.@{select-prefix}-selector {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
width: 100%;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-item,
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix}-customize-input) {
|
||||
.@{select-prefix}-selector {
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------- Multiple ---------------
|
||||
&-multiple .@{select-prefix}-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
|
||||
.@{select-prefix}-selection-item {
|
||||
flex: none;
|
||||
background: #bbb;
|
||||
border-radius: 4px;
|
||||
margin-right: 2px;
|
||||
padding: 0 8px;
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
position: relative;
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
padding: 1px;
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
&-mirror {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
white-space: nowrap;
|
||||
position: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
|
||||
// ================ Icons ================
|
||||
&-allow-clear {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-clear {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-arrow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
|
||||
&-icon::after {
|
||||
content: '';
|
||||
border: 5px solid transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
border-top-color: #999;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Focused ===============
|
||||
&-focused {
|
||||
.@{select-prefix}-selector {
|
||||
border-color: blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Dropdown ===============
|
||||
&-dropdown {
|
||||
border: 1px solid green;
|
||||
min-height: 100px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Option ================
|
||||
&-item {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding: 4px 16px;
|
||||
|
||||
// >>> Group
|
||||
&-group {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// >>> Option
|
||||
&-option {
|
||||
position: relative;
|
||||
|
||||
&-grouped {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-item-option-state {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ------- Active -------
|
||||
&-active {
|
||||
background: green;
|
||||
}
|
||||
|
||||
// ------ Disabled ------
|
||||
&-disabled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Empty
|
||||
&-empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom-appear {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
|
||||
&&-active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.@{select-prefix}-selection__choice-zoom-leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&&-active {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -15,527 +271,75 @@
|
|||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.@{selectPrefixCls} {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
line-height: 28px;
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.@{select-prefix}-dropdown {
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
> ul > li > a {
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
// arrow
|
||||
&-arrow {
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-arrow &-arrow-loading {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 6px;
|
||||
margin-left: -4px;
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 2px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #999999;
|
||||
border-color: #999999 transparent #999999 transparent;
|
||||
animation: select-ring 1.2s linear infinite;
|
||||
}
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-arrow &-arrow-icon {
|
||||
border-color: #999999 transparent transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 4px 0 4px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-left: -4px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
// select with arrow or loader
|
||||
&:not(.@{selectPrefixCls}-no-arrow),
|
||||
&-loading {
|
||||
.@{selectPrefixCls}-selection--multiple {
|
||||
.@{selectPrefixCls}-selection__clear {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-selection {
|
||||
outline: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&__placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
&__clear {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
line-height: 28px;
|
||||
&-icon {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-focused &-selection {
|
||||
border-color: #23c0fa;
|
||||
box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
|
||||
}
|
||||
|
||||
&-enabled &-selection {
|
||||
&:hover {
|
||||
border-color: #23c0fa;
|
||||
box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
|
||||
}
|
||||
&:active {
|
||||
border-color: #2db7f5;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection--single {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.@{selectPrefixCls}-selection-selected-value {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection__rendered {
|
||||
height: 28px;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection__clear {
|
||||
top: 0;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
|
||||
.@{selectPrefixCls}-selection--single,
|
||||
.@{selectPrefixCls}-selection__choice__remove {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-search__field__wrap {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-search__field__placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 3px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
&-search--inline {
|
||||
width: 100%;
|
||||
.@{selectPrefixCls}-search__field__wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.@{selectPrefixCls}-search__field {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
//margin-top: 5px;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.@{selectPrefixCls}-search__field__mirror {
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
left: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
> i {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-enabled&-selection--multiple {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&-selection--multiple {
|
||||
min-height: 28px;
|
||||
|
||||
.@{selectPrefixCls}-search--inline {
|
||||
float: left;
|
||||
width: auto;
|
||||
.@{selectPrefixCls}-search__field {
|
||||
&__wrap {
|
||||
width: auto;
|
||||
}
|
||||
width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-search__field__placeholder {
|
||||
top: 5px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection__rendered {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 8px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
.@{selectPrefixCls}-selection__choice {
|
||||
margin-top: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection__clear {
|
||||
top: 1px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-enabled {
|
||||
.@{selectPrefixCls}-selection__choice {
|
||||
cursor: default;
|
||||
&:hover {
|
||||
.@{selectPrefixCls}-selection__choice__remove {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.@{selectPrefixCls}-selection__choice__content {
|
||||
margin-left: -8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{selectPrefixCls}-selection__choice__disabled {
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
.@{selectPrefixCls}-selection__choice__content {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& &-selection__choice {
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 4px;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: padding 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
|
||||
width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||
|
||||
&__content {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
transition: margin 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-appear,
|
||||
&-zoom-leave {
|
||||
.effect();
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
||||
}
|
||||
|
||||
&-zoom-enter.@{selectPrefixCls}-selection__choice-zoom-enter-active,
|
||||
&-zoom-appear.@{selectPrefixCls}-selection__choice-zoom-appear-active {
|
||||
animation-play-state: running;
|
||||
animation-name: rcSelectChoiceZoomIn;
|
||||
}
|
||||
|
||||
&-zoom-leave.@{selectPrefixCls}-selection__choice-zoom-leave-active {
|
||||
animation-play-state: running;
|
||||
animation-name: rcSelectChoiceZoomOut;
|
||||
}
|
||||
|
||||
@keyframes rcSelectChoiceZoomIn {
|
||||
0% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectChoiceZoomOut {
|
||||
to {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__remove {
|
||||
color: #919191;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 0 0 0 8px;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
top: 0;
|
||||
right: 2px;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
|
||||
&-icon {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid #d9d9d9;
|
||||
box-shadow: 0 0px 4px #d9d9d9;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
|
||||
&:empty,
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
z-index: 9999;
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li.@{selectPrefixCls}-menu-item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
li&-item {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
|
||||
&-disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
color: #666;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background-color: #5897fb;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcSelectDropdownSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSelectDropdownSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectDropdownSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSelectDropdownSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-open {
|
||||
.@{selectPrefixCls}-arrow b {
|
||||
border-color: transparent transparent #888 transparent;
|
||||
border-width: 0 4px 5px 4px;
|
||||
}
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectDropdownSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSelectDropdownSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectLoadingIcon {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
// based on vc-select 9.2.2
|
||||
import Select from './Select';
|
||||
import Option from './Option';
|
||||
import { SelectPropTypes } from './PropTypes';
|
||||
import OptGroup from './OptGroup';
|
||||
Select.Option = Option;
|
||||
Select.OptGroup = OptGroup;
|
||||
export { Select, Option, OptGroup, SelectPropTypes };
|
||||
export default Select;
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import Select from './Select';
|
||||
import Select, { ExportedSelectProps } from './Select';
|
||||
import Option from './Option';
|
||||
import OptGroup from './OptGroup';
|
||||
import { BaseProps } from './generate';
|
||||
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
export type { ExportedSelectProps as SelectProps } from './Select';
|
||||
|
||||
export type SelectProps<T> = ExportedSelectProps<T>;
|
||||
export { Option, OptGroup, BaseProps };
|
||||
|
||||
export default Select;
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
import { getPropsData, getComponent, getSlot } from '../_util/props-util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { isVNode, Text } from 'vue';
|
||||
|
||||
export function toTitle(title) {
|
||||
if (typeof title === 'string') {
|
||||
return title.trim();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
export function getValuePropValue(child) {
|
||||
if (!child) {
|
||||
return null;
|
||||
}
|
||||
const props = getPropsData(child);
|
||||
if ('value' in props) {
|
||||
return props.value;
|
||||
}
|
||||
if (child.key !== undefined) {
|
||||
return child.key;
|
||||
}
|
||||
if (typeof child.type === 'object' && child.type.isSelectOptGroup) {
|
||||
const label = getComponent(child, 'label');
|
||||
if (label) {
|
||||
return label;
|
||||
}
|
||||
}
|
||||
throw new Error(`Need at least a key or a value or a label (only for OptGroup) for ${child}`);
|
||||
}
|
||||
|
||||
export function getPropValue(child, prop) {
|
||||
if (prop === 'value') {
|
||||
return getValuePropValue(child);
|
||||
}
|
||||
if (prop === 'children') {
|
||||
const temp = getComponent(child);
|
||||
const newChild = isVNode(temp) ? cloneElement(temp) : temp;
|
||||
if (isVNode(newChild) && newChild.type === Text) {
|
||||
return newChild.children;
|
||||
}
|
||||
return newChild;
|
||||
}
|
||||
const props = getPropsData(child);
|
||||
return props[prop];
|
||||
}
|
||||
|
||||
export function isMultiple(props) {
|
||||
return props.multiple;
|
||||
}
|
||||
|
||||
export function isCombobox(props) {
|
||||
return props.combobox;
|
||||
}
|
||||
|
||||
export function isMultipleOrTags(props) {
|
||||
return props.multiple || props.tags;
|
||||
}
|
||||
|
||||
export function isMultipleOrTagsOrCombobox(props) {
|
||||
return isMultipleOrTags(props) || isCombobox(props);
|
||||
}
|
||||
|
||||
export function isSingleMode(props) {
|
||||
return !isMultipleOrTagsOrCombobox(props);
|
||||
}
|
||||
|
||||
export function toArray(value) {
|
||||
let ret = value;
|
||||
if (value === undefined) {
|
||||
ret = [];
|
||||
} else if (!Array.isArray(value)) {
|
||||
ret = [value];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function getMapKey(value) {
|
||||
return `${typeof value}-${value}`;
|
||||
}
|
||||
|
||||
export function preventDefaultEvent(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
export function findIndexInValueBySingleValue(value, singleValue) {
|
||||
let index = -1;
|
||||
if (value) {
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (value[i] === singleValue) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
export function getLabelFromPropsValue(value, key) {
|
||||
let label;
|
||||
value = toArray(value);
|
||||
if (value) {
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (value[i].key === key) {
|
||||
label = value[i].label;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return label;
|
||||
}
|
||||
|
||||
export function getSelectKeys(menuItems = [], value) {
|
||||
if (value === null || value === undefined) {
|
||||
return [];
|
||||
}
|
||||
let selectedKeys = [];
|
||||
menuItems.forEach(item => {
|
||||
if (item.type?.isMenuItemGroup) {
|
||||
selectedKeys = selectedKeys.concat(getSelectKeys(getSlot(item), value));
|
||||
} else {
|
||||
const itemValue = getValuePropValue(item);
|
||||
const itemKey = item.key;
|
||||
if (findIndexInValueBySingleValue(value, itemValue) !== -1 && itemKey !== undefined) {
|
||||
selectedKeys.push(itemKey);
|
||||
}
|
||||
}
|
||||
});
|
||||
return selectedKeys;
|
||||
}
|
||||
|
||||
export const UNSELECTABLE_STYLE = {
|
||||
userSelect: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
};
|
||||
|
||||
export const UNSELECTABLE_ATTRIBUTE = {
|
||||
unselectable: 'on',
|
||||
};
|
||||
|
||||
export function findFirstMenuItem(children) {
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
const props = getPropsData(child);
|
||||
if (child.type?.isMenuItemGroup) {
|
||||
const found = findFirstMenuItem(getSlot(child));
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
} else if (!props.disabled) {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function includesSeparators(str, separators) {
|
||||
for (let i = 0; i < separators.length; ++i) {
|
||||
if (str.lastIndexOf(separators[i]) > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function splitBySeparators(str, separators) {
|
||||
const reg = new RegExp(`[${separators.join()}]`);
|
||||
return str.split(reg).filter(token => token);
|
||||
}
|
||||
|
||||
export function defaultFilterFn(input, child) {
|
||||
const props = getPropsData(child);
|
||||
if (props.disabled) {
|
||||
return false;
|
||||
}
|
||||
let value = getPropValue(child, this.optionFilterProp);
|
||||
if (value.length && value[0].text) {
|
||||
value = value[0].text;
|
||||
} else {
|
||||
value = String(value);
|
||||
}
|
||||
return value.toLowerCase().indexOf(input.toLowerCase()) > -1;
|
||||
}
|
||||
|
||||
export function validateOptionValue(value, props) {
|
||||
if (isSingleMode(props) || isMultiple(props)) {
|
||||
return;
|
||||
}
|
||||
if (typeof value !== 'string') {
|
||||
throw new Error(
|
||||
`Invalid \`value\` of type \`${typeof value}\` supplied to Option, ` +
|
||||
`expected \`string\` when \`tags/combobox\` is \`true\`.`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function saveRef(instance, name) {
|
||||
return node => {
|
||||
instance[name] = node;
|
||||
};
|
||||
}
|
||||
|
||||
export function generateUUID() {
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
return 'test-uuid';
|
||||
}
|
||||
let d = new Date().getTime();
|
||||
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
const r = (d + Math.random() * 16) % 16 | 0;
|
||||
d = Math.floor(d / 16);
|
||||
return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
|
||||
});
|
||||
return uuid;
|
||||
}
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
@select-prefix: ~'rc-select';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-input-without-border() {
|
||||
.@{select-prefix}-selection-search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix} {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
& input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selector {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow&-loading {
|
||||
.@{select-prefix}-arrow {
|
||||
&-icon::after {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #999;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: none;
|
||||
margin-top: 4px;
|
||||
|
||||
animation: rcSelectLoadingIcon 0.5s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Selector ===============
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// ============== Search ===============
|
||||
.@{select-prefix}-selection-search-input {
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- Single ----------------
|
||||
&-single {
|
||||
.@{select-prefix}-selector {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
width: 100%;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-item,
|
||||
.@{select-prefix}-selection-placeholder {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix}-customize-input) {
|
||||
.@{select-prefix}-selector {
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------- Multiple ---------------
|
||||
&-multiple .@{select-prefix}-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1px;
|
||||
border: 1px solid #000;
|
||||
|
||||
.@{select-prefix}-selection-item {
|
||||
flex: none;
|
||||
background: #bbb;
|
||||
border-radius: 4px;
|
||||
margin-right: 2px;
|
||||
padding: 0 8px;
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection-search {
|
||||
position: relative;
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
padding: 1px;
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
&-mirror {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
white-space: nowrap;
|
||||
position: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-without-border();
|
||||
}
|
||||
|
||||
// ================ Icons ================
|
||||
&-allow-clear {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-clear {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-show-arrow {
|
||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-arrow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
|
||||
&-icon::after {
|
||||
content: '';
|
||||
border: 5px solid transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
border-top-color: #999;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Focused ===============
|
||||
&-focused {
|
||||
.@{select-prefix}-selector {
|
||||
border-color: blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ============== Dropdown ===============
|
||||
&-dropdown {
|
||||
border: 1px solid green;
|
||||
min-height: 100px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Option ================
|
||||
&-item {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding: 4px 16px;
|
||||
|
||||
// >>> Group
|
||||
&-group {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// >>> Option
|
||||
&-option {
|
||||
position: relative;
|
||||
|
||||
&-grouped {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.@{select-prefix}-item-option-state {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ------- Active -------
|
||||
&-active {
|
||||
background: green;
|
||||
}
|
||||
|
||||
// ------ Disabled ------
|
||||
&-disabled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Empty
|
||||
&-empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.@{select-prefix}-selection__choice-zoom-appear {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
|
||||
&&-active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.@{select-prefix}-selection__choice-zoom-leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&&-active {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.@{select-prefix}-dropdown {
|
||||
&-slide-up-enter,
|
||||
&-slide-up-appear {
|
||||
.effect();
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: rcSelectDropdownSlideUpOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: rcSelectDropdownSlideDownOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectDropdownSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSelectDropdownSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSelectLoadingIcon {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,39 @@
|
|||
<template>
|
||||
<a-empty
|
||||
class="ddd"
|
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
||||
:image-style="{
|
||||
height: '60px',
|
||||
}"
|
||||
>
|
||||
<template v-slot:description>
|
||||
<span> Customize <a href="#API">Description</a> </span>
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Create Now
|
||||
</a-button>
|
||||
</a-empty>
|
||||
<div>
|
||||
<demo />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import demo from '../antdv-demo/docs/select/demo';
|
||||
// import Affix from '../components/affix';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
demo,
|
||||
// Affix,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
pStyle: {
|
||||
fontSize: '16px',
|
||||
color: 'rgba(0,0,0,0.85)',
|
||||
lineHeight: '24px',
|
||||
display: 'block',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
pStyle2: {
|
||||
marginBottom: '24px',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
"@babel/core": "^7.10.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.8.3",
|
||||
"@babel/plugin-proposal-export-namespace-from": "^7.12.1",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const babelConfig = {
|
|||
'last 2 versions',
|
||||
'Firefox ESR',
|
||||
'> 1%',
|
||||
'ie >= 9',
|
||||
'ie >= 11',
|
||||
'iOS >= 8',
|
||||
'Android >= 4',
|
||||
],
|
||||
|
|
@ -38,6 +38,7 @@ const babelConfig = {
|
|||
'@babel/plugin-transform-object-assign',
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-proposal-export-namespace-from',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue