index.js 9.8 KB

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