index.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  4. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  5. var _excluded = ["disabled", "getPopupContainer", "rows", "id"],
  6. _excluded2 = ["class"];
  7. import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
  8. import { watch, ref, defineComponent } from 'vue';
  9. import classNames from '../_util/classNames';
  10. import PropTypes from '../_util/vue-types';
  11. import VcMentions, { Option } from '../vc-mentions';
  12. import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
  13. import useConfigInject from '../_util/hooks/useConfigInject';
  14. import { flattenChildren, getOptionProps } from '../_util/props-util';
  15. import { useInjectFormItemContext } from '../form/FormItemContext';
  16. import omit from '../_util/omit';
  17. import { optionProps } from '../vc-mentions/src/Option';
  18. var getMentions = function getMentions() {
  19. var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  20. var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  21. var _config$prefix = config.prefix,
  22. prefix = _config$prefix === void 0 ? '@' : _config$prefix,
  23. _config$split = config.split,
  24. split = _config$split === void 0 ? ' ' : _config$split;
  25. var prefixList = Array.isArray(prefix) ? prefix : [prefix];
  26. return value.split(split).map(function () {
  27. var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  28. var hitPrefix = null;
  29. prefixList.some(function (prefixStr) {
  30. var startStr = str.slice(0, prefixStr.length);
  31. if (startStr === prefixStr) {
  32. hitPrefix = prefixStr;
  33. return true;
  34. }
  35. return false;
  36. });
  37. if (hitPrefix !== null) {
  38. return {
  39. prefix: hitPrefix,
  40. value: str.slice(hitPrefix.length)
  41. };
  42. }
  43. return null;
  44. }).filter(function (entity) {
  45. return !!entity && !!entity.value;
  46. });
  47. };
  48. export var mentionsProps = function mentionsProps() {
  49. return _objectSpread(_objectSpread({}, baseMentionsProps), {}, {
  50. loading: {
  51. type: Boolean,
  52. default: undefined
  53. },
  54. onFocus: {
  55. type: Function
  56. },
  57. onBlur: {
  58. type: Function
  59. },
  60. onSelect: {
  61. type: Function
  62. },
  63. onChange: {
  64. type: Function
  65. },
  66. onPressenter: {
  67. type: Function
  68. },
  69. 'onUpdate:value': {
  70. type: Function
  71. },
  72. notFoundContent: PropTypes.any,
  73. defaultValue: String,
  74. id: String
  75. });
  76. };
  77. var Mentions = defineComponent({
  78. compatConfig: {
  79. MODE: 3
  80. },
  81. name: 'AMentions',
  82. inheritAttrs: false,
  83. props: mentionsProps(),
  84. slots: ['notFoundContent', 'option'],
  85. setup: function setup(props, _ref) {
  86. var _ref2, _props$value;
  87. var slots = _ref.slots,
  88. emit = _ref.emit,
  89. attrs = _ref.attrs,
  90. expose = _ref.expose;
  91. var _useConfigInject = useConfigInject('mentions', props),
  92. prefixCls = _useConfigInject.prefixCls,
  93. renderEmpty = _useConfigInject.renderEmpty,
  94. direction = _useConfigInject.direction;
  95. var focused = ref(false);
  96. var vcMentions = ref(null);
  97. var value = ref((_ref2 = (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : props.defaultValue) !== null && _ref2 !== void 0 ? _ref2 : '');
  98. var formItemContext = useInjectFormItemContext();
  99. watch(function () {
  100. return props.value;
  101. }, function (val) {
  102. value.value = val;
  103. });
  104. var handleFocus = function handleFocus(e) {
  105. focused.value = true;
  106. emit('focus', e);
  107. };
  108. var handleBlur = function handleBlur(e) {
  109. focused.value = false;
  110. emit('blur', e);
  111. formItemContext.onFieldBlur();
  112. };
  113. var handleSelect = function handleSelect() {
  114. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  115. args[_key] = arguments[_key];
  116. }
  117. emit.apply(void 0, ['select'].concat(args));
  118. focused.value = true;
  119. };
  120. var handleChange = function handleChange(val) {
  121. if (props.value === undefined) {
  122. value.value = val;
  123. }
  124. emit('update:value', val);
  125. emit('change', val);
  126. formItemContext.onFieldChange();
  127. };
  128. var getNotFoundContent = function getNotFoundContent() {
  129. var notFoundContent = props.notFoundContent;
  130. if (notFoundContent !== undefined) {
  131. return notFoundContent;
  132. }
  133. if (slots.notFoundContent) {
  134. return slots.notFoundContent();
  135. }
  136. return renderEmpty.value('Select');
  137. };
  138. var getOptions = function getOptions() {
  139. var _slots$default;
  140. return flattenChildren(((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || []).map(function (item) {
  141. var _item$children, _item$children$defaul;
  142. return _objectSpread(_objectSpread({}, getOptionProps(item)), {}, {
  143. label: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : (_item$children$defaul = _item$children.default) === null || _item$children$defaul === void 0 ? void 0 : _item$children$defaul.call(_item$children)
  144. });
  145. });
  146. };
  147. var focus = function focus() {
  148. vcMentions.value.focus();
  149. };
  150. var blur = function blur() {
  151. vcMentions.value.blur();
  152. };
  153. expose({
  154. focus: focus,
  155. blur: blur
  156. });
  157. return function () {
  158. var _classNames;
  159. var disabled = props.disabled,
  160. getPopupContainer = props.getPopupContainer,
  161. _props$rows = props.rows,
  162. rows = _props$rows === void 0 ? 1 : _props$rows,
  163. _props$id = props.id,
  164. id = _props$id === void 0 ? formItemContext.id.value : _props$id,
  165. restProps = _objectWithoutProperties(props, _excluded);
  166. var className = attrs.class,
  167. otherAttrs = _objectWithoutProperties(attrs, _excluded2);
  168. var otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']);
  169. var mergedClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls.value, "-focused"), focused.value), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames));
  170. var mentionsProps = _objectSpread(_objectSpread(_objectSpread({
  171. prefixCls: prefixCls.value
  172. }, otherProps), {}, {
  173. disabled: disabled,
  174. direction: direction.value,
  175. filterOption: props.filterOption,
  176. getPopupContainer: getPopupContainer,
  177. options: props.options || getOptions(),
  178. class: mergedClassName
  179. }, otherAttrs), {}, {
  180. rows: rows,
  181. onChange: handleChange,
  182. onSelect: handleSelect,
  183. onFocus: handleFocus,
  184. onBlur: handleBlur,
  185. ref: vcMentions,
  186. value: value.value,
  187. id: id
  188. });
  189. return _createVNode(VcMentions, mentionsProps, {
  190. notFoundContent: getNotFoundContent,
  191. option: slots.option
  192. });
  193. };
  194. }
  195. });
  196. /* istanbul ignore next */
  197. export var MentionsOption = defineComponent(_objectSpread(_objectSpread({
  198. compatConfig: {
  199. MODE: 3
  200. }
  201. }, Option), {}, {
  202. name: 'AMentionsOption',
  203. props: optionProps
  204. }));
  205. export default _extends(Mentions, {
  206. Option: MentionsOption,
  207. getMentions: getMentions,
  208. install: function install(app) {
  209. app.component(Mentions.name, Mentions);
  210. app.component(MentionsOption.name, MentionsOption);
  211. return app;
  212. }
  213. });