mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-14 17:01:19 +08:00
3aeeeb2aed
* refactor: transfer、tooltip (#4306) * refactor(transfer): use composition api (#4135) * refactor(transfer): use composition api * fix: remove console * refactor(tooltip): use composition api (#4059) * refactor(tooltip): use composition api * chore: useConfigInject * fix: remove useless * style: format code * refactor: transfer * refactor: tooltip Co-authored-by: ajuner <106791576@qq.com> * Refactor mentions (#4341) * refactor(mentions): use compositionAPI (#4313) * refactor: mentions * refactor: mentions Co-authored-by: ajuner <106791576@qq.com> * Refactor progress (#4358) * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> * docs: add changelog * refactor: tree * refactor: tree * style: lint * refactor: tree * 热factor: tree * refactor: tree * refactor: tree * refactor: tree * refactor: directory tree * refactor: tree * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * style: lint format * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * fix: upload ts error * fix: update tree title render & switchIcon * test: update tree test * feat: add VirtualScroll tree * refactor: datePicker & calendar & trigger (#4522) * style: update * test: update calendar test * test: update test * test: update test * refactor: slider * feat: update slider css * refactor: slider to ts * refactor: slider to ts * perf: update default itemHeight * test: update * fix: uddate ts type * fix: update skeleton * fix: update skeleton * refactor: update vc-pagination * refactor: pagination * refactor: timeline * refactor: steps * refactor: collapse * refactor: collapse * refactor: popconfirm * refactor: popover * refactor: dropdown * doc: merge doc * chore: vite for dev (#4602) * style: js to jsx * doc: add site * style: lint * style: format ts type * doc: update * style: format code * style: format site * doc: update * style: dmeo * style: format scripts * chore: remove sub-modules * chore: update vite * site: add site build * test: update snap * doc(select): add tip (#4606) * refactor: table (#4641) * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * fix: column not pass to cell * doc: uppate table * fix: update bodyCell headerCell * doc: remove examples * refactor: table * fix: table title not work * fix: table selection * fix: table checkStrictly * refactor: table * fix: table template error * feat: table support summary * test: update snap * perf: table * docs(table): fix ajax demo (#4639) * test: update table * refactor: remove old table * doc: update table doc * doc: update doc * doc: update select * doc: update summary Co-authored-by: John <John60676@qq.com> * doc: update doc * fix: menu arrow not work * test: update * doc: add next site * style: format * doc: update * doc: update site script * fix: expand icon not fixed * feat: use renderSlot * test: update table snap * feat: confirm support reactively * feat: configProvider.config * feat: message support configprovider.config * feat: notification support configprovider.config * doc: update doc * fix: typescript compile error * style: add import eslint * doc: update demo * chore: set transpileOnly true * style: fix eslint error * test: update snap * doc: update * test: mock date * test: update snap * chore: remove gulp-typescript (#4675) * feat: V3 form (#4678) * chore: update husky * perf: update formItem * perf: useInjectFormItemContext * fix: table ts error * doc: add Customized Form Controls demo * feat: export useInjectFormItemContext * doc: update form doc * doc: update doc * doc: update doc * feat: autocomplete support option slot * doc: update * feat: add form item rest * style: remove omit.js * refactor: autocomplete * doc: add changelog to site * doc: update site anchor * doc: update doc layout * test: update table test * doc: update * chore: udpate gulp script * chore: udpate gulp script * doc: add changelog * doc: update * test: ignore some test wait vue-test-utils * fix: form id error #4582 close #4582 * doc: add select Responsive demo * doc: remove temp doc Co-authored-by: ajuner <106791576@qq.com> Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
229 lines
6.1 KiB
Vue
229 lines
6.1 KiB
Vue
import type { App, PropType, Plugin, ExtractPropTypes } from 'vue';
|
|
import { watch, ref, onMounted, defineComponent, nextTick } from 'vue';
|
|
import classNames from '../_util/classNames';
|
|
import PropTypes from '../_util/vue-types';
|
|
import VcMentions from '../vc-mentions';
|
|
import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
import { flattenChildren, getOptionProps } from '../_util/props-util';
|
|
import { useInjectFormItemContext } from '../form/FormItemContext';
|
|
import omit from '../_util/omit';
|
|
|
|
const { Option } = VcMentions;
|
|
|
|
interface MentionsConfig {
|
|
prefix?: string | string[];
|
|
split?: string;
|
|
}
|
|
|
|
export interface MentionsOptionProps {
|
|
value: string;
|
|
disabled?: boolean;
|
|
label?: string | number | ((o: MentionsOptionProps) => any);
|
|
[key: string]: any;
|
|
}
|
|
|
|
interface MentionsEntity {
|
|
prefix: string;
|
|
value: string;
|
|
}
|
|
|
|
export type MentionPlacement = 'top' | 'bottom';
|
|
|
|
const getMentions = (value = '', config: MentionsConfig): MentionsEntity[] => {
|
|
const { prefix = '@', split = ' ' } = config || {};
|
|
const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
|
|
|
|
return value
|
|
.split(split)
|
|
.map((str = ''): MentionsEntity | null => {
|
|
let hitPrefix: string | null = null;
|
|
|
|
prefixList.some(prefixStr => {
|
|
const startStr = str.slice(0, prefixStr.length);
|
|
if (startStr === prefixStr) {
|
|
hitPrefix = prefixStr;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
if (hitPrefix !== null) {
|
|
return {
|
|
prefix: hitPrefix,
|
|
value: str.slice((hitPrefix as string).length),
|
|
};
|
|
}
|
|
return null;
|
|
})
|
|
.filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
|
|
};
|
|
|
|
const mentionsProps = {
|
|
...baseMentionsProps,
|
|
loading: PropTypes.looseBool,
|
|
onFocus: {
|
|
type: Function as PropType<(e: FocusEvent) => void>,
|
|
},
|
|
onBlur: {
|
|
type: Function as PropType<(e: FocusEvent) => void>,
|
|
},
|
|
onSelect: {
|
|
type: Function as PropType<(option: MentionsOptionProps, prefix: string) => void>,
|
|
},
|
|
onChange: {
|
|
type: Function as PropType<(text: string) => void>,
|
|
},
|
|
notFoundContent: PropTypes.any,
|
|
defaultValue: String,
|
|
id: String,
|
|
};
|
|
|
|
export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
|
|
|
|
const Mentions = defineComponent({
|
|
name: 'AMentions',
|
|
inheritAttrs: false,
|
|
props: mentionsProps,
|
|
getMentions,
|
|
Option,
|
|
emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
|
|
slots: ['notFoundContent', 'option'],
|
|
setup(props, { slots, emit, attrs, expose }) {
|
|
const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);
|
|
const focused = ref(false);
|
|
const vcMentions = ref(null);
|
|
const value = ref(props.value ?? props.defaultValue ?? '');
|
|
const formItemContext = useInjectFormItemContext();
|
|
watch(
|
|
() => props.value,
|
|
val => {
|
|
value.value = val;
|
|
},
|
|
);
|
|
const handleFocus = (e: FocusEvent) => {
|
|
focused.value = true;
|
|
emit('focus', e);
|
|
};
|
|
|
|
const handleBlur = (e: FocusEvent) => {
|
|
focused.value = false;
|
|
emit('blur', e);
|
|
formItemContext.onFieldBlur();
|
|
};
|
|
|
|
const handleSelect = (...args: [MentionsOptionProps, string]) => {
|
|
emit('select', ...args);
|
|
focused.value = true;
|
|
};
|
|
|
|
const handleChange = (val: string) => {
|
|
if (props.value === undefined) {
|
|
value.value = val;
|
|
}
|
|
emit('update:value', val);
|
|
emit('change', val);
|
|
formItemContext.onFieldChange();
|
|
};
|
|
|
|
const getNotFoundContent = () => {
|
|
const notFoundContent = props.notFoundContent;
|
|
if (notFoundContent !== undefined) {
|
|
return notFoundContent;
|
|
}
|
|
if (slots.notFoundContent) {
|
|
return slots.notFoundContent();
|
|
}
|
|
return renderEmpty.value('Select');
|
|
};
|
|
|
|
const getOptions = () => {
|
|
return flattenChildren(slots.default?.() || []).map(item => {
|
|
return { ...getOptionProps(item), label: (item.children as any)?.default?.() };
|
|
});
|
|
};
|
|
|
|
const focus = () => {
|
|
(vcMentions.value as HTMLTextAreaElement).focus();
|
|
};
|
|
|
|
const blur = () => {
|
|
(vcMentions.value as HTMLTextAreaElement).blur();
|
|
};
|
|
|
|
expose({ focus, blur });
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (process.env.NODE_ENV === 'test') {
|
|
if (props.autofocus) {
|
|
focus();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
const {
|
|
disabled,
|
|
getPopupContainer,
|
|
rows = 1,
|
|
id = formItemContext.id.value,
|
|
...restProps
|
|
} = props;
|
|
const { class: className, ...otherAttrs } = attrs;
|
|
const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']);
|
|
|
|
const mergedClassName = classNames(className, {
|
|
[`${prefixCls.value}-disabled`]: disabled,
|
|
[`${prefixCls.value}-focused`]: focused.value,
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
|
});
|
|
|
|
const mentionsProps = {
|
|
prefixCls: prefixCls.value,
|
|
...otherProps,
|
|
disabled,
|
|
direction: direction.value,
|
|
filterOption: props.filterOption,
|
|
getPopupContainer,
|
|
options: props.options || getOptions(),
|
|
class: mergedClassName,
|
|
...otherAttrs,
|
|
rows,
|
|
onChange: handleChange,
|
|
onSelect: handleSelect,
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
ref: vcMentions,
|
|
value: value.value,
|
|
id,
|
|
};
|
|
return (
|
|
<VcMentions
|
|
{...mentionsProps}
|
|
v-slots={{ notFoundContent: getNotFoundContent, option: slots.option }}
|
|
></VcMentions>
|
|
);
|
|
};
|
|
},
|
|
});
|
|
|
|
export const MentionsOption = {
|
|
...Option,
|
|
name: 'AMentionsOption',
|
|
};
|
|
|
|
/* istanbul ignore next */
|
|
Mentions.install = function (app: App) {
|
|
app.component(Mentions.name, Mentions);
|
|
app.component(MentionsOption.name, MentionsOption);
|
|
return app;
|
|
};
|
|
|
|
export default Mentions as typeof Mentions &
|
|
Plugin & {
|
|
getMentions: typeof getMentions;
|
|
readonly Option: typeof Option;
|
|
};
|