first commit
This commit is contained in:
root
+264
@@ -0,0 +1,264 @@
|
||||
import "../../../utils/vue/typescript.js";
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import "../../../utils/index.js";
|
||||
import { PopperEffect } from "../../popper/src/popper.js";
|
||||
import { Option, OptionType } from "./select.types.js";
|
||||
import { _default } from "./select.vue.js";
|
||||
import { Props } from "./useProps.js";
|
||||
import { Options, Placement } from "../../popper/index.js";
|
||||
import * as vue from "vue";
|
||||
import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/select-v2/src/defaults.d.ts
|
||||
/**
|
||||
* @description Tag tooltip configuration interface
|
||||
*/
|
||||
interface TagTooltipProps {
|
||||
appendTo?: string | HTMLElement;
|
||||
placement?: Placement;
|
||||
fallbackPlacements?: Placement[];
|
||||
effect?: PopperEffect;
|
||||
popperClass?: string;
|
||||
popperStyle?: string | CSSProperties;
|
||||
transition?: string;
|
||||
teleported?: boolean;
|
||||
popperOptions?: Partial<Options>;
|
||||
showAfter?: number;
|
||||
hideAfter?: number;
|
||||
autoClose?: number;
|
||||
offset?: number;
|
||||
}
|
||||
declare const selectV2Props: {
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: 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)) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | (((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list")) | null)[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
readonly effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
|
||||
readonly maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: vue.PropType<OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: vue.PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: vue.PropType<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)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
|
||||
readonly valueKey: EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
};
|
||||
declare const optionV2Props: {
|
||||
readonly data: ArrayConstructor;
|
||||
readonly disabled: BooleanConstructor;
|
||||
readonly hovering: BooleanConstructor;
|
||||
readonly item: {
|
||||
readonly type: 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;
|
||||
};
|
||||
type SelectV2Props = ExtractPropTypes<typeof selectV2Props>;
|
||||
type OptionV2Props = ExtractPropTypes<typeof optionV2Props>;
|
||||
type SelectV2Instance = InstanceType<typeof _default> & unknown;
|
||||
//#endregion
|
||||
export { OptionV2Props, SelectV2Instance, SelectV2Props, TagTooltipProps };
|
||||
+205
@@ -0,0 +1,205 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_event = require('../../../constants/event.js');
|
||||
const require_types = require('../../../utils/types.js');
|
||||
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
|
||||
const require_icon = require('../../../utils/vue/icon.js');
|
||||
const require_index = require('../../../hooks/use-size/index.js');
|
||||
const require_index$1 = require('../../../hooks/use-empty-values/index.js');
|
||||
const require_index$2 = require('../../../hooks/use-aria/index.js');
|
||||
const require_content = require('../../tooltip/src/content.js');
|
||||
const require_tag = require('../../tag/src/tag.js');
|
||||
const require_useProps = require('./useProps.js');
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let _popperjs_core = require("@popperjs/core");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/defaults.ts
|
||||
const selectV2Props = require_runtime$1.buildProps({
|
||||
allowCreate: Boolean,
|
||||
autocomplete: {
|
||||
type: require_runtime$1.definePropType(String),
|
||||
default: "none"
|
||||
},
|
||||
automaticDropdown: Boolean,
|
||||
clearable: Boolean,
|
||||
clearIcon: {
|
||||
type: require_icon.iconPropType,
|
||||
default: _element_plus_icons_vue.CircleClose
|
||||
},
|
||||
effect: {
|
||||
type: require_runtime$1.definePropType(String),
|
||||
default: "light"
|
||||
},
|
||||
collapseTags: Boolean,
|
||||
collapseTagsTooltip: Boolean,
|
||||
tagTooltip: {
|
||||
type: require_runtime$1.definePropType(Object),
|
||||
default: () => ({})
|
||||
},
|
||||
maxCollapseTags: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
defaultFirstOption: Boolean,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
estimatedOptionHeight: {
|
||||
type: Number,
|
||||
default: void 0
|
||||
},
|
||||
filterable: Boolean,
|
||||
filterMethod: { type: require_runtime$1.definePropType(Function) },
|
||||
height: {
|
||||
type: Number,
|
||||
default: 274
|
||||
},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: 34
|
||||
},
|
||||
id: String,
|
||||
loading: Boolean,
|
||||
loadingText: String,
|
||||
modelValue: {
|
||||
type: require_runtime$1.definePropType([
|
||||
Array,
|
||||
String,
|
||||
Number,
|
||||
Boolean,
|
||||
Object
|
||||
]),
|
||||
default: void 0
|
||||
},
|
||||
multiple: Boolean,
|
||||
multipleLimit: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: String,
|
||||
noDataText: String,
|
||||
noMatchText: String,
|
||||
remoteMethod: { type: require_runtime$1.definePropType(Function) },
|
||||
reserveKeyword: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
options: {
|
||||
type: require_runtime$1.definePropType(Array),
|
||||
required: true
|
||||
},
|
||||
placeholder: { type: String },
|
||||
teleported: require_content.useTooltipContentProps.teleported,
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
popperClass: require_content.useTooltipContentProps.popperClass,
|
||||
popperStyle: require_content.useTooltipContentProps.popperStyle,
|
||||
popperOptions: {
|
||||
type: require_runtime$1.definePropType(Object),
|
||||
default: () => ({})
|
||||
},
|
||||
remote: Boolean,
|
||||
debounce: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
size: require_index.useSizeProp,
|
||||
props: {
|
||||
type: require_runtime$1.definePropType(Object),
|
||||
default: () => require_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: require_runtime$1.definePropType(String),
|
||||
values: _popperjs_core.placements,
|
||||
default: "bottom-start"
|
||||
},
|
||||
fallbackPlacements: {
|
||||
type: require_runtime$1.definePropType(Array),
|
||||
default: [
|
||||
"bottom-start",
|
||||
"top-start",
|
||||
"right",
|
||||
"left"
|
||||
]
|
||||
},
|
||||
tagType: {
|
||||
...require_tag.tagProps.type,
|
||||
default: "info"
|
||||
},
|
||||
tagEffect: {
|
||||
...require_tag.tagProps.effect,
|
||||
default: "light"
|
||||
},
|
||||
tabindex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
appendTo: require_content.useTooltipContentProps.appendTo,
|
||||
fitInputWidth: {
|
||||
type: [Boolean, Number],
|
||||
default: true,
|
||||
validator(val) {
|
||||
return require_types.isBoolean(val) || require_types.isNumber(val);
|
||||
}
|
||||
},
|
||||
suffixIcon: {
|
||||
type: require_icon.iconPropType,
|
||||
default: _element_plus_icons_vue.ArrowDown
|
||||
},
|
||||
...require_index$1.useEmptyValuesProps,
|
||||
...require_index$2.useAriaProps(["ariaLabel"])
|
||||
});
|
||||
const optionV2Props = require_runtime$1.buildProps({
|
||||
data: Array,
|
||||
disabled: Boolean,
|
||||
hovering: Boolean,
|
||||
item: {
|
||||
type: require_runtime$1.definePropType(Object),
|
||||
required: true
|
||||
},
|
||||
index: Number,
|
||||
style: Object,
|
||||
selected: Boolean,
|
||||
created: Boolean
|
||||
});
|
||||
const selectV2Emits = {
|
||||
[require_event.UPDATE_MODEL_EVENT]: (val) => true,
|
||||
[require_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) => require_types.isNumber(index),
|
||||
select: (val, index) => true
|
||||
};
|
||||
|
||||
//#endregion
|
||||
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
+21
@@ -0,0 +1,21 @@
|
||||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
|
||||
const require_group_item_vue_vue_type_script_lang = require('./group-item.vue_vue_type_script_lang.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/group-item.vue
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
class: (0, vue.normalizeClass)(_ctx.ns.be("group", "title")),
|
||||
style: (0, vue.normalizeStyle)({
|
||||
..._ctx.style,
|
||||
lineHeight: `${_ctx.height}px`
|
||||
})
|
||||
}, (0, vue.toDisplayString)(_ctx.item.label), 7);
|
||||
}
|
||||
var group_item_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_group_item_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
|
||||
|
||||
//#endregion
|
||||
exports.default = group_item_default;
|
||||
//# sourceMappingURL=group-item.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"group-item.js","names":[],"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"],"mappings":";;;;;;;;0DAMQ,OAAA;EAJH,+BAAO,KAAA,GAAG,GAAE,SAAA,QAAA,CAAA;EACZ,+BAAK;GAAA,GAAO,KAAA;GAAK,YAAA,GAAiB,KAAA,OAAM;GAAA,CAAA;EAAA,2BAEtC,KAAA,KAAK,MAAK,EAAA,EAAA"}
|
||||
Generated
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_index = require('../../../hooks/use-namespace/index.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/group-item.vue?vue&type=script&lang.ts
|
||||
var group_item_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
style: { type: Object },
|
||||
height: Number
|
||||
},
|
||||
setup() {
|
||||
return { ns: require_index.useNamespace("select") };
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
exports.default = group_item_vue_vue_type_script_lang_default;
|
||||
//# sourceMappingURL=group-item.vue_vue_type_script_lang.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"group-item.vue_vue_type_script_lang.js","names":[],"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"],"mappings":";;;;;AAeA,2EAA+B;CAC7B,OAAO;EACL,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACD,OAAO,EACL,MAAM,QACP;EACD,QAAQ;EACT;CACD,QAAQ;AAEN,SAAO,EACL,IAFS,2BAAa,SAAQ,EAGhC;;CAEH,CAAA"}
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
|
||||
const require_option_item_vue_vue_type_script_lang = require('./option-item.vue_vue_type_script_lang.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/option-item.vue
|
||||
const _hoisted_1 = [
|
||||
"id",
|
||||
"aria-selected",
|
||||
"aria-disabled"
|
||||
];
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
|
||||
id: `${_ctx.contentId}-${_ctx.index}`,
|
||||
role: "option",
|
||||
"aria-selected": _ctx.selected,
|
||||
"aria-disabled": _ctx.disabled || void 0,
|
||||
style: (0, vue.normalizeStyle)(_ctx.style),
|
||||
class: (0, 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: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
|
||||
onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "default", {
|
||||
item: _ctx.item,
|
||||
index: _ctx.index,
|
||||
disabled: _ctx.disabled
|
||||
}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.getLabel(_ctx.item)), 1)])], 46, _hoisted_1);
|
||||
}
|
||||
var option_item_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_option_item_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
|
||||
|
||||
//#endregion
|
||||
exports.default = option_item_default;
|
||||
//# sourceMappingURL=option-item.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"option-item.js","names":[],"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"],"mappings":";;;;;;;;;;;;;0DAoBO,MAAA;EAlBF,IAAE,GAAK,KAAA,UAAS,GAAI,KAAA;EACrB,MAAK;EACJ,iBAAe,KAAA;EACf,iBAAe,KAAA,YAAY,KAAA;EAC3B,+BAAO,KAAA,MAAK;EACZ,+BAAK;GAAU,KAAA,GAAG,GAAE,YAAA,OAAA;GAA4B,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAS,KAAA,GAAG,GAAE,WAAY,KAAA,QAAO;GAAS,KAAA,GAAG,GAAE,YAAa,KAAA,SAAQ;GAAA,CAAA;EAOjL,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA;EAFA,MAAM,KAAA;EAAO,OAAO,KAAA;EAAQ,UAAU,KAAA;EAAA,QAEtC,6BAD4B,QAAA,+BAAxB,KAAA,SAAS,KAAA,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA"}
|
||||
Generated
Vendored
+30
@@ -0,0 +1,30 @@
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_index = require('../../../hooks/use-namespace/index.js');
|
||||
const require_useProps = require('./useProps.js');
|
||||
const require_useOption = require('./useOption.js');
|
||||
const require_defaults = require('./defaults.js');
|
||||
const require_token = require('./token.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/option-item.vue?vue&type=script&lang.ts
|
||||
var option_item_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
|
||||
props: require_defaults.optionV2Props,
|
||||
emits: require_defaults.optionV2Emits,
|
||||
setup(props, { emit }) {
|
||||
const select = (0, vue.inject)(require_token.selectV2InjectionKey);
|
||||
const ns = require_index.useNamespace("select");
|
||||
const { hoverItem, selectOptionClick } = require_useOption.useOption(props, { emit });
|
||||
const { getLabel } = require_useProps.useProps(select.props);
|
||||
return {
|
||||
ns,
|
||||
contentId: select.contentId,
|
||||
hoverItem,
|
||||
selectOptionClick,
|
||||
getLabel
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
exports.default = option_item_vue_vue_type_script_lang_default;
|
||||
//# sourceMappingURL=option-item.vue_vue_type_script_lang.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"option-item.vue_vue_type_script_lang.js","names":[],"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"],"mappings":";;;;;;;;;AA+BA,4EAA+B;CAC7B,OAAO;CACP,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,yBAAgB,mCAAqB;EAC3C,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,EAAE,WAAW,sBAAsB,4BAAU,OAAO,EAAE,MAAM,CAAA;EAClE,MAAM,EAAE,aAAa,0BAAS,OAAO,MAAK;AAG1C,SAAO;GACL;GACA,WAJgB,OAAO;GAKvB;GACA;GACA;GACF;;CAEH,CAAA"}
|
||||
Generated
Vendored
+31
@@ -0,0 +1,31 @@
|
||||
import { Option } from "./select.types.js";
|
||||
import { FixedSizeListInstance } from "../../virtual-list/src/components/fixed-size-list.js";
|
||||
import { DynamicSizeListInstance } from "../../virtual-list/src/components/dynamic-size-list.js";
|
||||
import "../../virtual-list/index.js";
|
||||
import { ComponentPublicInstance, ComputedRef, ExtractPropTypes, Ref } from "vue";
|
||||
import "vue/jsx-runtime";
|
||||
|
||||
//#region ../../packages/components/select-v2/src/select-dropdown.d.ts
|
||||
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;
|
||||
}
|
||||
type SelectDropdownInstance = ComponentPublicInstance<ExtractPropTypes<typeof props>, SelectDropdownExposed>;
|
||||
//#endregion
|
||||
export { SelectDropdownInstance };
|
||||
Generated
Vendored
+189
@@ -0,0 +1,189 @@
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_aria = require('../../../constants/aria.js');
|
||||
const require_event = require('../../../utils/dom/event.js');
|
||||
const require_types = require('../../../utils/types.js');
|
||||
const require_index = require('../../../hooks/use-namespace/index.js');
|
||||
const require_useProps = require('./useProps.js');
|
||||
const require_fixed_size_list = require('../../virtual-list/src/components/fixed-size-list.js');
|
||||
const require_dynamic_size_list = require('../../virtual-list/src/components/dynamic-size-list.js');
|
||||
const require_group_item = require('./group-item.js');
|
||||
const require_token = require('./token.js');
|
||||
const require_option_item = require('./option-item.js');
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/select-dropdown.tsx
|
||||
const props = {
|
||||
loading: Boolean,
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
hoveringIndex: Number,
|
||||
width: Number,
|
||||
id: String,
|
||||
ariaLabel: String
|
||||
};
|
||||
var select_dropdown_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "ElSelectDropdown",
|
||||
props,
|
||||
setup(props, { slots, expose }) {
|
||||
const select = (0, vue.inject)(require_token.selectV2InjectionKey);
|
||||
const ns = require_index.useNamespace("select");
|
||||
const { getLabel, getValue, getDisabled } = require_useProps.useProps(select.props);
|
||||
const cachedHeights = (0, vue.ref)([]);
|
||||
const listRef = (0, vue.ref)();
|
||||
const size = (0, vue.computed)(() => props.data.length);
|
||||
(0, vue.watch)(() => size.value, () => {
|
||||
select.tooltipRef.value?.updatePopper?.();
|
||||
});
|
||||
const isSized = (0, vue.computed)(() => require_types.isUndefined(select.props.estimatedOptionHeight));
|
||||
const listProps = (0, 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 (!(0, _vue_shared.isObject)(target)) return arr.includes(target);
|
||||
return arr && arr.some((item) => {
|
||||
return (0, vue.toRaw)((0, lodash_unified.get)(item, valueKey)) === (0, lodash_unified.get)(target, valueKey);
|
||||
});
|
||||
};
|
||||
const isEqual = (selected, target) => {
|
||||
if (!(0, _vue_shared.isObject)(target)) return selected === target;
|
||||
else {
|
||||
const { valueKey } = select.props;
|
||||
return (0, lodash_unified.get)(selected, valueKey) === (0, lodash_unified.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) => props.hoveringIndex === target;
|
||||
const scrollToItem = (index) => {
|
||||
const list = listRef.value;
|
||||
if (list) list.scrollToItem(index);
|
||||
};
|
||||
const resetScrollTop = () => {
|
||||
const list = listRef.value;
|
||||
if (list) list.resetScrollTop();
|
||||
};
|
||||
expose({
|
||||
listRef,
|
||||
isSized,
|
||||
isItemDisabled,
|
||||
isItemHovering,
|
||||
isItemSelected,
|
||||
scrollToItem,
|
||||
resetScrollTop
|
||||
});
|
||||
const Item = (itemProps) => {
|
||||
const { index, data, style } = itemProps;
|
||||
const sized = (0, vue.unref)(isSized);
|
||||
const { itemSize, estimatedSize } = (0, vue.unref)(listProps);
|
||||
const { modelValue } = select.props;
|
||||
const { onSelect, onHover } = select;
|
||||
const item = data[index];
|
||||
if (item.type === "Group") return (0, vue.createVNode)(require_group_item.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 (0, vue.createVNode)(require_option_item.default, (0, vue.mergeProps)(itemProps, {
|
||||
"selected": isSelected,
|
||||
"disabled": getDisabled(item) || isDisabled,
|
||||
"created": !!item.created,
|
||||
"hovering": isHovering,
|
||||
"item": item,
|
||||
"onSelect": onSelect,
|
||||
"onHover": onHover
|
||||
}), { default: (props) => slots.default?.(props) || (0, vue.createVNode)("span", null, [getLabel(item)]) });
|
||||
};
|
||||
const { onKeyboardNavigate, onKeyboardSelect } = select;
|
||||
const onForward = () => {
|
||||
onKeyboardNavigate("forward");
|
||||
};
|
||||
const onBackward = () => {
|
||||
onKeyboardNavigate("backward");
|
||||
};
|
||||
const onEscOrTab = () => {};
|
||||
const onKeydown = (e) => {
|
||||
const code = require_event.getEventCode(e);
|
||||
const { tab, esc, down, up, enter, numpadEnter } = require_aria.EVENT_CODE;
|
||||
if ([
|
||||
esc,
|
||||
down,
|
||||
up,
|
||||
enter,
|
||||
numpadEnter
|
||||
].includes(code)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
switch (code) {
|
||||
case tab:
|
||||
case esc:
|
||||
onEscOrTab();
|
||||
break;
|
||||
case down:
|
||||
onForward();
|
||||
break;
|
||||
case up:
|
||||
onBackward();
|
||||
break;
|
||||
case enter:
|
||||
case numpadEnter:
|
||||
onKeyboardSelect();
|
||||
break;
|
||||
}
|
||||
};
|
||||
return () => {
|
||||
const { data, width } = props;
|
||||
const { height, multiple, scrollbarAlwaysOn } = select.props;
|
||||
const isScrollbarAlwaysOn = (0, vue.computed)(() => {
|
||||
return _vueuse_core.isIOS ? true : scrollbarAlwaysOn;
|
||||
});
|
||||
const List = (0, vue.unref)(isSized) ? require_fixed_size_list.default : require_dynamic_size_list.default;
|
||||
return (0, vue.createVNode)("div", {
|
||||
"class": [ns.b("dropdown"), ns.is("multiple", multiple)],
|
||||
"style": { width: `${width}px` }
|
||||
}, [
|
||||
slots.header?.(),
|
||||
slots.loading?.() || slots.empty?.() || (0, vue.createVNode)(List, (0, vue.mergeProps)({ "ref": listRef }, (0, vue.unref)(listProps), {
|
||||
"className": ns.be("dropdown", "list"),
|
||||
"scrollbarAlwaysOn": isScrollbarAlwaysOn.value,
|
||||
"data": data,
|
||||
"height": height,
|
||||
"width": width,
|
||||
"total": data.length,
|
||||
"innerElement": "ul",
|
||||
"innerProps": {
|
||||
id: props.id,
|
||||
role: "listbox",
|
||||
"aria-label": props.ariaLabel,
|
||||
"aria-orientation": "vertical"
|
||||
},
|
||||
"onKeydown": onKeydown
|
||||
}), { default: (props) => (0, vue.createVNode)(Item, props, null) }),
|
||||
slots.footer?.()
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
exports.default = select_dropdown_default;
|
||||
//# sourceMappingURL=select-dropdown.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+367
@@ -0,0 +1,367 @@
|
||||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
|
||||
const require_select_vue_vue_type_script_lang = require('./select.vue_vue_type_script_lang.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/select.vue
|
||||
const _hoisted_1 = [
|
||||
"id",
|
||||
"value",
|
||||
"autocomplete",
|
||||
"tabindex",
|
||||
"aria-expanded",
|
||||
"aria-label",
|
||||
"disabled",
|
||||
"aria-controls",
|
||||
"aria-activedescendant",
|
||||
"readonly",
|
||||
"name"
|
||||
];
|
||||
const _hoisted_2 = ["textContent"];
|
||||
const _hoisted_3 = { key: 1 };
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
const _component_el_tag = (0, vue.resolveComponent)("el-tag");
|
||||
const _component_el_tooltip = (0, vue.resolveComponent)("el-tooltip");
|
||||
const _component_el_icon = (0, vue.resolveComponent)("el-icon");
|
||||
const _component_el_select_menu = (0, vue.resolveComponent)("el-select-menu");
|
||||
const _directive_click_outside = (0, vue.resolveDirective)("click-outside");
|
||||
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
ref: "selectRef",
|
||||
class: (0, vue.normalizeClass)([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
|
||||
onMouseenter: _cache[15] || (_cache[15] = ($event) => _ctx.states.inputHovering = true),
|
||||
onMouseleave: _cache[16] || (_cache[16] = ($event) => _ctx.states.inputHovering = false)
|
||||
}, [(0, 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: _cache[14] || (_cache[14] = ($event) => _ctx.states.isBeforeHide = false)
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
||||
ref: "wrapperRef",
|
||||
class: (0, 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: _cache[11] || (_cache[11] = (0, vue.withModifiers)((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["prevent"]))
|
||||
}, [
|
||||
_ctx.$slots.prefix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
ref: "prefixRef",
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("prefix"))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "prefix")], 2)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", {
|
||||
ref: "selectionRef",
|
||||
class: (0, vue.normalizeClass)([_ctx.nsSelect.e("selection"), _ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.modelValue.length)])
|
||||
}, [
|
||||
_ctx.multiple ? (0, vue.renderSlot)(_ctx.$slots, "tag", {
|
||||
key: 0,
|
||||
data: _ctx.states.cachedOptions,
|
||||
deleteTag: _ctx.deleteTag,
|
||||
selectDisabled: _ctx.selectDisabled
|
||||
}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.showTagList, (item) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: _ctx.getValueKey(_ctx.getValue(item)),
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
|
||||
}, [(0, vue.createVNode)(_component_el_tag, {
|
||||
closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
|
||||
size: _ctx.collapseTagSize,
|
||||
type: _ctx.tagType,
|
||||
effect: _ctx.tagEffect,
|
||||
"disable-transitions": "",
|
||||
style: (0, vue.normalizeStyle)(_ctx.tagStyle),
|
||||
onClose: ($event) => _ctx.deleteTag($event, item)
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
|
||||
index: _ctx.getIndex(item),
|
||||
label: _ctx.getLabel(item),
|
||||
value: _ctx.getValue(item)
|
||||
}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.getLabel(item)), 1)])], 2)]),
|
||||
_: 2
|
||||
}, 1032, [
|
||||
"closable",
|
||||
"size",
|
||||
"type",
|
||||
"effect",
|
||||
"style",
|
||||
"onClose"
|
||||
])], 2);
|
||||
}), 128)), _ctx.collapseTags && _ctx.states.cachedOptions.length > _ctx.maxCollapseTags ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_tooltip, {
|
||||
key: 0,
|
||||
ref: "tagTooltipRef",
|
||||
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
|
||||
"fallback-placements": _ctx.tagTooltip?.fallbackPlacements ?? [
|
||||
"bottom",
|
||||
"top",
|
||||
"right",
|
||||
"left"
|
||||
],
|
||||
effect: _ctx.tagTooltip?.effect ?? _ctx.effect,
|
||||
placement: _ctx.tagTooltip?.placement ?? "bottom",
|
||||
"popper-class": _ctx.tagTooltip?.popperClass ?? _ctx.popperClass,
|
||||
"popper-style": _ctx.tagTooltip?.popperStyle ?? _ctx.popperStyle,
|
||||
teleported: _ctx.tagTooltip?.teleported ?? _ctx.teleported,
|
||||
"append-to": _ctx.tagTooltip?.appendTo ?? _ctx.appendTo,
|
||||
"popper-options": _ctx.tagTooltip?.popperOptions ?? _ctx.popperOptions,
|
||||
transition: _ctx.tagTooltip?.transition,
|
||||
"show-after": _ctx.tagTooltip?.showAfter,
|
||||
"hide-after": _ctx.tagTooltip?.hideAfter,
|
||||
"auto-close": _ctx.tagTooltip?.autoClose,
|
||||
offset: _ctx.tagTooltip?.offset
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
||||
ref: "collapseItemRef",
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
|
||||
}, [(0, vue.createVNode)(_component_el_tag, {
|
||||
closable: false,
|
||||
size: _ctx.collapseTagSize,
|
||||
type: _ctx.tagType,
|
||||
effect: _ctx.tagEffect,
|
||||
style: (0, vue.normalizeStyle)(_ctx.collapseTagStyle),
|
||||
"disable-transitions": ""
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, " + " + (0, vue.toDisplayString)(_ctx.states.cachedOptions.length - _ctx.maxCollapseTags), 3)]),
|
||||
_: 1
|
||||
}, 8, [
|
||||
"size",
|
||||
"type",
|
||||
"effect",
|
||||
"style"
|
||||
])], 2)]),
|
||||
content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
||||
ref: "tagMenuRef",
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selection"))
|
||||
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.collapseTagList, (selected) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: _ctx.getValueKey(_ctx.getValue(selected)),
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
|
||||
}, [(0, 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: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
|
||||
index: _ctx.getIndex(selected),
|
||||
label: _ctx.getLabel(selected),
|
||||
value: _ctx.getValue(selected)
|
||||
}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.getLabel(selected)), 1)])], 2)]),
|
||||
_: 2
|
||||
}, 1032, [
|
||||
"closable",
|
||||
"size",
|
||||
"type",
|
||||
"effect",
|
||||
"onClose"
|
||||
])], 2);
|
||||
}), 128))], 2)]),
|
||||
_: 3
|
||||
}, 8, [
|
||||
"disabled",
|
||||
"fallback-placements",
|
||||
"effect",
|
||||
"placement",
|
||||
"popper-class",
|
||||
"popper-style",
|
||||
"teleported",
|
||||
"append-to",
|
||||
"popper-options",
|
||||
"transition",
|
||||
"show-after",
|
||||
"hide-after",
|
||||
"auto-close",
|
||||
"offset"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true)]) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
|
||||
_ctx.nsSelect.e("selected-item"),
|
||||
_ctx.nsSelect.e("input-wrapper"),
|
||||
_ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled || !_ctx.states.inputValue && !_ctx.isFocused)
|
||||
]) }, [(0, vue.createElementVNode)("input", {
|
||||
id: _ctx.inputId,
|
||||
ref: "inputRef",
|
||||
value: _ctx.states.inputValue,
|
||||
style: (0, 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: (0, 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: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
|
||||
onChange: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["stop"])),
|
||||
onCompositionstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
|
||||
onCompositionupdate: _cache[3] || (_cache[3] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
|
||||
onCompositionend: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
|
||||
onKeydown: [
|
||||
_cache[5] || (_cache[5] = (0, vue.withKeys)((0, vue.withModifiers)(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
|
||||
_cache[6] || (_cache[6] = (0, vue.withKeys)((0, vue.withModifiers)(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
|
||||
_cache[7] || (_cache[7] = (0, vue.withKeys)((0, vue.withModifiers)((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])),
|
||||
_cache[8] || (_cache[8] = (0, vue.withKeys)((0, vue.withModifiers)((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])),
|
||||
_cache[9] || (_cache[9] = (0, vue.withKeys)((0, vue.withModifiers)((...args) => _ctx.handleDel && _ctx.handleDel(...args), ["stop"]), ["delete"]))
|
||||
],
|
||||
onClick: _cache[10] || (_cache[10] = (0, vue.withModifiers)((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
|
||||
}, null, 46, _hoisted_1), _ctx.filterable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
|
||||
key: 0,
|
||||
ref: "calculatorRef",
|
||||
"aria-hidden": "true",
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("input-calculator")),
|
||||
textContent: (0, vue.toDisplayString)(_ctx.states.inputValue)
|
||||
}, null, 10, _hoisted_2)) : (0, vue.createCommentVNode)("v-if", true)], 2),
|
||||
_ctx.shouldShowPlaceholder ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 1,
|
||||
class: (0, vue.normalizeClass)([
|
||||
_ctx.nsSelect.e("selected-item"),
|
||||
_ctx.nsSelect.e("placeholder"),
|
||||
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
|
||||
])
|
||||
}, [_ctx.hasModelValue ? (0, vue.renderSlot)(_ctx.$slots, "label", {
|
||||
key: 0,
|
||||
index: _ctx.allOptionsValueMap.get(_ctx.modelValue)?.index ?? -1,
|
||||
label: _ctx.currentPlaceholder,
|
||||
value: _ctx.modelValue
|
||||
}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.currentPlaceholder), 1)]) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)(_ctx.currentPlaceholder), 1))], 2)) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2),
|
||||
(0, vue.createElementVNode)("div", {
|
||||
ref: "suffixRef",
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("suffix"))
|
||||
}, [
|
||||
_ctx.iconComponent ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
|
||||
key: 0,
|
||||
class: (0, vue.normalizeClass)([
|
||||
_ctx.nsSelect.e("caret"),
|
||||
_ctx.nsInput.e("icon"),
|
||||
_ctx.iconReverse
|
||||
])
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.iconComponent)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])), [[vue.vShow, !_ctx.showClearBtn]]) : (0, vue.createCommentVNode)("v-if", true),
|
||||
_ctx.showClearBtn && _ctx.clearIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
|
||||
key: 1,
|
||||
class: (0, vue.normalizeClass)([
|
||||
_ctx.nsSelect.e("caret"),
|
||||
_ctx.nsInput.e("icon"),
|
||||
_ctx.nsSelect.e("clear")
|
||||
]),
|
||||
onClick: (0, vue.withModifiers)(_ctx.handleClear, ["prevent", "stop"])
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.clearIcon)))]),
|
||||
_: 1
|
||||
}, 8, ["class", "onClick"])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
_ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
|
||||
key: 2,
|
||||
class: (0, vue.normalizeClass)([
|
||||
_ctx.nsInput.e("icon"),
|
||||
_ctx.nsInput.e("validateIcon"),
|
||||
_ctx.nsInput.is("loading", _ctx.validateState === "validating")
|
||||
])
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.validateIcon)))]),
|
||||
_: 1
|
||||
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2)
|
||||
], 2)]),
|
||||
content: (0, vue.withCtx)(() => [(0, 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
|
||||
}, (0, vue.createSlots)({
|
||||
default: (0, vue.withCtx)((scope) => [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(scope)))]),
|
||||
_: 2
|
||||
}, [
|
||||
_ctx.$slots.header ? {
|
||||
name: "header",
|
||||
fn: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "header")),
|
||||
onClick: _cache[12] || (_cache[12] = (0, vue.withModifiers)(() => {}, ["stop"]))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "header")], 2)]),
|
||||
key: "0"
|
||||
} : void 0,
|
||||
_ctx.$slots.loading && _ctx.loading ? {
|
||||
name: "loading",
|
||||
fn: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "loading")) }, [(0, vue.renderSlot)(_ctx.$slots, "loading")], 2)]),
|
||||
key: "1"
|
||||
} : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
|
||||
name: "empty",
|
||||
fn: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "empty")) }, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.emptyText), 1)])], 2)]),
|
||||
key: "2"
|
||||
} : void 0,
|
||||
_ctx.$slots.footer ? {
|
||||
name: "footer",
|
||||
fn: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
|
||||
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "footer")),
|
||||
onClick: _cache[13] || (_cache[13] = (0, vue.withModifiers)(() => {}, ["stop"]))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "footer")], 2)]),
|
||||
key: "3"
|
||||
} : 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"
|
||||
])], 34)), [[
|
||||
_directive_click_outside,
|
||||
_ctx.handleClickOutside,
|
||||
_ctx.popperRef
|
||||
]]);
|
||||
}
|
||||
var select_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_select_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
|
||||
|
||||
//#endregion
|
||||
exports.default = select_default;
|
||||
//# sourceMappingURL=select.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
//#region ../../packages/components/select-v2/src/select.types.d.ts
|
||||
type OptionCommon = Record<string, any>;
|
||||
type Option = OptionCommon & {
|
||||
created?: boolean;
|
||||
};
|
||||
type OptionGroup = OptionCommon;
|
||||
type OptionType = Option | OptionGroup;
|
||||
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;
|
||||
};
|
||||
//#endregion
|
||||
export { Option, OptionType, SelectStates };
|
||||
+1
@@ -0,0 +1 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
+899
@@ -0,0 +1,899 @@
|
||||
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Arrayable } from "../../../utils/typescript.js";
|
||||
import "../../../utils/index.js";
|
||||
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
|
||||
import { TagProps } from "../../tag/src/tag.js";
|
||||
import "../../tag/index.js";
|
||||
import { TooltipTriggerType } from "../../tooltip/src/trigger.js";
|
||||
import { TooltipContentInstance } from "../../tooltip/src/content.js";
|
||||
import { TooltipInstance, UseTooltipProps } from "../../tooltip/src/tooltip.js";
|
||||
import "../../tooltip/index.js";
|
||||
import { IconProps } from "../../icon/src/icon.js";
|
||||
import "../../icon/index.js";
|
||||
import { Option, OptionType, SelectStates } from "./select.types.js";
|
||||
import { SelectDropdownInstance } from "./select-dropdown.js";
|
||||
import { SelectV2Props, TagTooltipProps } from "./defaults.js";
|
||||
import { Props } from "./useProps.js";
|
||||
import "../../../index.js";
|
||||
import { Options, Placement } from "../../popper/index.js";
|
||||
import * as vue from "vue";
|
||||
import * as _vueuse_core0 from "@vueuse/core";
|
||||
import * as vue_jsx_runtime0 from "vue/jsx-runtime";
|
||||
|
||||
//#region ../../packages/components/select-v2/src/select.vue.d.ts
|
||||
declare const _default: typeof __VLS_export;
|
||||
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: 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)) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | (((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list")) | null)[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
readonly effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
|
||||
readonly maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: vue.PropType<OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: vue.PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: vue.PropType<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)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
|
||||
readonly valueKey: EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
}>, {
|
||||
modelValue: vue.ComputedRef<any>;
|
||||
selectedLabel: vue.ComputedRef<string | string[]>;
|
||||
calculatorRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
inputStyle: vue.ComputedRef<{
|
||||
minWidth: string;
|
||||
}>;
|
||||
contentId: vue.Ref<string, string>;
|
||||
BORDER_HORIZONTAL_WIDTH: number;
|
||||
inputId: vue.Ref<string | undefined, string | undefined>;
|
||||
collapseTagSize: vue.ComputedRef<"default" | "small">;
|
||||
currentPlaceholder: vue.ComputedRef<string>;
|
||||
expanded: vue.Ref<boolean, boolean>;
|
||||
emptyText: vue.ComputedRef<string | null>;
|
||||
popupHeight: vue.ComputedRef<number>;
|
||||
debounce: vue.ComputedRef<number>;
|
||||
allOptions: vue.ComputedRef<OptionType[]>;
|
||||
allOptionsValueMap: vue.ComputedRef<Map<any, any>>;
|
||||
filteredOptions: vue.Ref<({
|
||||
[x: string]: any;
|
||||
} | {
|
||||
[x: string]: any;
|
||||
created?: boolean | undefined;
|
||||
})[], OptionType[] | ({
|
||||
[x: string]: any;
|
||||
} | {
|
||||
[x: string]: any;
|
||||
created?: boolean | undefined;
|
||||
})[]>;
|
||||
iconComponent: vue.ComputedRef<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
|
||||
iconReverse: vue.ComputedRef<string>;
|
||||
tagStyle: vue.ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
collapseTagStyle: vue.ComputedRef<{
|
||||
maxWidth: string;
|
||||
}>;
|
||||
popperSize: vue.Ref<number, number>;
|
||||
dropdownMenuVisible: vue.WritableComputedRef<boolean, boolean>;
|
||||
hasModelValue: vue.ComputedRef<boolean>;
|
||||
shouldShowPlaceholder: vue.ComputedRef<boolean>;
|
||||
selectDisabled: vue.ComputedRef<boolean>;
|
||||
selectSize: vue.ComputedRef<"" | "default" | "large" | "small">;
|
||||
needStatusIcon: vue.ComputedRef<boolean>;
|
||||
showClearBtn: vue.ComputedRef<boolean>;
|
||||
states: SelectStates;
|
||||
isFocused: vue.Ref<boolean, boolean>;
|
||||
nsSelect: {
|
||||
namespace: 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: 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: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
menuRef: vue.Ref<SelectDropdownInstance | undefined, SelectDropdownInstance | undefined>;
|
||||
tagMenuRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
tooltipRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
|
||||
tagTooltipRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
|
||||
selectRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
wrapperRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
selectionRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
prefixRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
suffixRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
collapseItemRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
popperRef: vue.ComputedRef<HTMLElement | undefined>;
|
||||
validateState: vue.ComputedRef<"error" | "" | "success" | "validating">;
|
||||
validateIcon: vue.ComputedRef<vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any> | undefined>;
|
||||
showTagList: vue.ComputedRef<Option[]>;
|
||||
collapseTagList: vue.ComputedRef<Option[]>;
|
||||
debouncedOnInputChange: _vueuse_core0.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;
|
||||
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
"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;
|
||||
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly emptyValues: ArrayConstructor;
|
||||
readonly valueOnClear: 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)) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly allowCreate: BooleanConstructor;
|
||||
readonly autocomplete: EpPropFinalized<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | (((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list")) | null)[], unknown, unknown, "none", boolean>;
|
||||
readonly automaticDropdown: BooleanConstructor;
|
||||
readonly clearable: BooleanConstructor;
|
||||
readonly clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
readonly effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, "light", boolean>;
|
||||
readonly collapseTags: BooleanConstructor;
|
||||
readonly collapseTagsTooltip: BooleanConstructor;
|
||||
readonly tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
|
||||
readonly maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
|
||||
readonly defaultFirstOption: BooleanConstructor;
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly estimatedOptionHeight: EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly filterable: BooleanConstructor;
|
||||
readonly filterMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly height: EpPropFinalized<NumberConstructor, unknown, unknown, 274, boolean>;
|
||||
readonly itemHeight: EpPropFinalized<NumberConstructor, unknown, unknown, 34, boolean>;
|
||||
readonly id: StringConstructor;
|
||||
readonly loading: BooleanConstructor;
|
||||
readonly loadingText: StringConstructor;
|
||||
readonly modelValue: EpPropFinalized<(new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
} | (((new (...args: any[]) => any) | (() => any) | {
|
||||
(): any;
|
||||
new (): any;
|
||||
readonly prototype: any;
|
||||
}) | null)[], unknown, unknown, undefined, boolean>;
|
||||
readonly multiple: BooleanConstructor;
|
||||
readonly multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
|
||||
readonly name: StringConstructor;
|
||||
readonly noDataText: StringConstructor;
|
||||
readonly noMatchText: StringConstructor;
|
||||
readonly remoteMethod: {
|
||||
readonly type: vue.PropType<(query: string) => void>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: vue.PropType<OptionType[]>;
|
||||
readonly required: true;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly placeholder: {
|
||||
readonly type: vue.PropType<string>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly popperClass: {
|
||||
readonly type: vue.PropType<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)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperStyle: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
|
||||
readonly remote: BooleanConstructor;
|
||||
readonly debounce: EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
|
||||
readonly size: {
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
|
||||
readonly valueKey: EpPropFinalized<StringConstructor, unknown, unknown, "value", boolean>;
|
||||
readonly scrollbarAlwaysOn: BooleanConstructor;
|
||||
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 12, boolean>;
|
||||
readonly remoteShowSuffix: BooleanConstructor;
|
||||
readonly showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom-start", boolean>;
|
||||
readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom-start", "top-start", "right", "left"], boolean>;
|
||||
readonly tagType: {
|
||||
readonly default: "info";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tagEffect: {
|
||||
readonly default: "light";
|
||||
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
readonly __epPropKey: true;
|
||||
};
|
||||
readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
|
||||
readonly appendTo: {
|
||||
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly fitInputWidth: EpPropFinalized<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean, true, boolean>;
|
||||
readonly suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
|
||||
}>> & Readonly<{
|
||||
onBlur?: ((evt: FocusEvent) => any) | undefined;
|
||||
onChange?: ((val: any) => any) | undefined;
|
||||
onFocus?: ((evt: FocusEvent) => any) | undefined;
|
||||
onClear?: (() => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: any) => any) | undefined;
|
||||
"onVisible-change"?: ((visible: boolean) => any) | undefined;
|
||||
"onRemove-tag"?: ((val: unknown) => any) | undefined;
|
||||
}>, {
|
||||
readonly effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
|
||||
readonly props: Props;
|
||||
readonly multiple: boolean;
|
||||
readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly clearable: boolean;
|
||||
readonly clearIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
|
||||
readonly filterable: boolean;
|
||||
readonly collapseTags: boolean;
|
||||
readonly maxCollapseTags: number;
|
||||
readonly collapseTagsTooltip: boolean;
|
||||
readonly debounce: number;
|
||||
readonly placement: EpPropMergeType<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
|
||||
readonly fallbackPlacements: Placement[];
|
||||
readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly tagType: EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>;
|
||||
readonly tagEffect: EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>;
|
||||
readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly modelValue: any;
|
||||
readonly valueOnClear: 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)) | null)[], unknown, unknown>;
|
||||
readonly loading: boolean;
|
||||
readonly offset: number;
|
||||
readonly popperOptions: Partial<Options>;
|
||||
readonly showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly height: number;
|
||||
readonly autocomplete: EpPropMergeType<(new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list") | (((new (...args: any[]) => "none" | "both" | "inline" | "list") | (() => "none" | "both" | "inline" | "list")) | null)[], unknown, unknown>;
|
||||
readonly suffixIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
|
||||
readonly tabindex: EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
|
||||
readonly automaticDropdown: boolean;
|
||||
readonly allowCreate: boolean;
|
||||
readonly remote: boolean;
|
||||
readonly multipleLimit: number;
|
||||
readonly defaultFirstOption: boolean;
|
||||
readonly reserveKeyword: EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
||||
readonly valueKey: string;
|
||||
readonly tagTooltip: TagTooltipProps;
|
||||
readonly fitInputWidth: EpPropMergeType<readonly [BooleanConstructor, NumberConstructor], unknown, number | boolean>;
|
||||
readonly remoteShowSuffix: boolean;
|
||||
readonly estimatedOptionHeight: number;
|
||||
readonly itemHeight: number;
|
||||
readonly scrollbarAlwaysOn: boolean;
|
||||
}, {}, {
|
||||
ElSelectMenu: vue.DefineComponent<vue.ExtractPropTypes<{
|
||||
loading: BooleanConstructor;
|
||||
data: {
|
||||
type: ArrayConstructor;
|
||||
required: true;
|
||||
};
|
||||
hoveringIndex: NumberConstructor;
|
||||
width: NumberConstructor;
|
||||
id: StringConstructor;
|
||||
ariaLabel: StringConstructor;
|
||||
}>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
||||
loading: BooleanConstructor;
|
||||
data: {
|
||||
type: ArrayConstructor;
|
||||
required: true;
|
||||
};
|
||||
hoveringIndex: NumberConstructor;
|
||||
width: NumberConstructor;
|
||||
id: StringConstructor;
|
||||
ariaLabel: StringConstructor;
|
||||
}>> & Readonly<{}>, {
|
||||
loading: boolean;
|
||||
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
||||
ElTag: SFCWithInstall<{
|
||||
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TagProps> & Readonly<{
|
||||
onClick?: ((evt: MouseEvent) => any) | undefined;
|
||||
onClose?: ((evt: MouseEvent) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
click: (evt: MouseEvent) => void;
|
||||
close: (evt: MouseEvent) => void;
|
||||
}, vue.PublicProps, {
|
||||
type: "primary" | "success" | "info" | "warning" | "danger";
|
||||
effect: "dark" | "light" | "plain";
|
||||
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<TagProps> & Readonly<{
|
||||
onClick?: ((evt: MouseEvent) => any) | undefined;
|
||||
onClose?: ((evt: MouseEvent) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
type: "primary" | "success" | "info" | "warning" | "danger";
|
||||
effect: "dark" | "light" | "plain";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & vue.ComponentOptionsBase<Readonly<TagProps> & Readonly<{
|
||||
onClick?: ((evt: MouseEvent) => any) | undefined;
|
||||
onClose?: ((evt: MouseEvent) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
click: (evt: MouseEvent) => void;
|
||||
close: (evt: MouseEvent) => void;
|
||||
}, string, {
|
||||
type: "primary" | "success" | "info" | "warning" | "danger";
|
||||
effect: "dark" | "light" | "plain";
|
||||
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
} & {
|
||||
default?: (props: {}) => any;
|
||||
};
|
||||
})>;
|
||||
ElTooltip: SFCWithInstall<{
|
||||
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
|
||||
onClose?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
|
||||
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
|
||||
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
|
||||
updatePopper: () => void;
|
||||
onOpen: (event?: Event, delay?: number) => void;
|
||||
onClose: (event?: Event, delay?: number) => void;
|
||||
hide: (event?: Event) => void;
|
||||
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
close: (...args: any[]) => void;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
hide: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
}, vue.PublicProps, {
|
||||
effect: PopperEffect;
|
||||
placement: Placement;
|
||||
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
teleported: boolean;
|
||||
visible: boolean | null;
|
||||
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
virtualTriggering: boolean;
|
||||
loop: boolean;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "absolute" | "fixed";
|
||||
arrowOffset: number;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[number];
|
||||
content: string;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<UseTooltipProps> & Readonly<{
|
||||
onClose?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
|
||||
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
|
||||
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
|
||||
updatePopper: () => void;
|
||||
onOpen: (event?: Event, delay?: number) => void;
|
||||
onClose: (event?: Event, delay?: number) => void;
|
||||
hide: (event?: Event) => void;
|
||||
}, {}, {}, {}, {
|
||||
effect: PopperEffect;
|
||||
placement: Placement;
|
||||
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
teleported: boolean;
|
||||
visible: boolean | null;
|
||||
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
virtualTriggering: boolean;
|
||||
loop: boolean;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "absolute" | "fixed";
|
||||
arrowOffset: number;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[number];
|
||||
content: string;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
|
||||
onClose?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
}>, {
|
||||
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
|
||||
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
|
||||
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
|
||||
updatePopper: () => void;
|
||||
onOpen: (event?: Event, delay?: number) => void;
|
||||
onClose: (event?: Event, delay?: number) => void;
|
||||
hide: (event?: Event) => void;
|
||||
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
||||
close: (...args: any[]) => void;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
hide: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
}, string, {
|
||||
effect: PopperEffect;
|
||||
placement: Placement;
|
||||
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
teleported: boolean;
|
||||
visible: boolean | null;
|
||||
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
virtualTriggering: boolean;
|
||||
loop: boolean;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "absolute" | "fixed";
|
||||
arrowOffset: number;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[number];
|
||||
content: string;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
} & {
|
||||
content?: (props: {}) => any;
|
||||
};
|
||||
})>;
|
||||
ElIcon: SFCWithInstall<{
|
||||
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {
|
||||
size: number | string;
|
||||
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {
|
||||
size: number | string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {
|
||||
size: number | string;
|
||||
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
};
|
||||
})>;
|
||||
}, {
|
||||
ClickOutside: vue.ObjectDirective<HTMLElement, any, string, any>;
|
||||
}, string, vue.ComponentProvideOptions, true, {}, any>;
|
||||
//#endregion
|
||||
export { _default };
|
||||
Generated
Vendored
+73
@@ -0,0 +1,73 @@
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_form = require('../../../constants/form.js');
|
||||
const require_index = require('../../../hooks/use-calc-input-width/index.js');
|
||||
const require_index$1 = require('../../../hooks/use-id/index.js');
|
||||
const require_index$2 = require('../../icon/index.js');
|
||||
const require_index$3 = require('../../tooltip/index.js');
|
||||
const require_index$4 = require('../../../directives/click-outside/index.js');
|
||||
const require_index$5 = require('../../tag/index.js');
|
||||
const require_defaults = require('./defaults.js');
|
||||
const require_token = require('./token.js');
|
||||
const require_select_dropdown = require('./select-dropdown.js');
|
||||
const require_useSelect = require('./useSelect.js');
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/select.vue?vue&type=script&lang.ts
|
||||
var select_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
|
||||
name: "ElSelectV2",
|
||||
components: {
|
||||
ElSelectMenu: require_select_dropdown.default,
|
||||
ElTag: require_index$5.ElTag,
|
||||
ElTooltip: require_index$3.ElTooltip,
|
||||
ElIcon: require_index$2.ElIcon
|
||||
},
|
||||
directives: { ClickOutside: require_index$4.default },
|
||||
props: require_defaults.selectV2Props,
|
||||
emits: require_defaults.selectV2Emits,
|
||||
setup(props, { emit }) {
|
||||
const modelValue = (0, vue.computed)(() => {
|
||||
const { modelValue: rawModelValue, multiple } = props;
|
||||
const fallback = multiple ? [] : void 0;
|
||||
if ((0, _vue_shared.isArray)(rawModelValue)) return multiple ? rawModelValue : fallback;
|
||||
return multiple ? fallback : rawModelValue;
|
||||
});
|
||||
const API = require_useSelect.default((0, vue.reactive)({
|
||||
...(0, vue.toRefs)(props),
|
||||
modelValue
|
||||
}), emit);
|
||||
const { calculatorRef, inputStyle } = require_index.useCalcInputWidth();
|
||||
const contentId = require_index$1.useId();
|
||||
(0, vue.provide)(require_token.selectV2InjectionKey, {
|
||||
props: (0, vue.reactive)({
|
||||
...(0, 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 = (0, 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: require_form.BORDER_HORIZONTAL_WIDTH
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//#endregion
|
||||
exports.default = select_vue_vue_type_script_lang_default;
|
||||
//# sourceMappingURL=select.vue_vue_type_script_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+20
@@ -0,0 +1,20 @@
|
||||
import { TooltipInstance } from "../../tooltip/src/tooltip.js";
|
||||
import "../../tooltip/index.js";
|
||||
import { Option } from "./select.types.js";
|
||||
import { OptionV2Props, SelectV2Instance, SelectV2Props } from "./defaults.js";
|
||||
import { InjectionKey, Ref } from "vue";
|
||||
|
||||
//#region ../../packages/components/select-v2/src/token.d.ts
|
||||
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;
|
||||
}
|
||||
declare const selectV2InjectionKey: InjectionKey<SelectV2Context>;
|
||||
//#endregion
|
||||
export { SelectV2Context, selectV2InjectionKey };
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
|
||||
//#region ../../packages/components/select-v2/src/token.ts
|
||||
const selectV2InjectionKey = Symbol("ElSelectV2Injection");
|
||||
|
||||
//#endregion
|
||||
exports.selectV2InjectionKey = selectV2InjectionKey;
|
||||
//# sourceMappingURL=token.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"token.js","names":[],"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"],"mappings":";;;AAgBA,MAAa,uBAAsD,OACjE,sBACD"}
|
||||
Generated
Vendored
+72
@@ -0,0 +1,72 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_useProps = require('./useProps.js');
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/useAllowCreate.ts
|
||||
function useAllowCreate(props, states) {
|
||||
const { aliasProps, getLabel, getValue } = require_useProps.useProps(props);
|
||||
const createOptionCount = (0, vue.ref)(0);
|
||||
const cachedSelectedOption = (0, vue.ref)();
|
||||
const enableAllowCreateMode = (0, vue.computed)(() => {
|
||||
return props.allowCreate && props.filterable;
|
||||
});
|
||||
(0, 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
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
exports.useAllowCreate = useAllowCreate;
|
||||
//# sourceMappingURL=useAllowCreate.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useAllowCreate.js","names":["useProps"],"sources":["../../../../../../packages/components/select-v2/src/useAllowCreate.ts"],"sourcesContent":["import { computed, ref, watch } from 'vue'\nimport { useProps } from './useProps'\n\nimport type { SelectV2Props } from './token'\nimport type { Option, SelectStates } from './select.types'\n\nexport function useAllowCreate(props: SelectV2Props, states: SelectStates) {\n const { aliasProps, getLabel, getValue } = useProps(props)\n\n const createOptionCount = ref(0)\n const cachedSelectedOption = ref<Option>()\n\n const enableAllowCreateMode = computed(() => {\n return props.allowCreate && props.filterable\n })\n\n watch(\n () => props.options,\n (options) => {\n const optionLabelsSet = new Set(options.map((option) => getLabel(option)))\n states.createdOptions = states.createdOptions.filter(\n (createdOption) => !optionLabelsSet.has(getLabel(createdOption))\n )\n }\n )\n\n function hasExistingOption(query: string) {\n const hasOption = (option: Option) => getLabel(option) === query\n return (\n (props.options && props.options.some(hasOption)) ||\n states.createdOptions.some(hasOption)\n )\n }\n\n function selectNewOption(option: Option) {\n if (!enableAllowCreateMode.value) {\n return\n }\n if (props.multiple && option.created) {\n createOptionCount.value++\n } else {\n cachedSelectedOption.value = option\n }\n }\n\n function createNewOption(query: string) {\n if (enableAllowCreateMode.value) {\n if (query && query.length > 0) {\n if (hasExistingOption(query)) {\n states.createdOptions = states.createdOptions.filter(\n (createdOption) => getLabel(createdOption) !== states.previousQuery\n )\n return\n }\n const newOption = {\n [aliasProps.value.value]: query,\n [aliasProps.value.label]: query,\n created: true,\n [aliasProps.value.disabled]: false,\n }\n if (states.createdOptions.length >= createOptionCount.value) {\n states.createdOptions[createOptionCount.value] = newOption\n } else {\n states.createdOptions.push(newOption)\n }\n } else {\n if (props.multiple) {\n states.createdOptions.length = createOptionCount.value\n } else {\n const selectedOption = cachedSelectedOption.value\n states.createdOptions.length = 0\n if (selectedOption && selectedOption.created) {\n states.createdOptions.push(selectedOption)\n }\n }\n }\n }\n }\n\n function removeNewOption(option: Option) {\n if (\n !enableAllowCreateMode.value ||\n !option ||\n !option.created ||\n (option.created &&\n props.reserveKeyword &&\n states.inputValue === getLabel(option))\n ) {\n return\n }\n const idx = states.createdOptions.findIndex(\n (it) => getValue(it) === getValue(option)\n )\n if (~idx) {\n states.createdOptions.splice(idx, 1)\n createOptionCount.value--\n }\n }\n\n function clearAllNewOption() {\n if (enableAllowCreateMode.value) {\n states.createdOptions.length = 0\n createOptionCount.value = 0\n }\n }\n\n return {\n createNewOption,\n removeNewOption,\n selectNewOption,\n clearAllNewOption,\n }\n}\n"],"mappings":";;;;;;AAMA,SAAgB,eAAe,OAAsB,QAAsB;CACzE,MAAM,EAAE,YAAY,UAAU,aAAaA,0BAAS,MAAM;CAE1D,MAAM,iCAAwB,EAAE;CAChC,MAAM,qCAAoC;CAE1C,MAAM,gDAAuC;AAC3C,SAAO,MAAM,eAAe,MAAM;GAClC;AAEF,sBACQ,MAAM,UACX,YAAY;EACX,MAAM,kBAAkB,IAAI,IAAI,QAAQ,KAAK,WAAW,SAAS,OAAO,CAAC,CAAC;AAC1E,SAAO,iBAAiB,OAAO,eAAe,QAC3C,kBAAkB,CAAC,gBAAgB,IAAI,SAAS,cAAc,CAAC,CACjE;GAEJ;CAED,SAAS,kBAAkB,OAAe;EACxC,MAAM,aAAa,WAAmB,SAAS,OAAO,KAAK;AAC3D,SACG,MAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,IAC/C,OAAO,eAAe,KAAK,UAAU;;CAIzC,SAAS,gBAAgB,QAAgB;AACvC,MAAI,CAAC,sBAAsB,MACzB;AAEF,MAAI,MAAM,YAAY,OAAO,QAC3B,mBAAkB;MAElB,sBAAqB,QAAQ;;CAIjC,SAAS,gBAAgB,OAAe;AACtC,MAAI,sBAAsB,MACxB,KAAI,SAAS,MAAM,SAAS,GAAG;AAC7B,OAAI,kBAAkB,MAAM,EAAE;AAC5B,WAAO,iBAAiB,OAAO,eAAe,QAC3C,kBAAkB,SAAS,cAAc,KAAK,OAAO,cACvD;AACD;;GAEF,MAAM,YAAY;KACf,WAAW,MAAM,QAAQ;KACzB,WAAW,MAAM,QAAQ;IAC1B,SAAS;KACR,WAAW,MAAM,WAAW;IAC9B;AACD,OAAI,OAAO,eAAe,UAAU,kBAAkB,MACpD,QAAO,eAAe,kBAAkB,SAAS;OAEjD,QAAO,eAAe,KAAK,UAAU;aAGnC,MAAM,SACR,QAAO,eAAe,SAAS,kBAAkB;OAC5C;GACL,MAAM,iBAAiB,qBAAqB;AAC5C,UAAO,eAAe,SAAS;AAC/B,OAAI,kBAAkB,eAAe,QACnC,QAAO,eAAe,KAAK,eAAe;;;CAOpD,SAAS,gBAAgB,QAAgB;AACvC,MACE,CAAC,sBAAsB,SACvB,CAAC,UACD,CAAC,OAAO,WACP,OAAO,WACN,MAAM,kBACN,OAAO,eAAe,SAAS,OAAO,CAExC;EAEF,MAAM,MAAM,OAAO,eAAe,WAC/B,OAAO,SAAS,GAAG,KAAK,SAAS,OAAO,CAC1C;AACD,MAAI,CAAC,KAAK;AACR,UAAO,eAAe,OAAO,KAAK,EAAE;AACpC,qBAAkB;;;CAItB,SAAS,oBAAoB;AAC3B,MAAI,sBAAsB,OAAO;AAC/B,UAAO,eAAe,SAAS;AAC/B,qBAAkB,QAAQ;;;AAI9B,QAAO;EACL;EACA;EACA;EACA;EACD"}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
|
||||
//#region ../../packages/components/select-v2/src/useOption.ts
|
||||
function useOption(props, { emit }) {
|
||||
return {
|
||||
hoverItem: () => {
|
||||
if (!props.disabled) emit("hover", props.index);
|
||||
},
|
||||
selectOptionClick: () => {
|
||||
if (!props.disabled) emit("select", props.item, props.index);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
exports.useOption = useOption;
|
||||
//# sourceMappingURL=useOption.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useOption.js","names":[],"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"],"mappings":";;;AAEA,SAAgB,UACd,OACA,EAAE,QACF;AACA,QAAO;EACL,iBAAiB;AACf,OAAI,CAAC,MAAM,SACT,MAAK,SAAS,MAAM,MAAM;;EAG9B,yBAAyB;AACvB,OAAI,CAAC,MAAM,SACT,MAAK,UAAU,MAAM,MAAM,MAAM,MAAM;;EAG5C"}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import "./token.js";
|
||||
import "vue";
|
||||
|
||||
//#region ../../packages/components/select-v2/src/useProps.d.ts
|
||||
interface Props {
|
||||
label?: string;
|
||||
value?: string;
|
||||
disabled?: string;
|
||||
options?: string;
|
||||
}
|
||||
//#endregion
|
||||
export { Props };
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/useProps.ts
|
||||
const defaultProps = {
|
||||
label: "label",
|
||||
value: "value",
|
||||
disabled: "disabled",
|
||||
options: "options"
|
||||
};
|
||||
function useProps(props) {
|
||||
const aliasProps = (0, vue.ref)({
|
||||
...defaultProps,
|
||||
...props.props
|
||||
});
|
||||
let cache = { ...props.props };
|
||||
(0, vue.watch)(() => props.props, (val) => {
|
||||
if (!(0, lodash_unified.isEqual)(val, cache)) {
|
||||
aliasProps.value = {
|
||||
...defaultProps,
|
||||
...val
|
||||
};
|
||||
cache = { ...val };
|
||||
}
|
||||
}, { deep: true });
|
||||
const getLabel = (option) => (0, lodash_unified.get)(option, aliasProps.value.label);
|
||||
const getValue = (option) => (0, lodash_unified.get)(option, aliasProps.value.value);
|
||||
const getDisabled = (option) => (0, lodash_unified.get)(option, aliasProps.value.disabled);
|
||||
const getOptions = (option) => (0, lodash_unified.get)(option, aliasProps.value.options);
|
||||
return {
|
||||
aliasProps,
|
||||
getLabel,
|
||||
getValue,
|
||||
getDisabled,
|
||||
getOptions
|
||||
};
|
||||
}
|
||||
|
||||
//#endregion
|
||||
exports.defaultProps = defaultProps;
|
||||
exports.useProps = useProps;
|
||||
//# sourceMappingURL=useProps.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"useProps.js","names":[],"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"],"mappings":";;;;;;AAaA,MAAa,eAAgC;CAC3C,OAAO;CACP,OAAO;CACP,UAAU;CACV,SAAS;CACV;AAED,SAAgB,SAAS,OAAqC;CAC5D,MAAM,0BAAiB;EAAE,GAAG;EAAc,GAAG,MAAM;EAAO,CAAC;CAC3D,IAAI,QAAQ,EAAE,GAAG,MAAM,OAAO;AAE9B,sBACQ,MAAM,QACX,QAAQ;AAEP,MAAI,6BAAS,KAAK,MAAM,EAAE;AACxB,cAAW,QAAQ;IAAE,GAAG;IAAc,GAAG;IAAK;AAC9C,WAAQ,EAAE,GAAG,KAAK;;IAGtB,EAAE,MAAM,MAAM,CACf;CAED,MAAM,YAAY,mCAAuB,QAAQ,WAAW,MAAM,MAAM;CACxE,MAAM,YAAY,mCAAuB,QAAQ,WAAW,MAAM,MAAM;CACxE,MAAM,eAAe,mCAAuB,QAAQ,WAAW,MAAM,SAAS;CAC9E,MAAM,cAAc,mCAAuB,QAAQ,WAAW,MAAM,QAAQ;AAE5E,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}
|
||||
+650
@@ -0,0 +1,650 @@
|
||||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
||||
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
|
||||
const require_aria = require('../../../constants/aria.js');
|
||||
const require_event = require('../../../constants/event.js');
|
||||
const require_form = require('../../../constants/form.js');
|
||||
const require_event$1 = require('../../../utils/dom/event.js');
|
||||
const require_types = require('../../../utils/types.js');
|
||||
const require_strings = require('../../../utils/strings.js');
|
||||
const require_error = require('../../../utils/error.js');
|
||||
const require_icon = require('../../../utils/vue/icon.js');
|
||||
const require_index = require('../../../hooks/use-locale/index.js');
|
||||
const require_index$1 = require('../../../hooks/use-namespace/index.js');
|
||||
const require_index$2 = require('../../../hooks/use-focus-controller/index.js');
|
||||
const require_index$3 = require('../../../hooks/use-composition/index.js');
|
||||
const require_index$4 = require('../../../hooks/use-empty-values/index.js');
|
||||
const require_use_form_common_props = require('../../form/src/hooks/use-form-common-props.js');
|
||||
const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
|
||||
const require_useProps = require('./useProps.js');
|
||||
const require_useAllowCreate = require('./useAllowCreate.js');
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
|
||||
//#region ../../packages/components/select-v2/src/useSelect.ts
|
||||
const useSelect = (props, emit) => {
|
||||
const { t } = require_index.useLocale();
|
||||
const slots = (0, vue.useSlots)();
|
||||
const nsSelect = require_index$1.useNamespace("select");
|
||||
const nsInput = require_index$1.useNamespace("input");
|
||||
const { form: elForm, formItem: elFormItem } = require_use_form_item.useFormItem();
|
||||
const { inputId } = require_use_form_item.useFormItemInputId(props, { formItemContext: elFormItem });
|
||||
const { aliasProps, getLabel, getValue, getDisabled, getOptions } = require_useProps.useProps(props);
|
||||
const { valueOnClear, isEmptyValue } = require_index$4.useEmptyValues(props);
|
||||
const states = (0, 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 = (0, vue.ref)(-1);
|
||||
const debouncing = (0, vue.ref)(false);
|
||||
const selectRef = (0, vue.ref)();
|
||||
const selectionRef = (0, vue.ref)();
|
||||
const tooltipRef = (0, vue.ref)();
|
||||
const tagTooltipRef = (0, vue.ref)();
|
||||
const inputRef = (0, vue.ref)();
|
||||
const prefixRef = (0, vue.ref)();
|
||||
const suffixRef = (0, vue.ref)();
|
||||
const menuRef = (0, vue.ref)();
|
||||
const tagMenuRef = (0, vue.ref)();
|
||||
const collapseItemRef = (0, vue.ref)();
|
||||
const { isComposing, handleCompositionStart, handleCompositionEnd, handleCompositionUpdate } = require_index$3.useComposition({ afterComposition: (e) => onInput(e) });
|
||||
const selectDisabled = require_use_form_common_props.useFormDisabled();
|
||||
const { wrapperRef, isFocused, handleBlur } = require_index$2.useFocusController(inputRef, {
|
||||
disabled: selectDisabled,
|
||||
afterFocus() {
|
||||
if (props.automaticDropdown && !expanded.value) {
|
||||
expanded.value = true;
|
||||
states.menuVisibleOnFocus = true;
|
||||
}
|
||||
},
|
||||
beforeBlur(event) {
|
||||
return tooltipRef.value?.isFocusInsideContent(event) || tagTooltipRef.value?.isFocusInsideContent(event);
|
||||
},
|
||||
afterBlur() {
|
||||
expanded.value = false;
|
||||
states.menuVisibleOnFocus = false;
|
||||
if (props.validateEvent) elFormItem?.validate?.("blur").catch((err) => require_error.debugWarn(err));
|
||||
}
|
||||
});
|
||||
const allOptions = (0, vue.computed)(() => filterOptions(""));
|
||||
const hasOptions = (0, vue.computed)(() => {
|
||||
if (props.loading) return false;
|
||||
return props.options.length > 0 || states.createdOptions.length > 0;
|
||||
});
|
||||
const filteredOptions = (0, vue.ref)([]);
|
||||
const expanded = (0, vue.ref)(false);
|
||||
const needStatusIcon = (0, vue.computed)(() => elForm?.statusIcon ?? false);
|
||||
const popupHeight = (0, vue.computed)(() => {
|
||||
const totalHeight = filteredOptions.value.length * props.itemHeight;
|
||||
return totalHeight > props.height ? props.height : totalHeight;
|
||||
});
|
||||
const hasModelValue = (0, vue.computed)(() => {
|
||||
return props.multiple ? (0, _vue_shared.isArray)(props.modelValue) && props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
|
||||
});
|
||||
const showClearBtn = (0, vue.computed)(() => {
|
||||
return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
|
||||
});
|
||||
const iconComponent = (0, vue.computed)(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
|
||||
const iconReverse = (0, vue.computed)(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
|
||||
const validateState = (0, vue.computed)(() => elFormItem?.validateState || "");
|
||||
const validateIcon = (0, vue.computed)(() => {
|
||||
if (!validateState.value) return;
|
||||
return require_icon.ValidateComponentsMap[validateState.value];
|
||||
});
|
||||
const debounce = (0, vue.computed)(() => props.remote ? props.debounce : 0);
|
||||
const isRemoteSearchEmpty = (0, vue.computed)(() => props.remote && !states.inputValue && !hasOptions.value);
|
||||
const emptyText = (0, 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 = (0, vue.computed)(() => props.filterable && (0, _vue_shared.isFunction)(props.filterMethod));
|
||||
const isRemoteMethodValid = (0, vue.computed)(() => props.filterable && props.remote && (0, _vue_shared.isFunction)(props.remoteMethod));
|
||||
const filterOptions = (query) => {
|
||||
const regexp = new RegExp(require_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 ((0, _vue_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 = (0, vue.computed)(() => {
|
||||
const valueMap = /* @__PURE__ */ new Map();
|
||||
allOptions.value.forEach((option, index) => {
|
||||
valueMap.set(getValueKey(getValue(option)), {
|
||||
option,
|
||||
index
|
||||
});
|
||||
});
|
||||
return valueMap;
|
||||
});
|
||||
const filteredOptionsValueMap = (0, vue.computed)(() => {
|
||||
const valueMap = /* @__PURE__ */ new Map();
|
||||
filteredOptions.value.forEach((option, index) => {
|
||||
valueMap.set(getValueKey(getValue(option)), {
|
||||
option,
|
||||
index
|
||||
});
|
||||
});
|
||||
return valueMap;
|
||||
});
|
||||
const optionsAllDisabled = (0, vue.computed)(() => filteredOptions.value.every((option) => getDisabled(option)));
|
||||
const selectSize = require_use_form_common_props.useFormSize();
|
||||
const collapseTagSize = (0, vue.computed)(() => "small" === selectSize.value ? "small" : "default");
|
||||
const calculatePopperSize = () => {
|
||||
if (require_types.isNumber(props.fitInputWidth)) {
|
||||
popperSize.value = props.fitInputWidth;
|
||||
return;
|
||||
}
|
||||
const width = selectRef.value?.offsetWidth || 200;
|
||||
if (!props.fitInputWidth && hasOptions.value) (0, vue.nextTick)(() => {
|
||||
popperSize.value = Math.max(width, calculateLabelMaxWidth());
|
||||
});
|
||||
else popperSize.value = width;
|
||||
};
|
||||
const calculateLabelMaxWidth = () => {
|
||||
const ctx = document.createElement("canvas").getContext("2d");
|
||||
const selector = nsSelect.be("dropdown", "item");
|
||||
const dropdownItemEl = (menuRef.value?.listRef?.innerRef || document).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`), "")}`;
|
||||
return filteredOptions.value.reduce((max, option) => {
|
||||
const metrics = ctx.measureText(getLabel(option));
|
||||
return Math.max(metrics.width, max);
|
||||
}, 0) + padding;
|
||||
};
|
||||
const getGapWidth = () => {
|
||||
if (!selectionRef.value) return 0;
|
||||
const style = window.getComputedStyle(selectionRef.value);
|
||||
return Number.parseFloat(style.gap || "6px");
|
||||
};
|
||||
const tagStyle = (0, vue.computed)(() => {
|
||||
const gapWidth = getGapWidth();
|
||||
const inputSlotWidth = props.filterable ? gapWidth + require_form.MINIMUM_INPUT_WIDTH : 0;
|
||||
return { maxWidth: `${collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth}px` };
|
||||
});
|
||||
const collapseTagStyle = (0, vue.computed)(() => {
|
||||
return { maxWidth: `${states.selectionWidth}px` };
|
||||
});
|
||||
const shouldShowPlaceholder = (0, vue.computed)(() => {
|
||||
if ((0, _vue_shared.isArray)(props.modelValue)) return props.modelValue.length === 0 && !states.inputValue;
|
||||
return props.filterable ? !states.inputValue : true;
|
||||
});
|
||||
const currentPlaceholder = (0, vue.computed)(() => {
|
||||
const _placeholder = props.placeholder ?? t("el.select.placeholder");
|
||||
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
|
||||
});
|
||||
const popperRef = (0, vue.computed)(() => tooltipRef.value?.popperRef?.contentRef);
|
||||
const indexRef = (0, 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 = (0, vue.computed)({
|
||||
get() {
|
||||
return expanded.value && (props.loading || !isRemoteSearchEmpty.value || props.remote && !!slots.empty) && (!debouncing.value || !require_types.isEmpty(states.previousQuery) || hasOptions.value);
|
||||
},
|
||||
set(val) {
|
||||
expanded.value = val;
|
||||
}
|
||||
});
|
||||
const showTagList = (0, vue.computed)(() => {
|
||||
if (!props.multiple) return [];
|
||||
return props.collapseTags ? states.cachedOptions.slice(0, props.maxCollapseTags) : states.cachedOptions;
|
||||
});
|
||||
const collapseTagList = (0, vue.computed)(() => {
|
||||
if (!props.multiple) return [];
|
||||
return props.collapseTags ? states.cachedOptions.slice(props.maxCollapseTags) : [];
|
||||
});
|
||||
const { createNewOption, removeNewOption, selectNewOption, clearAllNewOption } = require_useAllowCreate.useAllowCreate(props, states);
|
||||
const toggleMenu = (event) => {
|
||||
if (selectDisabled.value || props.filterable && expanded.value && event && !suffixRef.value?.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);
|
||||
(0, vue.nextTick)(() => {
|
||||
handleQueryChange(states.inputValue);
|
||||
});
|
||||
};
|
||||
const debouncedOnInputChange = (0, _vueuse_core.useDebounceFn)(() => {
|
||||
onInputChange();
|
||||
debouncing.value = false;
|
||||
}, debounce);
|
||||
const handleQueryChange = (val) => {
|
||||
if (states.previousQuery === val || isComposing.value) return;
|
||||
states.previousQuery = val;
|
||||
if (props.filterable && (0, _vue_shared.isFunction)(props.filterMethod)) props.filterMethod(val);
|
||||
else if (props.filterable && props.remote && (0, _vue_shared.isFunction)(props.remoteMethod)) props.remoteMethod(val);
|
||||
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptions.value.length) (0, vue.nextTick)(checkDefaultFirstOption);
|
||||
else (0, vue.nextTick)(updateHoveringIndex);
|
||||
};
|
||||
/**
|
||||
* find and highlight first option as default selected
|
||||
* @remark
|
||||
* - if the first option in dropdown list is user-created,
|
||||
* it would be at the end of the optionsArray
|
||||
* so find it and set hover.
|
||||
* (NOTE: there must be only one user-created option in dropdown list with query)
|
||||
* - if there's no user-created option in list, just find the first one as usual
|
||||
* (NOTE: exclude options that are disabled or in disabled-group)
|
||||
*/
|
||||
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 (!(0, lodash_unified.isEqual)(props.modelValue, val)) emit(require_event.CHANGE_EVENT, val);
|
||||
};
|
||||
const update = (val) => {
|
||||
emit(require_event.UPDATE_MODEL_EVENT, val);
|
||||
emitChange(val);
|
||||
states.previousValue = props.multiple ? String(val) : val;
|
||||
(0, vue.nextTick)(() => {
|
||||
if (props.multiple && (0, _vue_shared.isArray)(props.modelValue)) {
|
||||
const cachedOptions = states.cachedOptions.slice();
|
||||
const selectedOptions = props.modelValue.map((value) => getOption(value, cachedOptions));
|
||||
if (!(0, lodash_unified.isEqual)(states.cachedOptions, selectedOptions)) states.cachedOptions = selectedOptions;
|
||||
} else initStates(true);
|
||||
});
|
||||
};
|
||||
const getValueIndex = (arr = [], value) => {
|
||||
if (!(0, _vue_shared.isObject)(value)) return arr.indexOf(value);
|
||||
const valueKey = props.valueKey;
|
||||
let index = -1;
|
||||
arr.some((item, i) => {
|
||||
if ((0, lodash_unified.get)(item, valueKey) === (0, lodash_unified.get)(value, valueKey)) {
|
||||
index = i;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return index;
|
||||
};
|
||||
const getValueKey = (item) => {
|
||||
return (0, _vue_shared.isObject)(item) ? (0, lodash_unified.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 = () => {
|
||||
tooltipRef.value?.updatePopper?.();
|
||||
};
|
||||
const updateTagTooltip = () => {
|
||||
tagTooltipRef.value?.updatePopper?.();
|
||||
};
|
||||
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 && (option.created || !props.reserveKeyword)) states.inputValue = "";
|
||||
} else {
|
||||
states.selectedLabel = getLabel(option);
|
||||
!(0, lodash_unified.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 = () => {
|
||||
inputRef.value?.focus();
|
||||
};
|
||||
const blur = () => {
|
||||
if (expanded.value) {
|
||||
expanded.value = false;
|
||||
(0, vue.nextTick)(() => inputRef.value?.blur());
|
||||
return;
|
||||
}
|
||||
inputRef.value?.blur();
|
||||
};
|
||||
const handleEsc = () => {
|
||||
if (states.inputValue.length > 0) states.inputValue = "";
|
||||
else expanded.value = false;
|
||||
};
|
||||
const getLastNotDisabledIndex = (value) => (0, lodash_unified.findLastIndex)(value, (it) => !states.cachedOptions.some((option) => getValue(option) === it && getDisabled(option)));
|
||||
const handleDel = (e) => {
|
||||
const code = require_event$1.getEventCode(e);
|
||||
if (!props.multiple) return;
|
||||
if (code === require_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 ((0, _vue_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 (require_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 ?? -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) handleBlur(new FocusEvent("blur", event));
|
||||
};
|
||||
const handleMenuEnter = () => {
|
||||
states.isBeforeHide = false;
|
||||
return (0, 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((option) => getValueKey(getValue(option)) === selectValue);
|
||||
if (option) return option;
|
||||
}
|
||||
return {
|
||||
[aliasProps.value.value]: value,
|
||||
[aliasProps.value.label]: value
|
||||
};
|
||||
};
|
||||
const getIndex = (option) => allOptionsValueMap.value.get(getValue(option))?.index ?? -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();
|
||||
};
|
||||
(0, vue.watch)(() => props.fitInputWidth, () => {
|
||||
calculatePopperSize();
|
||||
});
|
||||
(0, vue.watch)(expanded, (val) => {
|
||||
if (val) {
|
||||
if (!props.persistent) calculatePopperSize();
|
||||
handleQueryChange("");
|
||||
} else {
|
||||
states.inputValue = "";
|
||||
states.previousQuery = null;
|
||||
states.isBeforeHide = true;
|
||||
states.menuVisibleOnFocus = false;
|
||||
createNewOption("");
|
||||
}
|
||||
});
|
||||
(0, vue.watch)(() => props.modelValue, (val, oldVal) => {
|
||||
if (!val || (0, _vue_shared.isArray)(val) && val.length === 0 || props.multiple && !(0, lodash_unified.isEqual)(val.toString(), states.previousValue) || !props.multiple && getValueKey(val) !== getValueKey(states.previousValue)) initStates(true);
|
||||
if (!(0, lodash_unified.isEqual)(val, oldVal) && props.validateEvent) elFormItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
|
||||
}, { deep: true });
|
||||
(0, vue.watch)(() => props.options, () => {
|
||||
const input = inputRef.value;
|
||||
if (!input || input && document.activeElement !== input) initStates();
|
||||
}, {
|
||||
deep: true,
|
||||
flush: "post"
|
||||
});
|
||||
(0, vue.watch)(() => filteredOptions.value, () => {
|
||||
calculatePopperSize();
|
||||
return menuRef.value && (0, vue.nextTick)(menuRef.value.resetScrollTop);
|
||||
});
|
||||
(0, vue.watchEffect)(() => {
|
||||
if (states.isBeforeHide) return;
|
||||
updateOptions();
|
||||
});
|
||||
(0, vue.watchEffect)(() => {
|
||||
const { valueKey, options } = props;
|
||||
const duplicateValue = /* @__PURE__ */ new Map();
|
||||
for (const item of options) {
|
||||
const optionValue = getValue(item);
|
||||
let v = optionValue;
|
||||
if ((0, _vue_shared.isObject)(v)) v = (0, lodash_unified.get)(optionValue, valueKey);
|
||||
if (duplicateValue.get(v)) {
|
||||
require_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);
|
||||
}
|
||||
});
|
||||
(0, vue.onMounted)(() => {
|
||||
initStates();
|
||||
});
|
||||
(0, _vueuse_core.useResizeObserver)(selectRef, handleResize);
|
||||
(0, _vueuse_core.useResizeObserver)(selectionRef, resetSelectionWidth);
|
||||
(0, _vueuse_core.useResizeObserver)(wrapperRef, updateTooltip);
|
||||
(0, _vueuse_core.useResizeObserver)(tagMenuRef, updateTagTooltip);
|
||||
(0, _vueuse_core.useResizeObserver)(collapseItemRef, resetCollapseItemWidth);
|
||||
let stop;
|
||||
(0, vue.watch)(() => dropdownMenuVisible.value, (newVal) => {
|
||||
if (newVal) stop = (0, _vueuse_core.useResizeObserver)(menuRef, updateTooltip).stop;
|
||||
else {
|
||||
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
|
||||
};
|
||||
};
|
||||
|
||||
//#endregion
|
||||
exports.default = useSelect;
|
||||
//# sourceMappingURL=useSelect.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user