增加admin管理帐号和项目的界面--初步实现
This commit is contained in:
Cheng Zhou
+5
@@ -0,0 +1,5 @@
|
||||
import Select from './src/select.vue';
|
||||
import type { SFCWithInstall } from 'element-plus/es/utils';
|
||||
export declare const ElSelectV2: SFCWithInstall<typeof Select>;
|
||||
export default ElSelectV2;
|
||||
export * from './src/token';
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var select = require('./src/select.js');
|
||||
var token = require('./src/token.js');
|
||||
var install = require('../../utils/vue/install.js');
|
||||
|
||||
const ElSelectV2 = install.withInstall(select["default"]);
|
||||
|
||||
exports.selectV2InjectionKey = token.selectV2InjectionKey;
|
||||
exports.ElSelectV2 = ElSelectV2;
|
||||
exports["default"] = ElSelectV2;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","sources":["../../../../../packages/components/select-v2/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Select from './src/select.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElSelectV2: SFCWithInstall<typeof Select> = withInstall(Select)\nexport default ElSelectV2\n\nexport * from './src/token'\n"],"names":["withInstall","Select"],"mappings":";;;;;;;;AAEY,MAAC,UAAU,GAAGA,mBAAW,CAACC,iBAAM;;;;;;"}
|
||||
+264
@@ -0,0 +1,264 @@
|
||||
import type SelectV2 from './select.vue';
|
||||
import type { Option, OptionType } from './select.types';
|
||||
import type { Props } from './useProps';
|
||||
import type { EmitFn } from 'element-plus/es/utils/vue/typescript';
|
||||
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
|
||||
import type { Options, Placement, PopperEffect } from 'element-plus/es/components/popper';
|
||||
export declare const selectV2Props: {
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | ((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list"))[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | ((new (...args: any[]) => string) | (() => PopperEffect))[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | ((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
})[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: import("vue").PropType<OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: import("vue").PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | ((new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => Partial<Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | ((new (...args: any[]) => Props) | (() => Props))[], unknown, unknown, () => Required<Props>, boolean>;
|
||||
readonly valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | ((new (...args: any[]) => Placement[]) | (() => Placement[]))[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: import("element-plus/es/utils").EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
};
|
||||
export declare const optionV2Props: {
|
||||
readonly data: ArrayConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly hovering: BooleanConstructor;
|
||||
readonly item: {
|
||||
readonly type: import("vue").PropType<Option>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly index: NumberConstructor;
|
||||
readonly style: ObjectConstructor;
|
||||
readonly selected: BooleanConstructor;
|
||||
readonly created: BooleanConstructor;
|
||||
};
|
||||
export declare const selectV2Emits: {
|
||||
"update:modelValue": (val: SelectV2Props["modelValue"]) => boolean;
|
||||
change: (val: SelectV2Props["modelValue"]) => boolean;
|
||||
'remove-tag': (val: unknown) => boolean;
|
||||
'visible-change': (visible: boolean) => boolean;
|
||||
focus: (evt: FocusEvent) => boolean;
|
||||
blur: (evt: FocusEvent) => boolean;
|
||||
clear: () => boolean;
|
||||
};
|
||||
export declare const optionV2Emits: {
|
||||
hover: (index?: number) => index is number;
|
||||
select: (val: Option, index?: number) => boolean;
|
||||
};
|
||||
export type SelectV2Props = ExtractPropTypes<typeof selectV2Props>;
|
||||
export type SelectV2PropsPublic = __ExtractPublicPropTypes<typeof selectV2Props>;
|
||||
export type OptionV2Props = ExtractPropTypes<typeof optionV2Props>;
|
||||
export type OptionV2PropsPublic = __ExtractPublicPropTypes<typeof optionV2Props>;
|
||||
export type SelectV2EmitFn = EmitFn<typeof selectV2Emits>;
|
||||
export type OptionV2EmitFn = EmitFn<typeof optionV2Emits>;
|
||||
export type SelectV2Instance = InstanceType<typeof SelectV2> & unknown;
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var core = require('@popperjs/core');
|
||||
var iconsVue = require('@element-plus/icons-vue');
|
||||
var useProps = require('./useProps.js');
|
||||
var runtime = require('../../../utils/vue/props/runtime.js');
|
||||
var icon = require('../../../utils/vue/icon.js');
|
||||
var content = require('../../tooltip/src/content.js');
|
||||
var index = require('../../../hooks/use-size/index.js');
|
||||
var tag = require('../../tag/src/tag.js');
|
||||
var types = require('../../../utils/types.js');
|
||||
var index$1 = require('../../../hooks/use-empty-values/index.js');
|
||||
var index$2 = require('../../../hooks/use-aria/index.js');
|
||||
var event = require('../../../constants/event.js');
|
||||
|
||||
const selectV2Props = runtime.buildProps({
|
||||
allowCreate: Boolean,
|
||||
autocomplete: {
|
||||
type: runtime.definePropType(String),
|
||||
default: "none"
|
||||
},
|
||||
automaticDropdown: Boolean,
|
||||
clearable: Boolean,
|
||||
clearIcon: {
|
||||
type: icon.iconPropType,
|
||||
default: iconsVue.CircleClose
|
||||
},
|
||||
effect: {
|
||||
type: runtime.definePropType(String),
|
||||
default: "light"
|
||||
},
|
||||
collapseTags: Boolean,
|
||||
collapseTagsTooltip: Boolean,
|
||||
maxCollapseTags: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
defaultFirstOption: Boolean,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
estimatedOptionHeight: {
|
||||
type: Number,
|
||||
default: void 0
|
||||
},
|
||||
filterable: Boolean,
|
||||
filterMethod: {
|
||||
type: runtime.definePropType(Function)
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 274
|
||||
},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: 34
|
||||
},
|
||||
id: String,
|
||||
loading: Boolean,
|
||||
loadingText: String,
|
||||
modelValue: {
|
||||
type: runtime.definePropType([Array, String, Number, Boolean, Object]),
|
||||
default: void 0
|
||||
},
|
||||
multiple: Boolean,
|
||||
multipleLimit: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: String,
|
||||
noDataText: String,
|
||||
noMatchText: String,
|
||||
remoteMethod: {
|
||||
type: runtime.definePropType(Function)
|
||||
},
|
||||
reserveKeyword: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
options: {
|
||||
type: runtime.definePropType(Array),
|
||||
required: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
teleported: content.useTooltipContentProps.teleported,
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
popperClass: content.useTooltipContentProps.popperClass,
|
||||
popperStyle: content.useTooltipContentProps.popperStyle,
|
||||
popperOptions: {
|
||||
type: runtime.definePropType(Object),
|
||||
default: () => ({})
|
||||
},
|
||||
remote: Boolean,
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
size: index.useSizeProp,
|
||||
props: {
|
||||
type: runtime.definePropType(Object),
|
||||
default: () => useProps.defaultProps
|
||||
},
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: "value"
|
||||
},
|
||||
scrollbarAlwaysOn: Boolean,
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
remoteShowSuffix: Boolean,
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placement: {
|
||||
type: runtime.definePropType(String),
|
||||
values: core.placements,
|
||||
default: "bottom-start"
|
||||
},
|
||||
fallbackPlacements: {
|
||||
type: runtime.definePropType(Array),
|
||||
default: ["bottom-start", "top-start", "right", "left"]
|
||||
},
|
||||
tagType: { ...tag.tagProps.type, default: "info" },
|
||||
tagEffect: { ...tag.tagProps.effect, default: "light" },
|
||||
tabindex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
appendTo: content.useTooltipContentProps.appendTo,
|
||||
fitInputWidth: {
|
||||
type: [Boolean, Number],
|
||||
default: true,
|
||||
validator(val) {
|
||||
return types.isBoolean(val) || types.isNumber(val);
|
||||
}
|
||||
},
|
||||
suffixIcon: {
|
||||
type: icon.iconPropType,
|
||||
default: iconsVue.ArrowDown
|
||||
},
|
||||
...index$1.useEmptyValuesProps,
|
||||
...index$2.useAriaProps(["ariaLabel"])
|
||||
});
|
||||
const optionV2Props = runtime.buildProps({
|
||||
data: Array,
|
||||
disabled: Boolean,
|
||||
hovering: Boolean,
|
||||
item: {
|
||||
type: runtime.definePropType(Object),
|
||||
required: true
|
||||
},
|
||||
index: Number,
|
||||
style: Object,
|
||||
selected: Boolean,
|
||||
created: Boolean
|
||||
});
|
||||
const selectV2Emits = {
|
||||
[event.UPDATE_MODEL_EVENT]: (val) => true,
|
||||
[event.CHANGE_EVENT]: (val) => true,
|
||||
"remove-tag": (val) => true,
|
||||
"visible-change": (visible) => true,
|
||||
focus: (evt) => evt instanceof FocusEvent,
|
||||
blur: (evt) => evt instanceof FocusEvent,
|
||||
clear: () => true
|
||||
};
|
||||
const optionV2Emits = {
|
||||
hover: (index) => types.isNumber(index),
|
||||
select: (val, index) => true
|
||||
};
|
||||
|
||||
exports.optionV2Emits = optionV2Emits;
|
||||
exports.optionV2Props = optionV2Props;
|
||||
exports.selectV2Emits = selectV2Emits;
|
||||
exports.selectV2Props = selectV2Props;
|
||||
//# sourceMappingURL=defaults.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+36
@@ -0,0 +1,36 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
||||
var index = require('../../../hooks/use-namespace/index.js');
|
||||
|
||||
const _sfc_main = vue.defineComponent({
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
style: {
|
||||
type: Object
|
||||
},
|
||||
height: Number
|
||||
},
|
||||
setup() {
|
||||
const ns = index.useNamespace("select");
|
||||
return {
|
||||
ns
|
||||
};
|
||||
}
|
||||
});
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return vue.openBlock(), vue.createElementBlock("div", {
|
||||
class: vue.normalizeClass(_ctx.ns.be("group", "title")),
|
||||
style: vue.normalizeStyle({ ..._ctx.style, lineHeight: `${_ctx.height}px` })
|
||||
}, vue.toDisplayString(_ctx.item.label), 7);
|
||||
}
|
||||
var GroupItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "group-item.vue"]]);
|
||||
|
||||
exports["default"] = GroupItem;
|
||||
//# sourceMappingURL=group-item.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"group-item.js","sources":["../../../../../../packages/components/select-v2/src/group-item.vue"],"sourcesContent":["<template>\n <div\n :class=\"ns.be('group', 'title')\"\n :style=\"{ ...style, lineHeight: `${height}px` }\"\n >\n {{ item.label }}\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties, PropType } from 'vue'\n\nexport default defineComponent({\n props: {\n item: {\n type: Object,\n required: true,\n },\n style: {\n type: Object as PropType<CSSProperties>,\n },\n height: Number,\n },\n setup() {\n const ns = useNamespace('select')\n return {\n ns,\n }\n },\n})\n</script>\n"],"names":["defineComponent","useNamespace","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_toDisplayString","_export_sfc"],"mappings":";;;;;;;;AAeA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,KAAO,EAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,IAAM,EAAA,MAAA;AAAA,MACN,QAAU,EAAA,IAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,KACR;AAAA,IACA,MAAQ,EAAA,MAAA;AAAA,GACV;AAAA,EACA,KAAQ,GAAA;AACN,IAAM,MAAA,EAAA,GAAKC,mBAAa,QAAQ,CAAA,CAAA;AAChC,IAAO,OAAA;AAAA,MACL,EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;AA/BC,EAAA,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAAA,IAKM,KAAA,EAAAC,kBAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,CAAA;AAAA,IAAA,KAAA,EAAAC,kBAAA,CAAA,EAAA,GAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,GAJH,EAAAC,mBAAO,CAAA,IAAA,CAAA,IAAA,CAAA,KAAG,CAAE,EAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAGV,gBAAA,gBAAKC,iCAAK,CAAA,SAAA,EAAA,CAAA,CAAA,QAAA,EAAA,WAAA,CAAA,EAAA,CAAA,QAAA,EAAA,gBAAA,CAAA,CAAA,CAAA;;;;"}
|
||||
Generated
Vendored
+40
@@ -0,0 +1,40 @@
|
||||
import type { CSSProperties, PropType } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
item: {
|
||||
type: ObjectConstructor;
|
||||
required: true;
|
||||
};
|
||||
style: {
|
||||
type: PropType<CSSProperties>;
|
||||
};
|
||||
height: NumberConstructor;
|
||||
}, {
|
||||
ns: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
item: {
|
||||
type: ObjectConstructor;
|
||||
required: true;
|
||||
};
|
||||
style: {
|
||||
type: PropType<CSSProperties>;
|
||||
};
|
||||
height: NumberConstructor;
|
||||
}>>, {}>;
|
||||
export default _default;
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var useOption = require('./useOption.js');
|
||||
var useProps = require('./useProps.js');
|
||||
var defaults = require('./defaults.js');
|
||||
var token = require('./token.js');
|
||||
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
||||
var index = require('../../../hooks/use-namespace/index.js');
|
||||
|
||||
const _sfc_main = vue.defineComponent({
|
||||
props: defaults.optionV2Props,
|
||||
emits: defaults.optionV2Emits,
|
||||
setup(props, { emit }) {
|
||||
const select = vue.inject(token.selectV2InjectionKey);
|
||||
const ns = index.useNamespace("select");
|
||||
const { hoverItem, selectOptionClick } = useOption.useOption(props, { emit });
|
||||
const { getLabel } = useProps.useProps(select.props);
|
||||
const contentId = select.contentId;
|
||||
return {
|
||||
ns,
|
||||
contentId,
|
||||
hoverItem,
|
||||
selectOptionClick,
|
||||
getLabel
|
||||
};
|
||||
}
|
||||
});
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return vue.openBlock(), vue.createElementBlock("li", {
|
||||
id: `${_ctx.contentId}-${_ctx.index}`,
|
||||
role: "option",
|
||||
"aria-selected": _ctx.selected,
|
||||
"aria-disabled": _ctx.disabled || void 0,
|
||||
style: vue.normalizeStyle(_ctx.style),
|
||||
class: vue.normalizeClass([
|
||||
_ctx.ns.be("dropdown", "item"),
|
||||
_ctx.ns.is("selected", _ctx.selected),
|
||||
_ctx.ns.is("disabled", _ctx.disabled),
|
||||
_ctx.ns.is("created", _ctx.created),
|
||||
_ctx.ns.is("hovering", _ctx.hovering)
|
||||
]),
|
||||
onMousemove: _ctx.hoverItem,
|
||||
onClick: vue.withModifiers(_ctx.selectOptionClick, ["stop"])
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "default", {
|
||||
item: _ctx.item,
|
||||
index: _ctx.index,
|
||||
disabled: _ctx.disabled
|
||||
}, () => [
|
||||
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.getLabel(_ctx.item)), 1)
|
||||
])
|
||||
], 46, ["id", "aria-selected", "aria-disabled", "onMousemove", "onClick"]);
|
||||
}
|
||||
var OptionItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "option-item.vue"]]);
|
||||
|
||||
exports["default"] = OptionItem;
|
||||
//# sourceMappingURL=option-item.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"option-item.js","sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n <li\n :id=\"`${contentId}-${index}`\"\n role=\"option\"\n :aria-selected=\"selected\"\n :aria-disabled=\"disabled || undefined\"\n :style=\"style\"\n :class=\"[\n ns.be('dropdown', 'item'),\n ns.is('selected', selected),\n ns.is('disabled', disabled),\n ns.is('created', created),\n ns.is('hovering', hovering),\n ]\"\n @mousemove=\"hoverItem\"\n @click.stop=\"selectOptionClick\"\n >\n <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n <span>{{ getLabel(item) }}</span>\n </slot>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { useProps } from './useProps'\nimport { optionV2Emits, optionV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\n\nexport default defineComponent({\n props: optionV2Props,\n emits: optionV2Emits,\n setup(props, { emit }) {\n const select = inject(selectV2InjectionKey)!\n const ns = useNamespace('select')\n const { hoverItem, selectOptionClick } = useOption(props, { emit })\n const { getLabel } = useProps(select.props)\n const contentId = select.contentId\n\n return {\n ns,\n contentId,\n hoverItem,\n selectOptionClick,\n getLabel,\n }\n },\n})\n</script>\n"],"names":["defineComponent","optionV2Props","optionV2Emits","inject","selectV2InjectionKey","useNamespace","useOption","useProps","_createElementBlock","_normalizeStyle","_normalizeClass","_withModifiers","_renderSlot","_createElementVNode","_toDisplayString","_export_sfc"],"mappings":";;;;;;;;;;;;AA+BA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,KAAO,EAAAC,sBAAA;AAAA,EACP,KAAO,EAAAC,sBAAA;AAAA,EACP,KAAM,CAAA,KAAA,EAAO,EAAE,IAAA,EAAQ,EAAA;AACrB,IAAM,MAAA,MAAA,GAASC,WAAOC,0BAAoB,CAAA,CAAA;AAC1C,IAAM,MAAA,EAAA,GAAKC,mBAAa,QAAQ,CAAA,CAAA;AAChC,IAAM,MAAA,EAAE,WAAW,iBAAkB,EAAA,GAAIC,oBAAU,KAAO,EAAA,EAAE,MAAM,CAAA,CAAA;AAClE,IAAA,MAAM,EAAE,QAAA,EAAa,GAAAC,iBAAA,CAAS,OAAO,KAAK,CAAA,CAAA;AAC1C,IAAA,MAAM,YAAY,MAAO,CAAA,SAAA,CAAA;AAEzB,IAAO,OAAA;AAAA,MACL,EAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;0BAhDCC,sBAmBK,CAAA,IAAA,EAAA;AAAA,IAlBF,EAAE,EAAA,CAAA,EAAK,IAAS,CAAA,SAAA,CAAA,CAAA,EAAI,IAAK,CAAA,KAAA,CAAA,CAAA;AAAA,IAC1B,IAAK,EAAA,QAAA;AAAA,IACJ,eAAe,EAAA,IAAA,CAAA,QAAA;AAAA,IACf,iBAAe,IAAY,CAAA,QAAA,IAAA,KAAA,CAAA;AAAA,IAC3B,KAAA,EAAKC,mBAAE,IAAK,CAAA,KAAA,CAAA;AAAA,IACZ,KAAK,EAAAC,kBAAA,CAAA;AAAA,MAAU,QAAG,EAAE,CAAA,UAAA,EAAA,MAAA,CAAA;AAAA,MAA4B,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,UAAA,EAAa,IAAQ,CAAA,QAAA,CAAA;AAAA,MAAS,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,UAAA,EAAa,IAAQ,CAAA,QAAA,CAAA;AAAA,MAAS,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,SAAA,EAAY,IAAO,CAAA,OAAA,CAAA;AAAA,MAAS,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,UAAA,EAAa,IAAQ,CAAA,QAAA,CAAA;AAAA,KAAA,CAAA;IAOjL,WAAW,EAAA,IAAA,CAAA,SAAA;AAAA,IACX,OAAA,EAAKC,kBAAO,IAAiB,CAAA,iBAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AAAA,GAAA,EAAA;IAE9BC,cAEO,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,MAFA,IAAM,EAAA,IAAA,CAAA,IAAA;AAAA,MAAO,KAAO,EAAA,IAAA,CAAA,KAAA;AAAA,MAAQ,QAAU,EAAA,IAAA,CAAA,QAAA;AAAA,KAAA,EAA7C,MAEO;AAAA,MADLC,sBAAA,CAAA,MAAA,EAAA,IAAA,EAAAC,mBAAA,CAAA,IAAA,CAAA,QAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,KAAiC,CAAA;AAAA,GAAA,EAAA,EAAA,EAAA,CAAA,IAAA,EAAA,eAAA,EAAA,eAAA,EAAA,aAAA,EAAA,SAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAAX,iBAAA,gBAAAC,iCAAA,CAAA,SAAA,EAAA,CAAA,CAAA,QAAA,EAAA,WAAA,CAAA,EAAA,CAAA,QAAA,EAAA,iBAAA,CAAA,CAAA,CAAA;;;;"}
|
||||
Generated
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
readonly data: ArrayConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly hovering: BooleanConstructor;
|
||||
readonly item: {
|
||||
readonly type: import("vue").PropType<import("./select.types").Option>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly index: NumberConstructor;
|
||||
readonly style: ObjectConstructor;
|
||||
readonly selected: BooleanConstructor;
|
||||
readonly created: BooleanConstructor;
|
||||
}, {
|
||||
ns: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
contentId: import("vue").Ref<string>;
|
||||
hoverItem: () => void;
|
||||
selectOptionClick: () => void;
|
||||
getLabel: (option: import("./select.types").Option) => any;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
hover: (index?: number) => index is number;
|
||||
select: (val: import("./select.types").Option, index?: number) => boolean;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
readonly data: ArrayConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly hovering: BooleanConstructor;
|
||||
readonly item: {
|
||||
readonly type: import("vue").PropType<import("./select.types").Option>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly index: NumberConstructor;
|
||||
readonly style: ObjectConstructor;
|
||||
readonly selected: BooleanConstructor;
|
||||
readonly created: BooleanConstructor;
|
||||
}>> & {
|
||||
onSelect?: ((val: import("./select.types").Option, index?: number | undefined) => any) | undefined;
|
||||
onHover?: ((index?: number | undefined) => any) | undefined;
|
||||
}, {
|
||||
readonly disabled: boolean;
|
||||
readonly created: boolean;
|
||||
readonly selected: boolean;
|
||||
readonly hovering: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
Generated
Vendored
+48
@@ -0,0 +1,48 @@
|
||||
import type { DynamicSizeListInstance, FixedSizeListInstance } from 'element-plus/es/components/virtual-list';
|
||||
import type { Option } from './select.types';
|
||||
import type { ComponentPublicInstance, ComputedRef, ExtractPropTypes, Ref } from 'vue';
|
||||
declare const props: {
|
||||
loading: BooleanConstructor;
|
||||
data: {
|
||||
type: ArrayConstructor;
|
||||
required: true;
|
||||
};
|
||||
hoveringIndex: NumberConstructor;
|
||||
width: NumberConstructor;
|
||||
id: StringConstructor;
|
||||
ariaLabel: StringConstructor;
|
||||
};
|
||||
interface SelectDropdownExposed {
|
||||
listRef: Ref<FixedSizeListInstance | DynamicSizeListInstance | undefined>;
|
||||
isSized: ComputedRef<boolean>;
|
||||
isItemDisabled: (modelValue: any[] | any, selected: boolean) => boolean;
|
||||
isItemHovering: (target: number) => boolean;
|
||||
isItemSelected: (modelValue: any[] | any, target: Option) => boolean;
|
||||
scrollToItem: (index: number) => void;
|
||||
resetScrollTop: () => void;
|
||||
}
|
||||
export type SelectDropdownInstance = ComponentPublicInstance<ExtractPropTypes<typeof props>, SelectDropdownExposed>;
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
loading: BooleanConstructor;
|
||||
data: {
|
||||
type: ArrayConstructor;
|
||||
required: true;
|
||||
};
|
||||
hoveringIndex: NumberConstructor;
|
||||
width: NumberConstructor;
|
||||
id: StringConstructor;
|
||||
ariaLabel: StringConstructor;
|
||||
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
||||
loading: BooleanConstructor;
|
||||
data: {
|
||||
type: ArrayConstructor;
|
||||
required: true;
|
||||
};
|
||||
hoveringIndex: NumberConstructor;
|
||||
width: NumberConstructor;
|
||||
id: StringConstructor;
|
||||
ariaLabel: StringConstructor;
|
||||
}>>, {
|
||||
loading: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
Generated
Vendored
+253
@@ -0,0 +1,253 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var lodashUnified = require('lodash-unified');
|
||||
var groupItem = require('./group-item.js');
|
||||
var optionItem = require('./option-item.js');
|
||||
var useProps = require('./useProps.js');
|
||||
var token = require('./token.js');
|
||||
var fixedSizeList = require('../../virtual-list/src/components/fixed-size-list.js');
|
||||
var dynamicSizeList = require('../../virtual-list/src/components/dynamic-size-list.js');
|
||||
var index = require('../../../hooks/use-namespace/index.js');
|
||||
var types = require('../../../utils/types.js');
|
||||
var core = require('@vueuse/core');
|
||||
var event = require('../../../utils/dom/event.js');
|
||||
var aria = require('../../../constants/aria.js');
|
||||
var shared = require('@vue/shared');
|
||||
|
||||
const props = {
|
||||
loading: Boolean,
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
hoveringIndex: Number,
|
||||
width: Number,
|
||||
id: String,
|
||||
ariaLabel: String
|
||||
};
|
||||
var ElSelectMenu = vue.defineComponent({
|
||||
name: "ElSelectDropdown",
|
||||
props,
|
||||
setup(props2, {
|
||||
slots,
|
||||
expose
|
||||
}) {
|
||||
const select = vue.inject(token.selectV2InjectionKey);
|
||||
const ns = index.useNamespace("select");
|
||||
const {
|
||||
getLabel,
|
||||
getValue,
|
||||
getDisabled
|
||||
} = useProps.useProps(select.props);
|
||||
const cachedHeights = vue.ref([]);
|
||||
const listRef = vue.ref();
|
||||
const size = vue.computed(() => props2.data.length);
|
||||
vue.watch(() => size.value, () => {
|
||||
var _a, _b;
|
||||
(_b = (_a = select.tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
||||
});
|
||||
const isSized = vue.computed(() => types.isUndefined(select.props.estimatedOptionHeight));
|
||||
const listProps = vue.computed(() => {
|
||||
if (isSized.value) {
|
||||
return {
|
||||
itemSize: select.props.itemHeight
|
||||
};
|
||||
}
|
||||
return {
|
||||
estimatedSize: select.props.estimatedOptionHeight,
|
||||
itemSize: (idx) => cachedHeights.value[idx]
|
||||
};
|
||||
});
|
||||
const contains = (arr = [], target) => {
|
||||
const {
|
||||
props: {
|
||||
valueKey
|
||||
}
|
||||
} = select;
|
||||
if (!shared.isObject(target)) {
|
||||
return arr.includes(target);
|
||||
}
|
||||
return arr && arr.some((item) => {
|
||||
return vue.toRaw(lodashUnified.get(item, valueKey)) === lodashUnified.get(target, valueKey);
|
||||
});
|
||||
};
|
||||
const isEqual = (selected, target) => {
|
||||
if (!shared.isObject(target)) {
|
||||
return selected === target;
|
||||
} else {
|
||||
const {
|
||||
valueKey
|
||||
} = select.props;
|
||||
return lodashUnified.get(selected, valueKey) === lodashUnified.get(target, valueKey);
|
||||
}
|
||||
};
|
||||
const isItemSelected = (modelValue, target) => {
|
||||
if (select.props.multiple) {
|
||||
return contains(modelValue, getValue(target));
|
||||
}
|
||||
return isEqual(modelValue, getValue(target));
|
||||
};
|
||||
const isItemDisabled = (modelValue, selected) => {
|
||||
const {
|
||||
disabled,
|
||||
multiple,
|
||||
multipleLimit
|
||||
} = select.props;
|
||||
return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
|
||||
};
|
||||
const isItemHovering = (target) => props2.hoveringIndex === target;
|
||||
const scrollToItem = (index) => {
|
||||
const list = listRef.value;
|
||||
if (list) {
|
||||
list.scrollToItem(index);
|
||||
}
|
||||
};
|
||||
const resetScrollTop = () => {
|
||||
const list = listRef.value;
|
||||
if (list) {
|
||||
list.resetScrollTop();
|
||||
}
|
||||
};
|
||||
const exposed = {
|
||||
listRef,
|
||||
isSized,
|
||||
isItemDisabled,
|
||||
isItemHovering,
|
||||
isItemSelected,
|
||||
scrollToItem,
|
||||
resetScrollTop
|
||||
};
|
||||
expose(exposed);
|
||||
const Item = (itemProps) => {
|
||||
const {
|
||||
index,
|
||||
data,
|
||||
style
|
||||
} = itemProps;
|
||||
const sized = vue.unref(isSized);
|
||||
const {
|
||||
itemSize,
|
||||
estimatedSize
|
||||
} = vue.unref(listProps);
|
||||
const {
|
||||
modelValue
|
||||
} = select.props;
|
||||
const {
|
||||
onSelect,
|
||||
onHover
|
||||
} = select;
|
||||
const item = data[index];
|
||||
if (item.type === "Group") {
|
||||
return vue.createVNode(groupItem["default"], {
|
||||
"item": item,
|
||||
"style": style,
|
||||
"height": sized ? itemSize : estimatedSize
|
||||
}, null);
|
||||
}
|
||||
const isSelected = isItemSelected(modelValue, item);
|
||||
const isDisabled = isItemDisabled(modelValue, isSelected);
|
||||
const isHovering = isItemHovering(index);
|
||||
return vue.createVNode(optionItem["default"], vue.mergeProps(itemProps, {
|
||||
"selected": isSelected,
|
||||
"disabled": getDisabled(item) || isDisabled,
|
||||
"created": !!item.created,
|
||||
"hovering": isHovering,
|
||||
"item": item,
|
||||
"onSelect": onSelect,
|
||||
"onHover": onHover
|
||||
}), {
|
||||
default: (props3) => {
|
||||
var _a;
|
||||
return ((_a = slots.default) == null ? void 0 : _a.call(slots, props3)) || vue.createVNode("span", null, [getLabel(item)]);
|
||||
}
|
||||
});
|
||||
};
|
||||
const {
|
||||
onKeyboardNavigate,
|
||||
onKeyboardSelect
|
||||
} = select;
|
||||
const onForward = () => {
|
||||
onKeyboardNavigate("forward");
|
||||
};
|
||||
const onBackward = () => {
|
||||
onKeyboardNavigate("backward");
|
||||
};
|
||||
const onKeydown = (e) => {
|
||||
const code = event.getEventCode(e);
|
||||
const {
|
||||
tab,
|
||||
esc,
|
||||
down,
|
||||
up,
|
||||
enter,
|
||||
numpadEnter
|
||||
} = aria.EVENT_CODE;
|
||||
if ([esc, down, up, enter, numpadEnter].includes(code)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
switch (code) {
|
||||
case tab:
|
||||
case esc:
|
||||
break;
|
||||
case down:
|
||||
onForward();
|
||||
break;
|
||||
case up:
|
||||
onBackward();
|
||||
break;
|
||||
case enter:
|
||||
case numpadEnter:
|
||||
onKeyboardSelect();
|
||||
break;
|
||||
}
|
||||
};
|
||||
return () => {
|
||||
var _a, _b, _c, _d;
|
||||
const {
|
||||
data,
|
||||
width
|
||||
} = props2;
|
||||
const {
|
||||
height,
|
||||
multiple,
|
||||
scrollbarAlwaysOn
|
||||
} = select.props;
|
||||
const isScrollbarAlwaysOn = vue.computed(() => {
|
||||
return core.isIOS ? true : scrollbarAlwaysOn;
|
||||
});
|
||||
const List = vue.unref(isSized) ? fixedSizeList["default"] : dynamicSizeList["default"];
|
||||
return vue.createVNode("div", {
|
||||
"class": [ns.b("dropdown"), ns.is("multiple", multiple)],
|
||||
"style": {
|
||||
width: `${width}px`
|
||||
}
|
||||
}, [(_a = slots.header) == null ? void 0 : _a.call(slots), ((_b = slots.loading) == null ? void 0 : _b.call(slots)) || ((_c = slots.empty) == null ? void 0 : _c.call(slots)) || vue.createVNode(List, vue.mergeProps({
|
||||
"ref": listRef
|
||||
}, vue.unref(listProps), {
|
||||
"className": ns.be("dropdown", "list"),
|
||||
"scrollbarAlwaysOn": isScrollbarAlwaysOn.value,
|
||||
"data": data,
|
||||
"height": height,
|
||||
"width": width,
|
||||
"total": data.length,
|
||||
"innerElement": "ul",
|
||||
"innerProps": {
|
||||
id: props2.id,
|
||||
role: "listbox",
|
||||
"aria-label": props2.ariaLabel,
|
||||
"aria-orientation": "vertical"
|
||||
},
|
||||
"onKeydown": onKeydown
|
||||
}), {
|
||||
default: (props3) => vue.createVNode(Item, props3, null)
|
||||
}), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
exports["default"] = ElSelectMenu;
|
||||
//# sourceMappingURL=select-dropdown.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+436
@@ -0,0 +1,436 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var index$1 = require('../../tooltip/index.js');
|
||||
var index = require('../../tag/index.js');
|
||||
var index$2 = require('../../icon/index.js');
|
||||
var selectDropdown = require('./select-dropdown.js');
|
||||
var useSelect = require('./useSelect.js');
|
||||
var defaults = require('./defaults.js');
|
||||
var token = require('./token.js');
|
||||
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
||||
var index$3 = require('../../../directives/click-outside/index.js');
|
||||
var shared = require('@vue/shared');
|
||||
var index$4 = require('../../../hooks/use-calc-input-width/index.js');
|
||||
var index$5 = require('../../../hooks/use-id/index.js');
|
||||
var form = require('../../../constants/form.js');
|
||||
|
||||
const _sfc_main = vue.defineComponent({
|
||||
name: "ElSelectV2",
|
||||
components: {
|
||||
ElSelectMenu: selectDropdown["default"],
|
||||
ElTag: index.ElTag,
|
||||
ElTooltip: index$1.ElTooltip,
|
||||
ElIcon: index$2.ElIcon
|
||||
},
|
||||
directives: { ClickOutside: index$3["default"] },
|
||||
props: defaults.selectV2Props,
|
||||
emits: defaults.selectV2Emits,
|
||||
setup(props, { emit }) {
|
||||
const modelValue = vue.computed(() => {
|
||||
const { modelValue: rawModelValue, multiple } = props;
|
||||
const fallback = multiple ? [] : void 0;
|
||||
if (shared.isArray(rawModelValue)) {
|
||||
return multiple ? rawModelValue : fallback;
|
||||
}
|
||||
return multiple ? fallback : rawModelValue;
|
||||
});
|
||||
const API = useSelect["default"](vue.reactive({
|
||||
...vue.toRefs(props),
|
||||
modelValue
|
||||
}), emit);
|
||||
const { calculatorRef, inputStyle } = index$4.useCalcInputWidth();
|
||||
const contentId = index$5.useId();
|
||||
vue.provide(token.selectV2InjectionKey, {
|
||||
props: vue.reactive({
|
||||
...vue.toRefs(props),
|
||||
height: API.popupHeight,
|
||||
modelValue
|
||||
}),
|
||||
expanded: API.expanded,
|
||||
tooltipRef: API.tooltipRef,
|
||||
contentId,
|
||||
onSelect: API.onSelect,
|
||||
onHover: API.onHover,
|
||||
onKeyboardNavigate: API.onKeyboardNavigate,
|
||||
onKeyboardSelect: API.onKeyboardSelect
|
||||
});
|
||||
const selectedLabel = vue.computed(() => {
|
||||
if (!props.multiple) {
|
||||
return API.states.selectedLabel;
|
||||
}
|
||||
return API.states.cachedOptions.map((i) => API.getLabel(i));
|
||||
});
|
||||
return {
|
||||
...API,
|
||||
modelValue,
|
||||
selectedLabel,
|
||||
calculatorRef,
|
||||
inputStyle,
|
||||
contentId,
|
||||
BORDER_HORIZONTAL_WIDTH: form.BORDER_HORIZONTAL_WIDTH
|
||||
};
|
||||
}
|
||||
});
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
const _component_el_tag = vue.resolveComponent("el-tag");
|
||||
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
|
||||
const _component_el_icon = vue.resolveComponent("el-icon");
|
||||
const _component_el_select_menu = vue.resolveComponent("el-select-menu");
|
||||
const _directive_click_outside = vue.resolveDirective("click-outside");
|
||||
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
|
||||
ref: "selectRef",
|
||||
class: vue.normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
|
||||
onMouseenter: ($event) => _ctx.states.inputHovering = true,
|
||||
onMouseleave: ($event) => _ctx.states.inputHovering = false
|
||||
}, [
|
||||
vue.createVNode(_component_el_tooltip, {
|
||||
ref: "tooltipRef",
|
||||
visible: _ctx.dropdownMenuVisible,
|
||||
teleported: _ctx.teleported,
|
||||
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
|
||||
"popper-style": _ctx.popperStyle,
|
||||
"gpu-acceleration": false,
|
||||
"stop-popper-mouse-event": false,
|
||||
"popper-options": _ctx.popperOptions,
|
||||
"fallback-placements": _ctx.fallbackPlacements,
|
||||
effect: _ctx.effect,
|
||||
placement: _ctx.placement,
|
||||
pure: "",
|
||||
transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
|
||||
trigger: "click",
|
||||
persistent: _ctx.persistent,
|
||||
"append-to": _ctx.appendTo,
|
||||
"show-arrow": _ctx.showArrow,
|
||||
offset: _ctx.offset,
|
||||
onBeforeShow: _ctx.handleMenuEnter,
|
||||
onHide: ($event) => _ctx.states.isBeforeHide = false
|
||||
}, {
|
||||
default: vue.withCtx(() => {
|
||||
var _a, _b;
|
||||
return [
|
||||
vue.createElementVNode("div", {
|
||||
ref: "wrapperRef",
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsSelect.e("wrapper"),
|
||||
_ctx.nsSelect.is("focused", _ctx.isFocused),
|
||||
_ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
|
||||
_ctx.nsSelect.is("filterable", _ctx.filterable),
|
||||
_ctx.nsSelect.is("disabled", _ctx.selectDisabled)
|
||||
]),
|
||||
onClick: vue.withModifiers(_ctx.toggleMenu, ["prevent"])
|
||||
}, [
|
||||
_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", {
|
||||
key: 0,
|
||||
ref: "prefixRef",
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("prefix"))
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "prefix")
|
||||
], 2)) : vue.createCommentVNode("v-if", true),
|
||||
vue.createElementVNode("div", {
|
||||
ref: "selectionRef",
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsSelect.e("selection"),
|
||||
_ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.modelValue.length)
|
||||
])
|
||||
}, [
|
||||
_ctx.multiple ? vue.renderSlot(_ctx.$slots, "tag", {
|
||||
key: 0,
|
||||
data: _ctx.states.cachedOptions,
|
||||
deleteTag: _ctx.deleteTag,
|
||||
selectDisabled: _ctx.selectDisabled
|
||||
}, () => [
|
||||
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => {
|
||||
return vue.openBlock(), vue.createElementBlock("div", {
|
||||
key: _ctx.getValueKey(_ctx.getValue(item)),
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
|
||||
}, [
|
||||
vue.createVNode(_component_el_tag, {
|
||||
closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
|
||||
size: _ctx.collapseTagSize,
|
||||
type: _ctx.tagType,
|
||||
effect: _ctx.tagEffect,
|
||||
"disable-transitions": "",
|
||||
style: vue.normalizeStyle(_ctx.tagStyle),
|
||||
onClose: ($event) => _ctx.deleteTag($event, item)
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
vue.createElementVNode("span", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "label", {
|
||||
index: _ctx.getIndex(item),
|
||||
label: _ctx.getLabel(item),
|
||||
value: _ctx.getValue(item)
|
||||
}, () => [
|
||||
vue.createTextVNode(vue.toDisplayString(_ctx.getLabel(item)), 1)
|
||||
])
|
||||
], 2)
|
||||
]),
|
||||
_: 2
|
||||
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
|
||||
], 2);
|
||||
}), 128)),
|
||||
_ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
|
||||
key: 0,
|
||||
ref: "tagTooltipRef",
|
||||
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
|
||||
"fallback-placements": ["bottom", "top", "right", "left"],
|
||||
effect: _ctx.effect,
|
||||
placement: "bottom",
|
||||
"popper-class": _ctx.popperClass,
|
||||
"popper-style": _ctx.popperStyle,
|
||||
teleported: _ctx.teleported
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
ref: "collapseItemRef",
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
|
||||
}, [
|
||||
vue.createVNode(_component_el_tag, {
|
||||
closable: false,
|
||||
size: _ctx.collapseTagSize,
|
||||
type: _ctx.tagType,
|
||||
effect: _ctx.tagEffect,
|
||||
style: vue.normalizeStyle(_ctx.collapseTagStyle),
|
||||
"disable-transitions": ""
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
vue.createElementVNode("span", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
|
||||
}, " + " + vue.toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 3)
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["size", "type", "effect", "style"])
|
||||
], 2)
|
||||
]),
|
||||
content: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
ref: "tagMenuRef",
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("selection"))
|
||||
}, [
|
||||
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (selected) => {
|
||||
return vue.openBlock(), vue.createElementBlock("div", {
|
||||
key: _ctx.getValueKey(_ctx.getValue(selected)),
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("selected-item"))
|
||||
}, [
|
||||
vue.createVNode(_component_el_tag, {
|
||||
class: "in-tooltip",
|
||||
closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
|
||||
size: _ctx.collapseTagSize,
|
||||
type: _ctx.tagType,
|
||||
effect: _ctx.tagEffect,
|
||||
"disable-transitions": "",
|
||||
onClose: ($event) => _ctx.deleteTag($event, selected)
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
vue.createElementVNode("span", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "label", {
|
||||
index: _ctx.getIndex(selected),
|
||||
label: _ctx.getLabel(selected),
|
||||
value: _ctx.getValue(selected)
|
||||
}, () => [
|
||||
vue.createTextVNode(vue.toDisplayString(_ctx.getLabel(selected)), 1)
|
||||
])
|
||||
], 2)
|
||||
]),
|
||||
_: 2
|
||||
}, 1032, ["closable", "size", "type", "effect", "onClose"])
|
||||
], 2);
|
||||
}), 128))
|
||||
], 2)
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported"])) : vue.createCommentVNode("v-if", true)
|
||||
]) : vue.createCommentVNode("v-if", true),
|
||||
vue.createElementVNode("div", {
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsSelect.e("selected-item"),
|
||||
_ctx.nsSelect.e("input-wrapper"),
|
||||
_ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled)
|
||||
])
|
||||
}, [
|
||||
vue.withDirectives(vue.createElementVNode("input", {
|
||||
id: _ctx.inputId,
|
||||
ref: "inputRef",
|
||||
"onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
|
||||
style: vue.normalizeStyle(_ctx.inputStyle),
|
||||
autocomplete: _ctx.autocomplete,
|
||||
tabindex: _ctx.tabindex,
|
||||
"aria-autocomplete": "none",
|
||||
"aria-haspopup": "listbox",
|
||||
autocapitalize: "off",
|
||||
"aria-expanded": _ctx.expanded,
|
||||
"aria-label": _ctx.ariaLabel,
|
||||
class: vue.normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
|
||||
disabled: _ctx.selectDisabled,
|
||||
role: "combobox",
|
||||
"aria-controls": _ctx.contentId,
|
||||
"aria-activedescendant": _ctx.states.hoveringIndex >= 0 ? `${_ctx.contentId}-${_ctx.states.hoveringIndex}` : "",
|
||||
readonly: !_ctx.filterable,
|
||||
spellcheck: "false",
|
||||
type: "text",
|
||||
name: _ctx.name,
|
||||
onInput: _ctx.onInput,
|
||||
onCompositionstart: _ctx.handleCompositionStart,
|
||||
onCompositionupdate: _ctx.handleCompositionUpdate,
|
||||
onCompositionend: _ctx.handleCompositionEnd,
|
||||
onKeydown: [
|
||||
vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"]),
|
||||
vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"]),
|
||||
vue.withKeys(vue.withModifiers(_ctx.onKeyboardSelect, ["stop", "prevent"]), ["enter"]),
|
||||
vue.withKeys(vue.withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
|
||||
vue.withKeys(vue.withModifiers(_ctx.handleDel, ["stop"]), ["delete"])
|
||||
],
|
||||
onClick: vue.withModifiers(_ctx.toggleMenu, ["stop"])
|
||||
}, null, 46, ["id", "onUpdate:modelValue", "autocomplete", "tabindex", "aria-expanded", "aria-label", "disabled", "aria-controls", "aria-activedescendant", "readonly", "name", "onInput", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown", "onClick"]), [
|
||||
[vue.vModelText, _ctx.states.inputValue]
|
||||
]),
|
||||
_ctx.filterable ? (vue.openBlock(), vue.createElementBlock("span", {
|
||||
key: 0,
|
||||
ref: "calculatorRef",
|
||||
"aria-hidden": "true",
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("input-calculator")),
|
||||
textContent: vue.toDisplayString(_ctx.states.inputValue)
|
||||
}, null, 10, ["textContent"])) : vue.createCommentVNode("v-if", true)
|
||||
], 2),
|
||||
_ctx.shouldShowPlaceholder ? (vue.openBlock(), vue.createElementBlock("div", {
|
||||
key: 1,
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsSelect.e("selected-item"),
|
||||
_ctx.nsSelect.e("placeholder"),
|
||||
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
|
||||
])
|
||||
}, [
|
||||
_ctx.hasModelValue ? vue.renderSlot(_ctx.$slots, "label", {
|
||||
key: 0,
|
||||
index: (_b = (_a = _ctx.allOptionsValueMap.get(_ctx.modelValue)) == null ? void 0 : _a.index) != null ? _b : -1,
|
||||
label: _ctx.currentPlaceholder,
|
||||
value: _ctx.modelValue
|
||||
}, () => [
|
||||
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.currentPlaceholder), 1)
|
||||
]) : (vue.openBlock(), vue.createElementBlock("span", { key: 1 }, vue.toDisplayString(_ctx.currentPlaceholder), 1))
|
||||
], 2)) : vue.createCommentVNode("v-if", true)
|
||||
], 2),
|
||||
vue.createElementVNode("div", {
|
||||
ref: "suffixRef",
|
||||
class: vue.normalizeClass(_ctx.nsSelect.e("suffix"))
|
||||
}, [
|
||||
_ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, {
|
||||
key: 0,
|
||||
class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse])
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["class"])), [
|
||||
[vue.vShow, !_ctx.showClearBtn]
|
||||
]) : vue.createCommentVNode("v-if", true),
|
||||
_ctx.showClearBtn && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
|
||||
key: 1,
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsSelect.e("caret"),
|
||||
_ctx.nsInput.e("icon"),
|
||||
_ctx.nsSelect.e("clear")
|
||||
]),
|
||||
onClick: vue.withModifiers(_ctx.handleClear, ["prevent", "stop"])
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
|
||||
_ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
|
||||
key: 2,
|
||||
class: vue.normalizeClass([
|
||||
_ctx.nsInput.e("icon"),
|
||||
_ctx.nsInput.e("validateIcon"),
|
||||
_ctx.nsInput.is("loading", _ctx.validateState === "validating")
|
||||
])
|
||||
}, {
|
||||
default: vue.withCtx(() => [
|
||||
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon)))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
|
||||
], 2)
|
||||
], 10, ["onClick"])
|
||||
];
|
||||
}),
|
||||
content: vue.withCtx(() => [
|
||||
vue.createVNode(_component_el_select_menu, {
|
||||
id: _ctx.contentId,
|
||||
ref: "menuRef",
|
||||
data: _ctx.filteredOptions,
|
||||
width: _ctx.popperSize - _ctx.BORDER_HORIZONTAL_WIDTH,
|
||||
"hovering-index": _ctx.states.hoveringIndex,
|
||||
"scrollbar-always-on": _ctx.scrollbarAlwaysOn,
|
||||
"aria-label": _ctx.ariaLabel
|
||||
}, vue.createSlots({
|
||||
default: vue.withCtx((scope) => [
|
||||
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope)))
|
||||
]),
|
||||
_: 2
|
||||
}, [
|
||||
_ctx.$slots.header ? {
|
||||
name: "header",
|
||||
fn: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
|
||||
onClick: vue.withModifiers(() => {
|
||||
}, ["stop"])
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "header")
|
||||
], 10, ["onClick"])
|
||||
])
|
||||
} : void 0,
|
||||
_ctx.$slots.loading && _ctx.loading ? {
|
||||
name: "loading",
|
||||
fn: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "loading")
|
||||
], 2)
|
||||
])
|
||||
} : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
|
||||
name: "empty",
|
||||
fn: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
|
||||
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.emptyText), 1)
|
||||
])
|
||||
], 2)
|
||||
])
|
||||
} : void 0,
|
||||
_ctx.$slots.footer ? {
|
||||
name: "footer",
|
||||
fn: vue.withCtx(() => [
|
||||
vue.createElementVNode("div", {
|
||||
class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
|
||||
onClick: vue.withModifiers(() => {
|
||||
}, ["stop"])
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "footer")
|
||||
], 10, ["onClick"])
|
||||
])
|
||||
} : void 0
|
||||
]), 1032, ["id", "data", "width", "hovering-index", "scrollbar-always-on", "aria-label"])
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["visible", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "placement", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow", "onHide"])
|
||||
], 42, ["onMouseenter", "onMouseleave"])), [
|
||||
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
|
||||
]);
|
||||
}
|
||||
var Select = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "select.vue"]]);
|
||||
|
||||
exports["default"] = Select;
|
||||
//# sourceMappingURL=select.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
type OptionCommon = Record<string, any>;
|
||||
export type Option = OptionCommon & {
|
||||
created?: boolean;
|
||||
};
|
||||
export type OptionGroup = OptionCommon;
|
||||
export type OptionType = Option | OptionGroup;
|
||||
export type OptionItemProps = {
|
||||
item: any;
|
||||
index: number;
|
||||
disabled: boolean;
|
||||
};
|
||||
export type SelectStates = {
|
||||
inputValue: string;
|
||||
cachedOptions: Option[];
|
||||
createdOptions: Option[];
|
||||
hoveringIndex: number;
|
||||
inputHovering: boolean;
|
||||
selectionWidth: number;
|
||||
collapseItemWidth: number;
|
||||
previousQuery: string | null;
|
||||
previousValue: unknown;
|
||||
selectedLabel: string;
|
||||
menuVisibleOnFocus: boolean;
|
||||
isBeforeHide: boolean;
|
||||
};
|
||||
export {};
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
//# sourceMappingURL=select.types.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"select.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
||||
+624
@@ -0,0 +1,624 @@
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | ((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list"))[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | ((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
})[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: import("vue").PropType<import("./select.types").OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: import("vue").PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | ((new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => Partial<import("element-plus").Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./useProps").Props) | (() => import("./useProps").Props) | ((new (...args: any[]) => import("./useProps").Props) | (() => import("./useProps").Props))[], unknown, unknown, () => Required<import("./useProps").Props>, boolean>;
|
||||
readonly valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]) | ((new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]))[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: import("element-plus/es/utils").EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
}, {
|
||||
modelValue: import("vue").ComputedRef<any>;
|
||||
selectedLabel: import("vue").ComputedRef<string | string[]>;
|
||||
calculatorRef: import("vue").ShallowRef<HTMLElement | undefined>;
|
||||
inputStyle: import("vue").ComputedRef<{
|
||||
minWidth: string;
|
||||
}>;
|
||||
contentId: import("vue").Ref<string>;
|
||||
BORDER_HORIZONTAL_WIDTH: number;
|
||||
inputId: import("vue").Ref<string | undefined>;
|
||||
collapseTagSize: import("vue").ComputedRef<"default" | "small">;
|
||||
currentPlaceholder: import("vue").ComputedRef<string>;
|
||||
expanded: import("vue").Ref<boolean>;
|
||||
emptyText: import("vue").ComputedRef<string | null>;
|
||||
popupHeight: import("vue").ComputedRef<number>;
|
||||
debounce: import("vue").ComputedRef<number>;
|
||||
allOptions: import("vue").ComputedRef<import("./select.types").OptionType[]>;
|
||||
allOptionsValueMap: import("vue").ComputedRef<Map<any, any>>;
|
||||
filteredOptions: import("vue").Ref<({
|
||||
[x: string]: any;
|
||||
} | {
|
||||
[x: string]: any;
|
||||
created?: boolean | undefined;
|
||||
})[]>;
|
||||
iconComponent: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown> | undefined>;
|
||||
iconReverse: import("vue").ComputedRef<string | undefined>;
|
||||
tagStyle: import("vue").ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
collapseTagStyle: import("vue").ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
popperSize: import("vue").Ref<number>;
|
||||
dropdownMenuVisible: import("vue").WritableComputedRef<boolean>;
|
||||
hasModelValue: import("vue").ComputedRef<boolean>;
|
||||
shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
|
||||
selectDisabled: import("vue").ComputedRef<boolean>;
|
||||
selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
|
||||
needStatusIcon: import("vue").ComputedRef<boolean>;
|
||||
showClearBtn: import("vue").ComputedRef<boolean>;
|
||||
states: import("./select.types").SelectStates;
|
||||
isFocused: import("vue").Ref<boolean>;
|
||||
nsSelect: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
nsInput: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
inputRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
menuRef: import("vue").Ref<import("./select-dropdown").SelectDropdownInstance | undefined>;
|
||||
tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
tooltipRef: import("vue").Ref<import("element-plus/es/components/tooltip").TooltipInstance | undefined>;
|
||||
tagTooltipRef: import("vue").Ref<import("element-plus/es/components/tooltip").TooltipInstance | undefined>;
|
||||
selectRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
|
||||
selectionRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
prefixRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
suffixRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
|
||||
validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
|
||||
validateIcon: import("vue").ComputedRef<any>;
|
||||
showTagList: import("vue").ComputedRef<import("./select.types").Option[]>;
|
||||
collapseTagList: import("vue").ComputedRef<import("./select.types").Option[]>;
|
||||
debouncedOnInputChange: import("@vueuse/shared").PromisifyFn<() => void>;
|
||||
deleteTag: (event: MouseEvent, option: import("./select.types").Option) => void;
|
||||
getLabel: (option: import("./select.types").Option) => any;
|
||||
getValue: (option: import("./select.types").Option) => any;
|
||||
getDisabled: (option: import("./select.types").Option) => any;
|
||||
getValueKey: (item: unknown) => any;
|
||||
getIndex: (option: import("./select.types").Option) => any;
|
||||
handleClear: () => void;
|
||||
handleClickOutside: (event: Event) => void;
|
||||
handleDel: (e: KeyboardEvent) => void;
|
||||
handleEsc: () => void;
|
||||
focus: () => void;
|
||||
blur: () => void;
|
||||
handleMenuEnter: () => Promise<void>;
|
||||
handleResize: () => void;
|
||||
resetSelectionWidth: () => void;
|
||||
updateTooltip: () => void;
|
||||
updateTagTooltip: () => void;
|
||||
updateOptions: () => void;
|
||||
toggleMenu: (event?: Event) => void;
|
||||
scrollTo: (index: number) => void;
|
||||
onInput: (event: Event) => void;
|
||||
onKeyboardNavigate: (direction: "forward" | "backward", hoveringIndex?: number | undefined) => void;
|
||||
onKeyboardSelect: () => void;
|
||||
onSelect: (option: import("./select.types").Option) => void;
|
||||
onHover: (idx?: number) => void;
|
||||
handleCompositionStart: (event: CompositionEvent) => void;
|
||||
handleCompositionEnd: (event: CompositionEvent) => void;
|
||||
handleCompositionUpdate: (event: CompositionEvent) => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: import("./defaults").SelectV2Props["modelValue"]) => boolean;
|
||||
change: (val: import("./defaults").SelectV2Props["modelValue"]) => boolean;
|
||||
'remove-tag': (val: unknown) => boolean;
|
||||
'visible-change': (visible: boolean) => boolean;
|
||||
focus: (evt: FocusEvent) => boolean;
|
||||
blur: (evt: FocusEvent) => boolean;
|
||||
clear: () => boolean;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | ((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list"))[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | ((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
})[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: import("vue").PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: import("vue").PropType<import("./select.types").OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: import("vue").PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | ((new (...args: any[]) => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | (string | {
|
||||
[x: string]: boolean;
|
||||
} | any)[])[])[])[])[])[])[])[])[])[])[]))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => Partial<import("element-plus").Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./useProps").Props) | (() => import("./useProps").Props) | ((new (...args: any[]) => import("./useProps").Props) | (() => import("./useProps").Props))[], unknown, unknown, () => Required<import("./useProps").Props>, boolean>;
|
||||
readonly valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]) | ((new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]))[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: import("element-plus/es/utils").EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: {
|
||||
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
}>> & {
|
||||
"onUpdate:modelValue"?: ((val: any) => any) | undefined;
|
||||
onChange?: ((val: any) => any) | undefined;
|
||||
onFocus?: ((evt: FocusEvent) => any) | undefined;
|
||||
onBlur?: ((evt: FocusEvent) => any) | undefined;
|
||||
onClear?: (() => any) | undefined;
|
||||
"onVisible-change"?: ((visible: boolean) => any) | undefined;
|
||||
"onRemove-tag"?: ((val: unknown) => any) | undefined;
|
||||
}, {
|
||||
readonly disabled: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly tabindex: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
|
||||
readonly height: number;
|
||||
readonly offset: number;
|
||||
readonly multiple: boolean;
|
||||
readonly props: import("./useProps").Props;
|
||||
readonly loading: boolean;
|
||||
readonly modelValue: any;
|
||||
readonly placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "left" | "right" | "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown>;
|
||||
readonly effect: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown>;
|
||||
readonly valueOnClear: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown>;
|
||||
readonly autocomplete: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | ((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list"))[], unknown, unknown>;
|
||||
readonly validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly clearable: boolean;
|
||||
readonly fallbackPlacements: import("element-plus").Placement[];
|
||||
readonly popperOptions: Partial<import("element-plus").Options>;
|
||||
readonly teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly persistent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly valueKey: string;
|
||||
readonly debounce: number;
|
||||
readonly fitInputWidth: import("element-plus/es/utils").EpPropMergeType<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean>;
|
||||
readonly automaticDropdown: boolean;
|
||||
readonly filterable: boolean;
|
||||
readonly collapseTags: boolean;
|
||||
readonly maxCollapseTags: number;
|
||||
readonly collapseTagsTooltip: boolean;
|
||||
readonly tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>;
|
||||
readonly tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>;
|
||||
readonly scrollbarAlwaysOn: boolean;
|
||||
readonly estimatedOptionHeight: number;
|
||||
readonly itemHeight: number;
|
||||
readonly multipleLimit: number;
|
||||
readonly reserveKeyword: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly allowCreate: boolean;
|
||||
readonly defaultFirstOption: boolean;
|
||||
readonly remote: boolean;
|
||||
readonly remoteShowSuffix: boolean;
|
||||
}>;
|
||||
export default _default;
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import type { OptionV2Props, SelectV2Instance, SelectV2Props } from './defaults';
|
||||
import type { InjectionKey, Ref } from 'vue';
|
||||
import type { Option } from './select.types';
|
||||
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
|
||||
export interface SelectV2Context {
|
||||
props: SelectV2Props;
|
||||
expanded: Ref<boolean>;
|
||||
tooltipRef: Ref<TooltipInstance | undefined>;
|
||||
contentId: Ref<string>;
|
||||
onSelect: (option: Option) => void;
|
||||
onHover: (idx?: number) => void;
|
||||
onKeyboardNavigate: (direction: 'forward' | 'backward') => void;
|
||||
onKeyboardSelect: () => void;
|
||||
}
|
||||
export declare const selectV2InjectionKey: InjectionKey<SelectV2Context>;
|
||||
export type { SelectV2Instance, OptionV2Props, SelectV2Props };
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
const selectV2InjectionKey = Symbol("ElSelectV2Injection");
|
||||
|
||||
exports.selectV2InjectionKey = selectV2InjectionKey;
|
||||
//# sourceMappingURL=token.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"token.js","sources":["../../../../../../packages/components/select-v2/src/token.ts"],"sourcesContent":["import type { OptionV2Props, SelectV2Instance, SelectV2Props } from './defaults'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { Option } from './select.types'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\nexport interface SelectV2Context {\n props: SelectV2Props\n expanded: Ref<boolean>\n tooltipRef: Ref<TooltipInstance | undefined>\n contentId: Ref<string>\n onSelect: (option: Option) => void\n onHover: (idx?: number) => void\n onKeyboardNavigate: (direction: 'forward' | 'backward') => void\n onKeyboardSelect: () => void\n}\n\nexport const selectV2InjectionKey: InjectionKey<SelectV2Context> = Symbol(\n 'ElSelectV2Injection'\n)\nexport type { SelectV2Instance, OptionV2Props, SelectV2Props }\n"],"names":[],"mappings":";;;;AAAY,MAAC,oBAAoB,GAAG,MAAM,CAAC,qBAAqB;;;;"}
|
||||
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { SelectV2Props } from './token';
|
||||
import type { Option, SelectStates } from './select.types';
|
||||
export declare function useAllowCreate(props: SelectV2Props, states: SelectStates): {
|
||||
createNewOption: (query: string) => void;
|
||||
removeNewOption: (option: Option) => void;
|
||||
selectNewOption: (option: Option) => void;
|
||||
clearAllNewOption: () => void;
|
||||
};
|
||||
Generated
Vendored
+89
@@ -0,0 +1,89 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var useProps = require('./useProps.js');
|
||||
|
||||
function useAllowCreate(props, states) {
|
||||
const { aliasProps, getLabel, getValue } = useProps.useProps(props);
|
||||
const createOptionCount = vue.ref(0);
|
||||
const cachedSelectedOption = vue.ref();
|
||||
const enableAllowCreateMode = vue.computed(() => {
|
||||
return props.allowCreate && props.filterable;
|
||||
});
|
||||
vue.watch(() => props.options, (options) => {
|
||||
const optionLabelsSet = new Set(options.map((option) => getLabel(option)));
|
||||
states.createdOptions = states.createdOptions.filter((createdOption) => !optionLabelsSet.has(getLabel(createdOption)));
|
||||
});
|
||||
function hasExistingOption(query) {
|
||||
const hasOption = (option) => getLabel(option) === query;
|
||||
return props.options && props.options.some(hasOption) || states.createdOptions.some(hasOption);
|
||||
}
|
||||
function selectNewOption(option) {
|
||||
if (!enableAllowCreateMode.value) {
|
||||
return;
|
||||
}
|
||||
if (props.multiple && option.created) {
|
||||
createOptionCount.value++;
|
||||
} else {
|
||||
cachedSelectedOption.value = option;
|
||||
}
|
||||
}
|
||||
function createNewOption(query) {
|
||||
if (enableAllowCreateMode.value) {
|
||||
if (query && query.length > 0) {
|
||||
if (hasExistingOption(query)) {
|
||||
states.createdOptions = states.createdOptions.filter((createdOption) => getLabel(createdOption) !== states.previousQuery);
|
||||
return;
|
||||
}
|
||||
const newOption = {
|
||||
[aliasProps.value.value]: query,
|
||||
[aliasProps.value.label]: query,
|
||||
created: true,
|
||||
[aliasProps.value.disabled]: false
|
||||
};
|
||||
if (states.createdOptions.length >= createOptionCount.value) {
|
||||
states.createdOptions[createOptionCount.value] = newOption;
|
||||
} else {
|
||||
states.createdOptions.push(newOption);
|
||||
}
|
||||
} else {
|
||||
if (props.multiple) {
|
||||
states.createdOptions.length = createOptionCount.value;
|
||||
} else {
|
||||
const selectedOption = cachedSelectedOption.value;
|
||||
states.createdOptions.length = 0;
|
||||
if (selectedOption && selectedOption.created) {
|
||||
states.createdOptions.push(selectedOption);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function removeNewOption(option) {
|
||||
if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === getLabel(option)) {
|
||||
return;
|
||||
}
|
||||
const idx = states.createdOptions.findIndex((it) => getValue(it) === getValue(option));
|
||||
if (~idx) {
|
||||
states.createdOptions.splice(idx, 1);
|
||||
createOptionCount.value--;
|
||||
}
|
||||
}
|
||||
function clearAllNewOption() {
|
||||
if (enableAllowCreateMode.value) {
|
||||
states.createdOptions.length = 0;
|
||||
createOptionCount.value = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
createNewOption,
|
||||
removeNewOption,
|
||||
selectNewOption,
|
||||
clearAllNewOption
|
||||
};
|
||||
}
|
||||
|
||||
exports.useAllowCreate = useAllowCreate;
|
||||
//# sourceMappingURL=useAllowCreate.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import type { OptionV2EmitFn, OptionV2Props } from './defaults';
|
||||
export declare function useOption(props: OptionV2Props, { emit }: {
|
||||
emit: OptionV2EmitFn;
|
||||
}): {
|
||||
hoverItem: () => void;
|
||||
selectOptionClick: () => void;
|
||||
};
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
function useOption(props, { emit }) {
|
||||
return {
|
||||
hoverItem: () => {
|
||||
if (!props.disabled) {
|
||||
emit("hover", props.index);
|
||||
}
|
||||
},
|
||||
selectOptionClick: () => {
|
||||
if (!props.disabled) {
|
||||
emit("select", props.item, props.index);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
exports.useOption = useOption;
|
||||
//# sourceMappingURL=useOption.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useOption.js","sources":["../../../../../../packages/components/select-v2/src/useOption.ts"],"sourcesContent":["import type { OptionV2EmitFn, OptionV2Props } from './defaults'\n\nexport function useOption(\n props: OptionV2Props,\n { emit }: { emit: OptionV2EmitFn }\n) {\n return {\n hoverItem: () => {\n if (!props.disabled) {\n emit('hover', props.index)\n }\n },\n selectOptionClick: () => {\n if (!props.disabled) {\n emit('select', props.item, props.index)\n }\n },\n }\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;AAC3C,EAAE,OAAO;AACT,IAAI,SAAS,EAAE,MAAM;AACrB,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,OAAO;AACP,KAAK;AACL,IAAI,iBAAiB,EAAE,MAAM;AAC7B,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAChD,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import type { SelectV2Props } from './token';
|
||||
import type { Option } from './select.types';
|
||||
export interface Props {
|
||||
label?: string;
|
||||
value?: string;
|
||||
disabled?: string;
|
||||
options?: string;
|
||||
}
|
||||
export declare const defaultProps: Required<Props>;
|
||||
export declare function useProps(props: Pick<SelectV2Props, 'props'>): {
|
||||
aliasProps: import("vue").Ref<{
|
||||
label: string;
|
||||
value: string;
|
||||
disabled: string;
|
||||
options: string;
|
||||
}>;
|
||||
getLabel: (option: Option) => any;
|
||||
getValue: (option: Option) => any;
|
||||
getDisabled: (option: Option) => any;
|
||||
getOptions: (option: Option) => any;
|
||||
};
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var lodashUnified = require('lodash-unified');
|
||||
|
||||
const defaultProps = {
|
||||
label: "label",
|
||||
value: "value",
|
||||
disabled: "disabled",
|
||||
options: "options"
|
||||
};
|
||||
function useProps(props) {
|
||||
const aliasProps = vue.ref({ ...defaultProps, ...props.props });
|
||||
let cache = { ...props.props };
|
||||
vue.watch(() => props.props, (val) => {
|
||||
if (!lodashUnified.isEqual(val, cache)) {
|
||||
aliasProps.value = { ...defaultProps, ...val };
|
||||
cache = { ...val };
|
||||
}
|
||||
}, { deep: true });
|
||||
const getLabel = (option) => lodashUnified.get(option, aliasProps.value.label);
|
||||
const getValue = (option) => lodashUnified.get(option, aliasProps.value.value);
|
||||
const getDisabled = (option) => lodashUnified.get(option, aliasProps.value.disabled);
|
||||
const getOptions = (option) => lodashUnified.get(option, aliasProps.value.options);
|
||||
return {
|
||||
aliasProps,
|
||||
getLabel,
|
||||
getValue,
|
||||
getDisabled,
|
||||
getOptions
|
||||
};
|
||||
}
|
||||
|
||||
exports.defaultProps = defaultProps;
|
||||
exports.useProps = useProps;
|
||||
//# sourceMappingURL=useProps.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useProps.js","sources":["../../../../../../packages/components/select-v2/src/useProps.ts"],"sourcesContent":["import { ref, watch } from 'vue'\nimport { get, isEqual } from 'lodash-unified'\n\nimport type { SelectV2Props } from './token'\nimport type { Option } from './select.types'\n\nexport interface Props {\n label?: string\n value?: string\n disabled?: string\n options?: string\n}\n\nexport const defaultProps: Required<Props> = {\n label: 'label',\n value: 'value',\n disabled: 'disabled',\n options: 'options',\n}\n\nexport function useProps(props: Pick<SelectV2Props, 'props'>) {\n const aliasProps = ref({ ...defaultProps, ...props.props })\n let cache = { ...props.props }\n\n watch(\n () => props.props,\n (val) => {\n // The props is an object, and its properties may be modified without changing the reference. In this case, the watch values before and after are equal. Here, we compare using the cached previous value.\n if (!isEqual(val, cache)) {\n aliasProps.value = { ...defaultProps, ...val }\n cache = { ...val }\n }\n },\n { deep: true }\n )\n\n const getLabel = (option: Option) => get(option, aliasProps.value.label)\n const getValue = (option: Option) => get(option, aliasProps.value.value)\n const getDisabled = (option: Option) => get(option, aliasProps.value.disabled)\n const getOptions = (option: Option) => get(option, aliasProps.value.options)\n\n return {\n aliasProps,\n getLabel,\n getValue,\n getDisabled,\n getOptions,\n }\n}\n"],"names":["ref","watch","isEqual","get"],"mappings":";;;;;;;AAEY,MAAC,YAAY,GAAG;AAC5B,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,QAAQ,EAAE,UAAU;AACtB,EAAE,OAAO,EAAE,SAAS;AACpB,EAAE;AACK,SAAS,QAAQ,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM,UAAU,GAAGA,OAAG,CAAC,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC9D,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;AACjC,EAAEC,SAAK,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK;AACpC,IAAI,IAAI,CAACC,qBAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;AAC9B,MAAM,UAAU,CAAC,KAAK,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,EAAE,CAAC;AACrD,MAAM,KAAK,GAAG,EAAE,GAAG,GAAG,EAAE,CAAC;AACzB,KAAK;AACL,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACrB,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKC,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,WAAW,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzE,EAAE,MAAM,UAAU,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACvE,EAAE,OAAO;AACT,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,UAAU;AACd,GAAG,CAAC;AACJ;;;;;"}
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
import type { Option, OptionType, SelectStates } from './select.types';
|
||||
import type { SelectV2Props } from './token';
|
||||
import type { SelectV2EmitFn } from './defaults';
|
||||
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
|
||||
import type { SelectDropdownInstance } from './select-dropdown';
|
||||
declare const useSelect: (props: SelectV2Props, emit: SelectV2EmitFn) => {
|
||||
inputId: import("vue").Ref<string | undefined>;
|
||||
collapseTagSize: import("vue").ComputedRef<"default" | "small">;
|
||||
currentPlaceholder: import("vue").ComputedRef<string>;
|
||||
expanded: import("vue").Ref<boolean>;
|
||||
emptyText: import("vue").ComputedRef<string | null>;
|
||||
popupHeight: import("vue").ComputedRef<number>;
|
||||
debounce: import("vue").ComputedRef<number>;
|
||||
allOptions: import("vue").ComputedRef<OptionType[]>;
|
||||
allOptionsValueMap: import("vue").ComputedRef<Map<any, any>>;
|
||||
filteredOptions: import("vue").Ref<({
|
||||
[x: string]: any;
|
||||
} | {
|
||||
[x: string]: any;
|
||||
created?: boolean | undefined;
|
||||
})[]>;
|
||||
iconComponent: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown> | undefined>;
|
||||
iconReverse: import("vue").ComputedRef<string | undefined>;
|
||||
tagStyle: import("vue").ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
collapseTagStyle: import("vue").ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
popperSize: import("vue").Ref<number>;
|
||||
dropdownMenuVisible: import("vue").WritableComputedRef<boolean>;
|
||||
hasModelValue: import("vue").ComputedRef<boolean>;
|
||||
shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
|
||||
selectDisabled: import("vue").ComputedRef<boolean>;
|
||||
selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
|
||||
needStatusIcon: import("vue").ComputedRef<boolean>;
|
||||
showClearBtn: import("vue").ComputedRef<boolean>;
|
||||
states: SelectStates;
|
||||
isFocused: import("vue").Ref<boolean>;
|
||||
nsSelect: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
nsInput: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
inputRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
menuRef: import("vue").Ref<SelectDropdownInstance | undefined>;
|
||||
tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
tooltipRef: import("vue").Ref<TooltipInstance | undefined>;
|
||||
tagTooltipRef: import("vue").Ref<TooltipInstance | undefined>;
|
||||
selectRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
|
||||
selectionRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
prefixRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
suffixRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
|
||||
popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
|
||||
validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
|
||||
validateIcon: import("vue").ComputedRef<any>;
|
||||
showTagList: import("vue").ComputedRef<Option[]>;
|
||||
collapseTagList: import("vue").ComputedRef<Option[]>;
|
||||
debouncedOnInputChange: import("@vueuse/shared").PromisifyFn<() => void>;
|
||||
deleteTag: (event: MouseEvent, option: Option) => void;
|
||||
getLabel: (option: Option) => any;
|
||||
getValue: (option: Option) => any;
|
||||
getDisabled: (option: Option) => any;
|
||||
getValueKey: (item: unknown) => any;
|
||||
getIndex: (option: Option) => any;
|
||||
handleClear: () => void;
|
||||
handleClickOutside: (event: Event) => void;
|
||||
handleDel: (e: KeyboardEvent) => void;
|
||||
handleEsc: () => void;
|
||||
focus: () => void;
|
||||
blur: () => void;
|
||||
handleMenuEnter: () => Promise<void>;
|
||||
handleResize: () => void;
|
||||
resetSelectionWidth: () => void;
|
||||
updateTooltip: () => void;
|
||||
updateTagTooltip: () => void;
|
||||
updateOptions: () => void;
|
||||
toggleMenu: (event?: Event) => void;
|
||||
scrollTo: (index: number) => void;
|
||||
onInput: (event: Event) => void;
|
||||
onKeyboardNavigate: (direction: "forward" | "backward", hoveringIndex?: number | undefined) => void;
|
||||
onKeyboardSelect: () => void;
|
||||
onSelect: (option: Option) => void;
|
||||
onHover: (idx?: number) => void;
|
||||
handleCompositionStart: (event: CompositionEvent) => void;
|
||||
handleCompositionEnd: (event: CompositionEvent) => void;
|
||||
handleCompositionUpdate: (event: CompositionEvent) => void;
|
||||
};
|
||||
export default useSelect;
|
||||
+796
@@ -0,0 +1,796 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var lodashUnified = require('lodash-unified');
|
||||
var core = require('@vueuse/core');
|
||||
var useAllowCreate = require('./useAllowCreate.js');
|
||||
var useProps = require('./useProps.js');
|
||||
var index = require('../../../hooks/use-locale/index.js');
|
||||
var index$1 = require('../../../hooks/use-namespace/index.js');
|
||||
var useFormItem = require('../../form/src/hooks/use-form-item.js');
|
||||
var index$2 = require('../../../hooks/use-empty-values/index.js');
|
||||
var index$3 = require('../../../hooks/use-composition/index.js');
|
||||
var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
|
||||
var index$4 = require('../../../hooks/use-focus-controller/index.js');
|
||||
var error = require('../../../utils/error.js');
|
||||
var shared = require('@vue/shared');
|
||||
var icon = require('../../../utils/vue/icon.js');
|
||||
var strings = require('../../../utils/strings.js');
|
||||
var form = require('../../../constants/form.js');
|
||||
var types = require('../../../utils/types.js');
|
||||
var event = require('../../../utils/dom/event.js');
|
||||
var aria = require('../../../constants/aria.js');
|
||||
var event$1 = require('../../../constants/event.js');
|
||||
|
||||
const useSelect = (props, emit) => {
|
||||
const { t } = index.useLocale();
|
||||
const nsSelect = index$1.useNamespace("select");
|
||||
const nsInput = index$1.useNamespace("input");
|
||||
const { form: elForm, formItem: elFormItem } = useFormItem.useFormItem();
|
||||
const { inputId } = useFormItem.useFormItemInputId(props, {
|
||||
formItemContext: elFormItem
|
||||
});
|
||||
const { aliasProps, getLabel, getValue, getDisabled, getOptions } = useProps.useProps(props);
|
||||
const { valueOnClear, isEmptyValue } = index$2.useEmptyValues(props);
|
||||
const states = vue.reactive({
|
||||
inputValue: "",
|
||||
cachedOptions: [],
|
||||
createdOptions: [],
|
||||
hoveringIndex: -1,
|
||||
inputHovering: false,
|
||||
selectionWidth: 0,
|
||||
collapseItemWidth: 0,
|
||||
previousQuery: null,
|
||||
previousValue: void 0,
|
||||
selectedLabel: "",
|
||||
menuVisibleOnFocus: false,
|
||||
isBeforeHide: false
|
||||
});
|
||||
const popperSize = vue.ref(-1);
|
||||
const debouncing = vue.ref(false);
|
||||
const selectRef = vue.ref();
|
||||
const selectionRef = vue.ref();
|
||||
const tooltipRef = vue.ref();
|
||||
const tagTooltipRef = vue.ref();
|
||||
const inputRef = vue.ref();
|
||||
const prefixRef = vue.ref();
|
||||
const suffixRef = vue.ref();
|
||||
const menuRef = vue.ref();
|
||||
const tagMenuRef = vue.ref();
|
||||
const collapseItemRef = vue.ref();
|
||||
const {
|
||||
isComposing,
|
||||
handleCompositionStart,
|
||||
handleCompositionEnd,
|
||||
handleCompositionUpdate
|
||||
} = index$3.useComposition({
|
||||
afterComposition: (e) => onInput(e)
|
||||
});
|
||||
const selectDisabled = useFormCommonProps.useFormDisabled();
|
||||
const { wrapperRef, isFocused, handleBlur } = index$4.useFocusController(inputRef, {
|
||||
disabled: selectDisabled,
|
||||
afterFocus() {
|
||||
if (props.automaticDropdown && !expanded.value) {
|
||||
expanded.value = true;
|
||||
states.menuVisibleOnFocus = true;
|
||||
}
|
||||
},
|
||||
beforeBlur(event) {
|
||||
var _a, _b;
|
||||
return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
|
||||
},
|
||||
afterBlur() {
|
||||
var _a;
|
||||
expanded.value = false;
|
||||
states.menuVisibleOnFocus = false;
|
||||
if (props.validateEvent) {
|
||||
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => error.debugWarn(err));
|
||||
}
|
||||
}
|
||||
});
|
||||
const allOptions = vue.computed(() => filterOptions(""));
|
||||
const hasOptions = vue.computed(() => {
|
||||
if (props.loading)
|
||||
return false;
|
||||
return props.options.length > 0 || states.createdOptions.length > 0;
|
||||
});
|
||||
const filteredOptions = vue.ref([]);
|
||||
const expanded = vue.ref(false);
|
||||
const needStatusIcon = vue.computed(() => {
|
||||
var _a;
|
||||
return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
|
||||
});
|
||||
const popupHeight = vue.computed(() => {
|
||||
const totalHeight = filteredOptions.value.length * props.itemHeight;
|
||||
return totalHeight > props.height ? props.height : totalHeight;
|
||||
});
|
||||
const hasModelValue = vue.computed(() => {
|
||||
return props.multiple ? shared.isArray(props.modelValue) && props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
|
||||
});
|
||||
const showClearBtn = vue.computed(() => {
|
||||
return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
|
||||
});
|
||||
const iconComponent = vue.computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
|
||||
const iconReverse = vue.computed(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
|
||||
const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
|
||||
const validateIcon = vue.computed(() => {
|
||||
if (!validateState.value)
|
||||
return;
|
||||
return icon.ValidateComponentsMap[validateState.value];
|
||||
});
|
||||
const debounce = vue.computed(() => props.remote ? props.debounce : 0);
|
||||
const isRemoteSearchEmpty = vue.computed(() => props.remote && !states.inputValue && !hasOptions.value);
|
||||
const emptyText = vue.computed(() => {
|
||||
if (props.loading) {
|
||||
return props.loadingText || t("el.select.loading");
|
||||
} else {
|
||||
if (props.filterable && states.inputValue && hasOptions.value && filteredOptions.value.length === 0) {
|
||||
return props.noMatchText || t("el.select.noMatch");
|
||||
}
|
||||
if (!hasOptions.value) {
|
||||
return props.noDataText || t("el.select.noData");
|
||||
}
|
||||
}
|
||||
return null;
|
||||
});
|
||||
const isFilterMethodValid = vue.computed(() => props.filterable && shared.isFunction(props.filterMethod));
|
||||
const isRemoteMethodValid = vue.computed(() => props.filterable && props.remote && shared.isFunction(props.remoteMethod));
|
||||
const filterOptions = (query) => {
|
||||
const regexp = new RegExp(strings.escapeStringRegexp(query), "i");
|
||||
const isValidOption = (o) => {
|
||||
if (isFilterMethodValid.value || isRemoteMethodValid.value)
|
||||
return true;
|
||||
return query ? regexp.test(getLabel(o) || "") : true;
|
||||
};
|
||||
if (props.loading) {
|
||||
return [];
|
||||
}
|
||||
return [...states.createdOptions, ...props.options].reduce((all, item) => {
|
||||
const options = getOptions(item);
|
||||
if (shared.isArray(options)) {
|
||||
const filtered = options.filter(isValidOption);
|
||||
if (filtered.length > 0) {
|
||||
all.push({
|
||||
label: getLabel(item),
|
||||
type: "Group"
|
||||
}, ...filtered);
|
||||
}
|
||||
} else if (props.remote || isValidOption(item)) {
|
||||
all.push(item);
|
||||
}
|
||||
return all;
|
||||
}, []);
|
||||
};
|
||||
const updateOptions = () => {
|
||||
filteredOptions.value = filterOptions(states.inputValue);
|
||||
};
|
||||
const allOptionsValueMap = vue.computed(() => {
|
||||
const valueMap = /* @__PURE__ */ new Map();
|
||||
allOptions.value.forEach((option, index) => {
|
||||
valueMap.set(getValueKey(getValue(option)), { option, index });
|
||||
});
|
||||
return valueMap;
|
||||
});
|
||||
const filteredOptionsValueMap = vue.computed(() => {
|
||||
const valueMap = /* @__PURE__ */ new Map();
|
||||
filteredOptions.value.forEach((option, index) => {
|
||||
valueMap.set(getValueKey(getValue(option)), { option, index });
|
||||
});
|
||||
return valueMap;
|
||||
});
|
||||
const optionsAllDisabled = vue.computed(() => filteredOptions.value.every((option) => getDisabled(option)));
|
||||
const selectSize = useFormCommonProps.useFormSize();
|
||||
const collapseTagSize = vue.computed(() => selectSize.value === "small" ? "small" : "default");
|
||||
const calculatePopperSize = () => {
|
||||
var _a;
|
||||
if (types.isNumber(props.fitInputWidth)) {
|
||||
popperSize.value = props.fitInputWidth;
|
||||
return;
|
||||
}
|
||||
const width = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
|
||||
if (!props.fitInputWidth && hasOptions.value) {
|
||||
vue.nextTick(() => {
|
||||
popperSize.value = Math.max(width, calculateLabelMaxWidth());
|
||||
});
|
||||
} else {
|
||||
popperSize.value = width;
|
||||
}
|
||||
};
|
||||
const calculateLabelMaxWidth = () => {
|
||||
var _a, _b;
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const selector = nsSelect.be("dropdown", "item");
|
||||
const dom = ((_b = (_a = menuRef.value) == null ? void 0 : _a.listRef) == null ? void 0 : _b.innerRef) || document;
|
||||
const dropdownItemEl = dom.querySelector(`.${selector}`);
|
||||
if (dropdownItemEl === null || ctx === null)
|
||||
return 0;
|
||||
const style = getComputedStyle(dropdownItemEl);
|
||||
const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight);
|
||||
ctx.font = `bold ${style.font.replace(new RegExp(`\\b${style.fontWeight}\\b`), "")}`;
|
||||
const maxWidth = filteredOptions.value.reduce((max, option) => {
|
||||
const metrics = ctx.measureText(getLabel(option));
|
||||
return Math.max(metrics.width, max);
|
||||
}, 0);
|
||||
return maxWidth + padding;
|
||||
};
|
||||
const getGapWidth = () => {
|
||||
if (!selectionRef.value)
|
||||
return 0;
|
||||
const style = window.getComputedStyle(selectionRef.value);
|
||||
return Number.parseFloat(style.gap || "6px");
|
||||
};
|
||||
const tagStyle = vue.computed(() => {
|
||||
const gapWidth = getGapWidth();
|
||||
const inputSlotWidth = props.filterable ? gapWidth + form.MINIMUM_INPUT_WIDTH : 0;
|
||||
const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth;
|
||||
return { maxWidth: `${maxWidth}px` };
|
||||
});
|
||||
const collapseTagStyle = vue.computed(() => {
|
||||
return { maxWidth: `${states.selectionWidth}px` };
|
||||
});
|
||||
const shouldShowPlaceholder = vue.computed(() => {
|
||||
if (shared.isArray(props.modelValue)) {
|
||||
return props.modelValue.length === 0 && !states.inputValue;
|
||||
}
|
||||
return props.filterable ? !states.inputValue : true;
|
||||
});
|
||||
const currentPlaceholder = vue.computed(() => {
|
||||
var _a;
|
||||
const _placeholder = (_a = props.placeholder) != null ? _a : t("el.select.placeholder");
|
||||
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
|
||||
});
|
||||
const popperRef = vue.computed(() => {
|
||||
var _a, _b;
|
||||
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
||||
});
|
||||
const indexRef = vue.computed(() => {
|
||||
if (props.multiple) {
|
||||
const len = props.modelValue.length;
|
||||
if (len > 0 && filteredOptionsValueMap.value.has(props.modelValue[len - 1])) {
|
||||
const { index } = filteredOptionsValueMap.value.get(props.modelValue[len - 1]);
|
||||
return index;
|
||||
}
|
||||
} else {
|
||||
if (!isEmptyValue(props.modelValue) && filteredOptionsValueMap.value.has(props.modelValue)) {
|
||||
const { index } = filteredOptionsValueMap.value.get(props.modelValue);
|
||||
return index;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
});
|
||||
const dropdownMenuVisible = vue.computed({
|
||||
get() {
|
||||
return expanded.value && (props.loading || !isRemoteSearchEmpty.value) && (!debouncing.value || !types.isEmpty(states.previousQuery));
|
||||
},
|
||||
set(val) {
|
||||
expanded.value = val;
|
||||
}
|
||||
});
|
||||
const showTagList = vue.computed(() => {
|
||||
if (!props.multiple) {
|
||||
return [];
|
||||
}
|
||||
return props.collapseTags ? states.cachedOptions.slice(0, props.maxCollapseTags) : states.cachedOptions;
|
||||
});
|
||||
const collapseTagList = vue.computed(() => {
|
||||
if (!props.multiple) {
|
||||
return [];
|
||||
}
|
||||
return props.collapseTags ? states.cachedOptions.slice(props.maxCollapseTags) : [];
|
||||
});
|
||||
const {
|
||||
createNewOption,
|
||||
removeNewOption,
|
||||
selectNewOption,
|
||||
clearAllNewOption
|
||||
} = useAllowCreate.useAllowCreate(props, states);
|
||||
const toggleMenu = (event) => {
|
||||
var _a;
|
||||
if (selectDisabled.value || props.filterable && expanded.value && event && !((_a = suffixRef.value) == null ? void 0 : _a.contains(event.target)))
|
||||
return;
|
||||
if (states.menuVisibleOnFocus) {
|
||||
states.menuVisibleOnFocus = false;
|
||||
} else {
|
||||
expanded.value = !expanded.value;
|
||||
}
|
||||
};
|
||||
const onInputChange = () => {
|
||||
if (states.inputValue.length > 0 && !expanded.value) {
|
||||
expanded.value = true;
|
||||
}
|
||||
createNewOption(states.inputValue);
|
||||
vue.nextTick(() => {
|
||||
handleQueryChange(states.inputValue);
|
||||
});
|
||||
};
|
||||
const debouncedOnInputChange = core.useDebounceFn(() => {
|
||||
onInputChange();
|
||||
debouncing.value = false;
|
||||
}, debounce);
|
||||
const handleQueryChange = (val) => {
|
||||
if (states.previousQuery === val || isComposing.value) {
|
||||
return;
|
||||
}
|
||||
states.previousQuery = val;
|
||||
if (props.filterable && shared.isFunction(props.filterMethod)) {
|
||||
props.filterMethod(val);
|
||||
} else if (props.filterable && props.remote && shared.isFunction(props.remoteMethod)) {
|
||||
props.remoteMethod(val);
|
||||
}
|
||||
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptions.value.length) {
|
||||
vue.nextTick(checkDefaultFirstOption);
|
||||
} else {
|
||||
vue.nextTick(updateHoveringIndex);
|
||||
}
|
||||
};
|
||||
const checkDefaultFirstOption = () => {
|
||||
const optionsInDropdown = filteredOptions.value.filter((n) => !n.disabled && n.type !== "Group");
|
||||
const userCreatedOption = optionsInDropdown.find((n) => n.created);
|
||||
const firstOriginOption = optionsInDropdown[0];
|
||||
states.hoveringIndex = getValueIndex(filteredOptions.value, userCreatedOption || firstOriginOption);
|
||||
};
|
||||
const emitChange = (val) => {
|
||||
if (!lodashUnified.isEqual(props.modelValue, val)) {
|
||||
emit(event$1.CHANGE_EVENT, val);
|
||||
}
|
||||
};
|
||||
const update = (val) => {
|
||||
emit(event$1.UPDATE_MODEL_EVENT, val);
|
||||
emitChange(val);
|
||||
states.previousValue = props.multiple ? String(val) : val;
|
||||
vue.nextTick(() => {
|
||||
if (props.multiple && shared.isArray(props.modelValue)) {
|
||||
const cachedOptions = states.cachedOptions.slice();
|
||||
const selectedOptions = props.modelValue.map((value) => getOption(value, cachedOptions));
|
||||
if (!lodashUnified.isEqual(states.cachedOptions, selectedOptions)) {
|
||||
states.cachedOptions = selectedOptions;
|
||||
}
|
||||
} else {
|
||||
initStates(true);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getValueIndex = (arr = [], value) => {
|
||||
if (!shared.isObject(value)) {
|
||||
return arr.indexOf(value);
|
||||
}
|
||||
const valueKey = props.valueKey;
|
||||
let index = -1;
|
||||
arr.some((item, i) => {
|
||||
if (lodashUnified.get(item, valueKey) === lodashUnified.get(value, valueKey)) {
|
||||
index = i;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return index;
|
||||
};
|
||||
const getValueKey = (item) => {
|
||||
return shared.isObject(item) ? lodashUnified.get(item, props.valueKey) : item;
|
||||
};
|
||||
const handleResize = () => {
|
||||
calculatePopperSize();
|
||||
};
|
||||
const resetSelectionWidth = () => {
|
||||
states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
|
||||
};
|
||||
const resetCollapseItemWidth = () => {
|
||||
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
|
||||
};
|
||||
const updateTooltip = () => {
|
||||
var _a, _b;
|
||||
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
||||
};
|
||||
const updateTagTooltip = () => {
|
||||
var _a, _b;
|
||||
(_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
||||
};
|
||||
const onSelect = (option) => {
|
||||
const optionValue = getValue(option);
|
||||
if (props.multiple) {
|
||||
let selectedOptions = props.modelValue.slice();
|
||||
const index = getValueIndex(selectedOptions, optionValue);
|
||||
if (index > -1) {
|
||||
selectedOptions = [
|
||||
...selectedOptions.slice(0, index),
|
||||
...selectedOptions.slice(index + 1)
|
||||
];
|
||||
states.cachedOptions.splice(index, 1);
|
||||
removeNewOption(option);
|
||||
} else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) {
|
||||
selectedOptions = [...selectedOptions, optionValue];
|
||||
states.cachedOptions.push(option);
|
||||
selectNewOption(option);
|
||||
}
|
||||
update(selectedOptions);
|
||||
if (option.created) {
|
||||
handleQueryChange("");
|
||||
}
|
||||
if (props.filterable && !props.reserveKeyword) {
|
||||
states.inputValue = "";
|
||||
}
|
||||
} else {
|
||||
states.selectedLabel = getLabel(option);
|
||||
!lodashUnified.isEqual(props.modelValue, optionValue) && update(optionValue);
|
||||
expanded.value = false;
|
||||
selectNewOption(option);
|
||||
if (!option.created) {
|
||||
clearAllNewOption();
|
||||
}
|
||||
}
|
||||
focus();
|
||||
};
|
||||
const deleteTag = (event, option) => {
|
||||
let selectedOptions = props.modelValue.slice();
|
||||
const index = getValueIndex(selectedOptions, getValue(option));
|
||||
if (index > -1 && !selectDisabled.value) {
|
||||
selectedOptions = [
|
||||
...props.modelValue.slice(0, index),
|
||||
...props.modelValue.slice(index + 1)
|
||||
];
|
||||
states.cachedOptions.splice(index, 1);
|
||||
update(selectedOptions);
|
||||
emit("remove-tag", getValue(option));
|
||||
removeNewOption(option);
|
||||
}
|
||||
event.stopPropagation();
|
||||
focus();
|
||||
};
|
||||
const focus = () => {
|
||||
var _a;
|
||||
(_a = inputRef.value) == null ? void 0 : _a.focus();
|
||||
};
|
||||
const blur = () => {
|
||||
var _a;
|
||||
if (expanded.value) {
|
||||
expanded.value = false;
|
||||
vue.nextTick(() => {
|
||||
var _a2;
|
||||
return (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
|
||||
});
|
||||
return;
|
||||
}
|
||||
(_a = inputRef.value) == null ? void 0 : _a.blur();
|
||||
};
|
||||
const handleEsc = () => {
|
||||
if (states.inputValue.length > 0) {
|
||||
states.inputValue = "";
|
||||
} else {
|
||||
expanded.value = false;
|
||||
}
|
||||
};
|
||||
const getLastNotDisabledIndex = (value) => lodashUnified.findLastIndex(value, (it) => !states.cachedOptions.some((option) => getValue(option) === it && getDisabled(option)));
|
||||
const handleDel = (e) => {
|
||||
const code = event.getEventCode(e);
|
||||
if (!props.multiple)
|
||||
return;
|
||||
if (code === aria.EVENT_CODE.delete)
|
||||
return;
|
||||
if (states.inputValue.length === 0) {
|
||||
e.preventDefault();
|
||||
const selected = props.modelValue.slice();
|
||||
const lastNotDisabledIndex = getLastNotDisabledIndex(selected);
|
||||
if (lastNotDisabledIndex < 0)
|
||||
return;
|
||||
const removeTagValue = selected[lastNotDisabledIndex];
|
||||
selected.splice(lastNotDisabledIndex, 1);
|
||||
const option = states.cachedOptions[lastNotDisabledIndex];
|
||||
states.cachedOptions.splice(lastNotDisabledIndex, 1);
|
||||
removeNewOption(option);
|
||||
update(selected);
|
||||
emit("remove-tag", removeTagValue);
|
||||
}
|
||||
};
|
||||
const handleClear = () => {
|
||||
let emptyValue;
|
||||
if (shared.isArray(props.modelValue)) {
|
||||
emptyValue = [];
|
||||
} else {
|
||||
emptyValue = valueOnClear.value;
|
||||
}
|
||||
states.selectedLabel = "";
|
||||
expanded.value = false;
|
||||
update(emptyValue);
|
||||
emit("clear");
|
||||
clearAllNewOption();
|
||||
focus();
|
||||
};
|
||||
const onKeyboardNavigate = (direction, hoveringIndex = void 0) => {
|
||||
const options = filteredOptions.value;
|
||||
if (!["forward", "backward"].includes(direction) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value || isComposing.value) {
|
||||
return;
|
||||
}
|
||||
if (!expanded.value) {
|
||||
return toggleMenu();
|
||||
}
|
||||
if (types.isUndefined(hoveringIndex)) {
|
||||
hoveringIndex = states.hoveringIndex;
|
||||
}
|
||||
let newIndex = -1;
|
||||
if (direction === "forward") {
|
||||
newIndex = hoveringIndex + 1;
|
||||
if (newIndex >= options.length) {
|
||||
newIndex = 0;
|
||||
}
|
||||
} else if (direction === "backward") {
|
||||
newIndex = hoveringIndex - 1;
|
||||
if (newIndex < 0 || newIndex >= options.length) {
|
||||
newIndex = options.length - 1;
|
||||
}
|
||||
}
|
||||
const option = options[newIndex];
|
||||
if (getDisabled(option) || option.type === "Group") {
|
||||
return onKeyboardNavigate(direction, newIndex);
|
||||
} else {
|
||||
states.hoveringIndex = newIndex;
|
||||
scrollToItem(newIndex);
|
||||
}
|
||||
};
|
||||
const onKeyboardSelect = () => {
|
||||
if (!expanded.value) {
|
||||
return toggleMenu();
|
||||
} else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) {
|
||||
onSelect(filteredOptions.value[states.hoveringIndex]);
|
||||
}
|
||||
};
|
||||
const onHoverOption = (idx) => {
|
||||
states.hoveringIndex = idx != null ? idx : -1;
|
||||
};
|
||||
const updateHoveringIndex = () => {
|
||||
if (!props.multiple) {
|
||||
states.hoveringIndex = filteredOptions.value.findIndex((item) => {
|
||||
return getValueKey(getValue(item)) === getValueKey(props.modelValue);
|
||||
});
|
||||
} else {
|
||||
const length = props.modelValue.length;
|
||||
if (length > 0) {
|
||||
const lastValue = props.modelValue[length - 1];
|
||||
states.hoveringIndex = filteredOptions.value.findIndex((item) => getValueKey(lastValue) === getValueKey(getValue(item)));
|
||||
} else {
|
||||
states.hoveringIndex = -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
const onInput = (event) => {
|
||||
states.inputValue = event.target.value;
|
||||
if (props.remote) {
|
||||
debouncing.value = true;
|
||||
debouncedOnInputChange();
|
||||
} else {
|
||||
return onInputChange();
|
||||
}
|
||||
};
|
||||
const handleClickOutside = (event) => {
|
||||
expanded.value = false;
|
||||
if (isFocused.value) {
|
||||
const _event = new FocusEvent("blur", event);
|
||||
handleBlur(_event);
|
||||
}
|
||||
};
|
||||
const handleMenuEnter = () => {
|
||||
states.isBeforeHide = false;
|
||||
return vue.nextTick(() => {
|
||||
if (~indexRef.value) {
|
||||
scrollToItem(indexRef.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
const scrollToItem = (index) => {
|
||||
menuRef.value.scrollToItem(index);
|
||||
};
|
||||
const getOption = (value, cachedOptions) => {
|
||||
const selectValue = getValueKey(value);
|
||||
if (allOptionsValueMap.value.has(selectValue)) {
|
||||
const { option } = allOptionsValueMap.value.get(selectValue);
|
||||
return option;
|
||||
}
|
||||
if (cachedOptions && cachedOptions.length) {
|
||||
const option = cachedOptions.find((option2) => getValueKey(getValue(option2)) === selectValue);
|
||||
if (option) {
|
||||
return option;
|
||||
}
|
||||
}
|
||||
return {
|
||||
[aliasProps.value.value]: value,
|
||||
[aliasProps.value.label]: value
|
||||
};
|
||||
};
|
||||
const getIndex = (option) => {
|
||||
var _a, _b;
|
||||
return (_b = (_a = allOptionsValueMap.value.get(getValue(option))) == null ? void 0 : _a.index) != null ? _b : -1;
|
||||
};
|
||||
const initStates = (needUpdateSelectedLabel = false) => {
|
||||
if (props.multiple) {
|
||||
if (props.modelValue.length > 0) {
|
||||
const cachedOptions = states.cachedOptions.slice();
|
||||
states.cachedOptions.length = 0;
|
||||
states.previousValue = props.modelValue.toString();
|
||||
for (const value of props.modelValue) {
|
||||
const option = getOption(value, cachedOptions);
|
||||
states.cachedOptions.push(option);
|
||||
}
|
||||
} else {
|
||||
states.cachedOptions = [];
|
||||
states.previousValue = void 0;
|
||||
}
|
||||
} else {
|
||||
if (hasModelValue.value) {
|
||||
states.previousValue = props.modelValue;
|
||||
const options = filteredOptions.value;
|
||||
const selectedItemIndex = options.findIndex((option) => getValueKey(getValue(option)) === getValueKey(props.modelValue));
|
||||
if (~selectedItemIndex) {
|
||||
states.selectedLabel = getLabel(options[selectedItemIndex]);
|
||||
} else {
|
||||
if (!states.selectedLabel || needUpdateSelectedLabel) {
|
||||
states.selectedLabel = getValueKey(props.modelValue);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
states.selectedLabel = "";
|
||||
states.previousValue = void 0;
|
||||
}
|
||||
}
|
||||
clearAllNewOption();
|
||||
calculatePopperSize();
|
||||
};
|
||||
vue.watch(() => props.fitInputWidth, () => {
|
||||
calculatePopperSize();
|
||||
});
|
||||
vue.watch(expanded, (val) => {
|
||||
if (val) {
|
||||
if (!props.persistent) {
|
||||
calculatePopperSize();
|
||||
}
|
||||
handleQueryChange("");
|
||||
} else {
|
||||
states.inputValue = "";
|
||||
states.previousQuery = null;
|
||||
states.isBeforeHide = true;
|
||||
createNewOption("");
|
||||
}
|
||||
});
|
||||
vue.watch(() => props.modelValue, (val, oldVal) => {
|
||||
var _a;
|
||||
const isValEmpty = !val || shared.isArray(val) && val.length === 0;
|
||||
if (isValEmpty || props.multiple && !lodashUnified.isEqual(val.toString(), states.previousValue) || !props.multiple && getValueKey(val) !== getValueKey(states.previousValue)) {
|
||||
initStates(true);
|
||||
}
|
||||
if (!lodashUnified.isEqual(val, oldVal) && props.validateEvent) {
|
||||
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => error.debugWarn(err));
|
||||
}
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
vue.watch(() => props.options, () => {
|
||||
const input = inputRef.value;
|
||||
if (!input || input && document.activeElement !== input) {
|
||||
initStates();
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
flush: "post"
|
||||
});
|
||||
vue.watch(() => filteredOptions.value, () => {
|
||||
calculatePopperSize();
|
||||
return menuRef.value && vue.nextTick(menuRef.value.resetScrollTop);
|
||||
});
|
||||
vue.watchEffect(() => {
|
||||
if (states.isBeforeHide)
|
||||
return;
|
||||
updateOptions();
|
||||
});
|
||||
vue.watchEffect(() => {
|
||||
const { valueKey, options } = props;
|
||||
const duplicateValue = /* @__PURE__ */ new Map();
|
||||
for (const item of options) {
|
||||
const optionValue = getValue(item);
|
||||
let v = optionValue;
|
||||
if (shared.isObject(v)) {
|
||||
v = lodashUnified.get(optionValue, valueKey);
|
||||
}
|
||||
if (duplicateValue.get(v)) {
|
||||
error.debugWarn("ElSelectV2", `The option values you provided seem to be duplicated, which may cause some problems, please check.`);
|
||||
break;
|
||||
} else {
|
||||
duplicateValue.set(v, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
vue.onMounted(() => {
|
||||
initStates();
|
||||
});
|
||||
core.useResizeObserver(selectRef, handleResize);
|
||||
core.useResizeObserver(selectionRef, resetSelectionWidth);
|
||||
core.useResizeObserver(wrapperRef, updateTooltip);
|
||||
core.useResizeObserver(tagMenuRef, updateTagTooltip);
|
||||
core.useResizeObserver(collapseItemRef, resetCollapseItemWidth);
|
||||
let stop;
|
||||
vue.watch(() => dropdownMenuVisible.value, (newVal) => {
|
||||
if (newVal) {
|
||||
stop = core.useResizeObserver(menuRef, updateTooltip).stop;
|
||||
} else {
|
||||
stop == null ? void 0 : stop();
|
||||
stop = void 0;
|
||||
}
|
||||
emit("visible-change", newVal);
|
||||
});
|
||||
return {
|
||||
inputId,
|
||||
collapseTagSize,
|
||||
currentPlaceholder,
|
||||
expanded,
|
||||
emptyText,
|
||||
popupHeight,
|
||||
debounce,
|
||||
allOptions,
|
||||
allOptionsValueMap,
|
||||
filteredOptions,
|
||||
iconComponent,
|
||||
iconReverse,
|
||||
tagStyle,
|
||||
collapseTagStyle,
|
||||
popperSize,
|
||||
dropdownMenuVisible,
|
||||
hasModelValue,
|
||||
shouldShowPlaceholder,
|
||||
selectDisabled,
|
||||
selectSize,
|
||||
needStatusIcon,
|
||||
showClearBtn,
|
||||
states,
|
||||
isFocused,
|
||||
nsSelect,
|
||||
nsInput,
|
||||
inputRef,
|
||||
menuRef,
|
||||
tagMenuRef,
|
||||
tooltipRef,
|
||||
tagTooltipRef,
|
||||
selectRef,
|
||||
wrapperRef,
|
||||
selectionRef,
|
||||
prefixRef,
|
||||
suffixRef,
|
||||
collapseItemRef,
|
||||
popperRef,
|
||||
validateState,
|
||||
validateIcon,
|
||||
showTagList,
|
||||
collapseTagList,
|
||||
debouncedOnInputChange,
|
||||
deleteTag,
|
||||
getLabel,
|
||||
getValue,
|
||||
getDisabled,
|
||||
getValueKey,
|
||||
getIndex,
|
||||
handleClear,
|
||||
handleClickOutside,
|
||||
handleDel,
|
||||
handleEsc,
|
||||
focus,
|
||||
blur,
|
||||
handleMenuEnter,
|
||||
handleResize,
|
||||
resetSelectionWidth,
|
||||
updateTooltip,
|
||||
updateTagTooltip,
|
||||
updateOptions,
|
||||
toggleMenu,
|
||||
scrollTo: scrollToItem,
|
||||
onInput,
|
||||
onKeyboardNavigate,
|
||||
onKeyboardSelect,
|
||||
onSelect,
|
||||
onHover: onHoverOption,
|
||||
handleCompositionStart,
|
||||
handleCompositionEnd,
|
||||
handleCompositionUpdate
|
||||
};
|
||||
};
|
||||
|
||||
exports["default"] = useSelect;
|
||||
//# sourceMappingURL=useSelect.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import 'element-plus/es/components/base/style/css';
|
||||
import 'element-plus/es/components/input/style/css';
|
||||
import 'element-plus/es/components/tag/style/css';
|
||||
import 'element-plus/es/components/scrollbar/style/css';
|
||||
import 'element-plus/es/components/popper/style/css';
|
||||
import 'element-plus/es/components/virtual-list/style/css';
|
||||
import 'element-plus/theme-chalk/el-select-v2.css';
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
require('../../base/style/css.js');
|
||||
require('../../input/style/css.js');
|
||||
require('../../tag/style/css.js');
|
||||
require('../../scrollbar/style/css.js');
|
||||
require('../../popper/style/css.js');
|
||||
require('../../virtual-list/style/css.js');
|
||||
require('element-plus/theme-chalk/el-select-v2.css');
|
||||
|
||||
//# sourceMappingURL=css.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import 'element-plus/es/components/base/style';
|
||||
import 'element-plus/es/components/input/style';
|
||||
import 'element-plus/es/components/tag/style';
|
||||
import 'element-plus/es/components/scrollbar/style';
|
||||
import 'element-plus/es/components/popper/style';
|
||||
import 'element-plus/es/components/virtual-list/style';
|
||||
import 'element-plus/theme-chalk/src/select-v2.scss';
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
require('../../base/style/index.js');
|
||||
require('../../input/style/index.js');
|
||||
require('../../tag/style/index.js');
|
||||
require('../../scrollbar/style/index.js');
|
||||
require('../../popper/style/index.js');
|
||||
require('../../virtual-list/style/index.js');
|
||||
require('element-plus/theme-chalk/src/select-v2.scss');
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
||||
Reference in New Issue
Block a user