index.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { computed, watch, shallowRef, defineComponent } from 'vue';
  13. import classNames from '../_util/classNames';
  14. import PropTypes from '../_util/vue-types';
  15. import VcMentions from '../vc-mentions';
  16. import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
  17. import useConfigInject from '../config-provider/hooks/useConfigInject';
  18. import { flattenChildren, getOptionProps } from '../_util/props-util';
  19. import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
  20. import omit from '../_util/omit';
  21. import { optionProps, optionOptions } from '../vc-mentions/src/Option';
  22. import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
  23. import useStyle from './style';
  24. import { useProvideOverride } from '../menu/src/OverrideContext';
  25. import warning from '../_util/warning';
  26. import Spin from '../spin';
  27. import devWarning from '../vc-util/devWarning';
  28. function loadingFilterOption() {
  29. return true;
  30. }
  31. const getMentions = function () {
  32. let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  33. let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  34. const {
  35. prefix = '@',
  36. split = ' '
  37. } = config;
  38. const prefixList = Array.isArray(prefix) ? prefix : [prefix];
  39. return value.split(split).map(function () {
  40. let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  41. let hitPrefix = null;
  42. prefixList.some(prefixStr => {
  43. const startStr = str.slice(0, prefixStr.length);
  44. if (startStr === prefixStr) {
  45. hitPrefix = prefixStr;
  46. return true;
  47. }
  48. return false;
  49. });
  50. if (hitPrefix !== null) {
  51. return {
  52. prefix: hitPrefix,
  53. value: str.slice(hitPrefix.length)
  54. };
  55. }
  56. return null;
  57. }).filter(entity => !!entity && !!entity.value);
  58. };
  59. export const mentionsProps = () => _extends(_extends({}, baseMentionsProps), {
  60. loading: {
  61. type: Boolean,
  62. default: undefined
  63. },
  64. onFocus: {
  65. type: Function
  66. },
  67. onBlur: {
  68. type: Function
  69. },
  70. onSelect: {
  71. type: Function
  72. },
  73. onChange: {
  74. type: Function
  75. },
  76. onPressenter: {
  77. type: Function
  78. },
  79. 'onUpdate:value': {
  80. type: Function
  81. },
  82. notFoundContent: PropTypes.any,
  83. defaultValue: String,
  84. id: String,
  85. status: String
  86. });
  87. const Mentions = defineComponent({
  88. compatConfig: {
  89. MODE: 3
  90. },
  91. name: 'AMentions',
  92. inheritAttrs: false,
  93. props: mentionsProps(),
  94. slots: Object,
  95. setup(props, _ref) {
  96. let {
  97. slots,
  98. emit,
  99. attrs,
  100. expose
  101. } = _ref;
  102. var _a, _b, _c;
  103. // =================== Warning =====================
  104. if (process.env.NODE_ENV !== 'production') {
  105. devWarning(!flattenChildren(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []).length, 'Mentions', '`Mentions.Option` is deprecated. Please use `options` instead.');
  106. }
  107. const {
  108. prefixCls,
  109. renderEmpty,
  110. direction
  111. } = useConfigInject('mentions', props);
  112. const [wrapSSR, hashId] = useStyle(prefixCls);
  113. const focused = shallowRef(false);
  114. const vcMentions = shallowRef(null);
  115. const value = shallowRef((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
  116. const formItemContext = useInjectFormItemContext();
  117. const formItemInputContext = FormItemInputContext.useInject();
  118. const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
  119. useProvideOverride({
  120. prefixCls: computed(() => `${prefixCls.value}-menu`),
  121. mode: computed(() => 'vertical'),
  122. selectable: computed(() => false),
  123. onClick: () => {},
  124. validator: _ref2 => {
  125. let {
  126. mode
  127. } = _ref2;
  128. // Warning if use other mode
  129. warning(!mode || mode === 'vertical', 'Mentions', `mode="${mode}" is not supported for Mentions's Menu.`);
  130. }
  131. });
  132. watch(() => props.value, val => {
  133. value.value = val;
  134. });
  135. const handleFocus = e => {
  136. focused.value = true;
  137. emit('focus', e);
  138. };
  139. const handleBlur = e => {
  140. focused.value = false;
  141. emit('blur', e);
  142. formItemContext.onFieldBlur();
  143. };
  144. const handleSelect = function () {
  145. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  146. args[_key] = arguments[_key];
  147. }
  148. emit('select', ...args);
  149. focused.value = true;
  150. };
  151. const handleChange = val => {
  152. if (props.value === undefined) {
  153. value.value = val;
  154. }
  155. emit('update:value', val);
  156. emit('change', val);
  157. formItemContext.onFieldChange();
  158. };
  159. const getNotFoundContent = () => {
  160. const notFoundContent = props.notFoundContent;
  161. if (notFoundContent !== undefined) {
  162. return notFoundContent;
  163. }
  164. if (slots.notFoundContent) {
  165. return slots.notFoundContent();
  166. }
  167. return renderEmpty('Select');
  168. };
  169. const getOptions = () => {
  170. var _a;
  171. return flattenChildren(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []).map(item => {
  172. var _a, _b;
  173. return _extends(_extends({}, getOptionProps(item)), {
  174. label: (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.default) === null || _b === void 0 ? void 0 : _b.call(_a)
  175. });
  176. });
  177. };
  178. const focus = () => {
  179. vcMentions.value.focus();
  180. };
  181. const blur = () => {
  182. vcMentions.value.blur();
  183. };
  184. expose({
  185. focus,
  186. blur
  187. });
  188. const mentionsfilterOption = computed(() => props.loading ? loadingFilterOption : props.filterOption);
  189. return () => {
  190. const {
  191. disabled,
  192. getPopupContainer,
  193. rows = 1,
  194. id = formItemContext.id.value
  195. } = props,
  196. restProps = __rest(props, ["disabled", "getPopupContainer", "rows", "id"]);
  197. const {
  198. hasFeedback,
  199. feedbackIcon
  200. } = formItemInputContext;
  201. const {
  202. class: className
  203. } = attrs,
  204. otherAttrs = __rest(attrs, ["class"]);
  205. const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']);
  206. const mergedClassName = classNames({
  207. [`${prefixCls.value}-disabled`]: disabled,
  208. [`${prefixCls.value}-focused`]: focused.value,
  209. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  210. }, getStatusClassNames(prefixCls.value, mergedStatus.value), !hasFeedback && className, hashId.value);
  211. const mentionsProps = _extends(_extends(_extends(_extends({
  212. prefixCls: prefixCls.value
  213. }, otherProps), {
  214. disabled,
  215. direction: direction.value,
  216. filterOption: mentionsfilterOption.value,
  217. getPopupContainer,
  218. options: props.loading ? [{
  219. value: 'ANTDV_SEARCHING',
  220. disabled: true,
  221. label: _createVNode(Spin, {
  222. "size": "small"
  223. }, null)
  224. }] : props.options || getOptions(),
  225. class: mergedClassName
  226. }), otherAttrs), {
  227. rows,
  228. onChange: handleChange,
  229. onSelect: handleSelect,
  230. onFocus: handleFocus,
  231. onBlur: handleBlur,
  232. ref: vcMentions,
  233. value: value.value,
  234. id
  235. });
  236. const mentions = _createVNode(VcMentions, _objectSpread(_objectSpread({}, mentionsProps), {}, {
  237. "dropdownClassName": hashId.value
  238. }), {
  239. notFoundContent: getNotFoundContent,
  240. option: slots.option
  241. });
  242. if (hasFeedback) {
  243. return wrapSSR(_createVNode("div", {
  244. "class": classNames(`${prefixCls.value}-affix-wrapper`, getStatusClassNames(`${prefixCls.value}-affix-wrapper`, mergedStatus.value, hasFeedback), className, hashId.value)
  245. }, [mentions, _createVNode("span", {
  246. "class": `${prefixCls.value}-suffix`
  247. }, [feedbackIcon])]));
  248. }
  249. return wrapSSR(mentions);
  250. };
  251. }
  252. });
  253. /* istanbul ignore next */
  254. export const MentionsOption = defineComponent(_extends(_extends({
  255. compatConfig: {
  256. MODE: 3
  257. }
  258. }, optionOptions), {
  259. name: 'AMentionsOption',
  260. props: optionProps
  261. }));
  262. export default _extends(Mentions, {
  263. Option: MentionsOption,
  264. getMentions,
  265. install: app => {
  266. app.component(Mentions.name, Mentions);
  267. app.component(MentionsOption.name, MentionsOption);
  268. return app;
  269. }
  270. });