@yuntijs/ui 1.1.0-beta.9 → 1.2.0-beta.1

package/es/ChatItem/style.js

@@ -16,7 +16,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editing = _ref2.editing,
     time = _ref2.time,
     isLatest = _ref2.isLatest;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      /* padding-block: 8px;\n      padding-inline: 12px; */\n\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 4px;\n      padding-inline: 8px;\n\n      background-color: ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : '#F6F6F6' : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadius, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-block-start: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-block-end: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
@@ -26,13 +26,13 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex: none;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: ", ";\n            opacity: ", ";\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding-block: ", ";\n            padding-inline: 8px;\n          }\n        "])), isLatest ? 'unset' : 'none', isLatest ? 1 : 0, token.motionEaseOut, responsive.mobile, type === 'pure' ? '12px' : '6px')),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 16px;\n\n          time {\n            display: inline-block;\n            padding: 0 8px;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n            padding-inline: 8px;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: ", ";\n            opacity: ", ";\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding-block: ", ";\n            padding-inline: 8px;\n          }\n        "])), isLatest ? 'unset' : 'none', isLatest ? 1 : 0, token.motionEaseOut, responsive.mobile, type === 'pure' ? '12px' : '6px')),
     editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          padding-block: 8px 12px;\n          padding-inline: 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
     errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      "]))),
     loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), insetInline, token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            width: 100%;\n          }\n        "])), responsive.mobile)),
-    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n          margin-block-start: ", "px;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), time ? -16 : 0, responsive.mobile)),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 96%;\n          margin-block-start: ", "px;\n\n          ", " {\n            overflow-x: auto;\n          }\n        "])), time ? -16 : 0, responsive.mobile)),
     messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),
     messageExtra: cx('message-extra'),
     name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        pointer-events: none;\n\n        margin-block-end: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), token.colorTextDescription, placement === 'left' ? 'left' : 'right')

package/es/Form/collapse-list/index.js

@@ -19,7 +19,7 @@ import { CollapseGroup } from "../../CollapseGroup";
 import { FormCollapseListFieldsWatcher } from "./FieldsWatcher";
 import { useFormCollapseListHooks } from "./hooks";
 import { useStyles } from "./style";
-import { FIELD_KEY_PATH, toRowKey } from "./utils";
+import { FIELD_KEY_PATH, TEXT_INPUT_COMPOENT_TYPES, toRowKey } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Text = Typography.Text;
@@ -222,14 +222,21 @@ export var FormCollapseList = /*#__PURE__*/memo(function (_ref) {
                   chidrenProps.disabled = disabled;
                 }
                 if (readOnly === true) {
-                  return /*#__PURE__*/_jsx(Flex, {
-                    align: "center",
-                    className: cx(styles.readOnlyItem, className),
-                    children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
-                      type: "secondary",
-                      children: "-"
-                    })
-                  });
+                  var _props, _type;
+                  chidrenProps.disabled = true;
+                  if (children !== null && children !== void 0 && (_props = children.props) !== null && _props !== void 0 && _props.showCount) {
+                    chidrenProps.showCount = undefined;
+                  }
+                  if (TEXT_INPUT_COMPOENT_TYPES.includes(children === null || children === void 0 || (_type = children.type) === null || _type === void 0 ? void 0 : _type.displayName)) {
+                    return /*#__PURE__*/_jsx(Flex, {
+                      align: "center",
+                      className: cx(styles.readOnlyItem, className),
+                      children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
+                        type: "secondary",
+                        children: "-"
+                      })
+                    });
+                  }
                 }
                 return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({
                   className: className

package/es/Form/collapse-list/utils.d.ts

@@ -8,3 +8,4 @@ export type ListFieldValue<K extends string = 'children'> = {
 };
 export type FieldPath = NamePath<any>;
 export declare const toRowKey: (keyPath: number[]) => string;
+export declare const TEXT_INPUT_COMPOENT_TYPES: string[];

package/es/Form/collapse-list/utils.js

@@ -1,4 +1,5 @@
 export var FIELD_KEY_PATH = '__YUNTI_FORM_COLLAPSE_LIST_FIELD_KEY_PATH';
 export var toRowKey = function toRowKey(keyPath) {
   return keyPath.join('-');
-};
+};
+export var TEXT_INPUT_COMPOENT_TYPES = ['Input', 'InputNumber', 'AutoComplete', 'Mentions', 'Radio', 'RadioGroup', 'CheckBox', 'CheckBoxGroup', 'Rate', 'Slider', 'Switch'];

package/es/Mentions/index.d.ts

@@ -3,6 +3,7 @@ import { type MentionPickerPluginProps } from './plugins/mention-picker';
 import { AutoSize, MentionsEditor } from './types';
 export * from './types';
 export * from './utils';
+export { CLEAR_EDITOR_COMMAND } from 'lexical';
 export interface MentionsProps extends MentionPickerPluginProps {
     className?: string;
     classNames?: {
@@ -25,6 +26,10 @@ export interface MentionsProps extends MentionPickerPluginProps {
     onPressEnter?: (value: string, { event }: {
         event: KeyboardEvent | null;
     }) => void;
+    /**
+     * 用户输入 trigger 后的回调
+     */
+    onTrigger?: (trigger: string) => void;
     variant?: 'outlined' | 'filled' | 'borderless';
     autoSize?: AutoSize;
     code?: boolean;

package/es/Mentions/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
@@ -26,6 +27,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from "./types";
 export * from "./utils";
+export { CLEAR_EDITOR_COMMAND } from 'lexical';
 export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     classNames = _ref.classNames,
@@ -53,7 +55,8 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$code = _ref.code,
     code = _ref$code === void 0 ? false : _ref$code,
     getPopContainer = _ref.getPopContainer,
-    onPressEnter = _ref.onPressEnter;
+    onPressEnter = _ref.onPressEnter,
+    onTrigger = _ref.onTrigger;
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     componentDisabled = _ConfigProvider$useCo.componentDisabled;
   var _useStyles = useStyles({
@@ -146,6 +149,10 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
           })
         }), editable && /*#__PURE__*/_jsx(MentionPickerPlugin, {
           allowSpaces: allowSpaces,
+          onOpen: function onOpen(resolution) {
+            var _resolution$match$rep, _resolution$match;
+            return onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger((_resolution$match$rep = (_resolution$match = resolution.match) === null || _resolution$match === void 0 ? void 0 : _resolution$match.replaceableString) !== null && _resolution$match$rep !== void 0 ? _resolution$match$rep : triggers[0]);
+          },
           onSelect: onSelect,
           options: options,
           overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
@@ -162,7 +169,7 @@ export var Mentions = /*#__PURE__*/forwardRef(function (_ref, ref) {
           editable: editable
         }), /*#__PURE__*/_jsx(EditorRefPlugin, {
           editorRef: ref
-        }), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
+        }), /*#__PURE__*/_jsx(ClearEditorPlugin, {}), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
           onPressEnter: onPressEnter
         })]
       })

package/es/Mentions/plugins/mention-picker/index.d.ts

@@ -1,7 +1,8 @@
+import type { MenuOption, TypeaheadMenuPluginProps } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import React from 'react';
 import type { MentionOption } from '../../types';
 import { type MentionMenuOption } from './utils';
-export interface MentionPickerPluginProps {
+export interface MentionPickerPluginProps extends Pick<TypeaheadMenuPluginProps<MenuOption>, 'onOpen'> {
     /** The className of menu overlay */
     overlayClassName?: string;
     /** The options of menu */

package/es/Mentions/plugins/mention-picker/index.js

@@ -27,6 +27,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     _ref$preTriggerChars = _ref.preTriggerChars,
     preTriggerChars = _ref$preTriggerChars === void 0 ? PRE_TRIGGER_CHARS : _ref$preTriggerChars,
     onSelect = _ref.onSelect,
+    onOpen = _ref.onOpen,
     parent = _ref.parent;
   var _useStyles = useStyles({}),
     cx = _useStyles.cx,
@@ -169,6 +170,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
     ,
     commandPriority: COMMAND_PRIORITY_NORMAL,
     menuRenderFn: renderMenu,
+    onOpen: onOpen,
     onQueryChange: setQueryString,
     onSelectOption: onSelectOption,
     options: flatOptions,

package/es/Mentions/plugins/shift-enter-key.js

@@ -36,9 +36,20 @@ export var ShiftEnterKeyPlugin = function ShiftEnterKeyPlugin(_ref) {
         return $getRoot().getTextContent();
       });
       var value = text.replaceAll('\n\n', '\n');
-      onPressEnter(value, {
-        event: event
-      });
+      // 这里把 onPressEnter 放在下一次事件循环中触发，是为了避免跟 Lexical 还未结束的输入等事务发生冲突
+      if (window.queueMicrotask === undefined) {
+        setTimeout(function () {
+          onPressEnter(value, {
+            event: event
+          });
+        }, 0);
+      } else {
+        queueMicrotask(function () {
+          onPressEnter(value, {
+            event: event
+          });
+        });
+      }
       return true;
     },
     // 优先级要低于 MentionPickerPlugin

package/es/MonacoEditor/MonacoEditor2.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { EditorProps } from '@monaco-editor/react';
+import type { Variant } from 'antd/es/config-provider';
+export interface EditorProps2 extends EditorProps {
+    onBlur?: (input: string, event: any) => void;
+    placeholder?: string;
+    variant?: Variant;
+    enableOutline?: boolean;
+    version?: string;
+}
+export declare const MonacoEditor2: React.FC<EditorProps2>;

package/es/MonacoEditor/MonacoEditor2.js

@@ -0,0 +1,103 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["language", "theme", "placeholder", "variant", "onBlur", "enableOutline", "className", "version", "options", "onMount"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import Editor, { loader } from '@monaco-editor/react';
+import { Spin } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { useCdnFn } from "../ConfigProvider";
+import { useStyles } from "./base/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MonacoEditor2 = function MonacoEditor2(_ref) {
+  var _options$minimap;
+  var language = _ref.language,
+    theme = _ref.theme,
+    placeholder = _ref.placeholder,
+    variant = _ref.variant,
+    onBlur = _ref.onBlur,
+    enableOutline = _ref.enableOutline,
+    className = _ref.className,
+    _ref$version = _ref.version,
+    version = _ref$version === void 0 ? '0.52.2' : _ref$version,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    onMount = _ref.onMount,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+  var editorRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMounted = _useState4[0],
+    setIsMounted = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    configed = _useState6[0],
+    setConfiged = _useState6[1];
+  var _useStyles = useStyles({
+      minimapEnabled: options === null || options === void 0 || (_options$minimap = options.minimap) === null || _options$minimap === void 0 ? void 0 : _options$minimap.enabled,
+      variant: variant
+    }),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var classnames = cx(styles.base, className, {
+    've-focused': isFocus,
+    've-outline': enableOutline
+  });
+  var genCdnUrl = useCdnFn();
+  useEffect(function () {
+    loader.config({
+      paths: {
+        vs: genCdnUrl({
+          path: 'min/vs',
+          pkg: 'monaco-editor',
+          version: version
+        })
+      }
+    });
+    setConfiged(true);
+  }, [genCdnUrl, version]);
+  var handleEditorDidMount = function handleEditorDidMount(editor, monaco) {
+    editorRef.current = editor;
+    editor.onDidFocusEditorText(function () {
+      setIsFocus(true);
+    });
+    editor.onDidBlurEditorText(function (event) {
+      var _editorRef$current;
+      setIsFocus(false);
+      var value = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.getModel()) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
+      onBlur === null || onBlur === void 0 || onBlur(value !== null && value !== void 0 ? value : '', event);
+    });
+    monaco.editor.setTheme('default-theme'); // Fix: sometimes not load the default theme
+    onMount === null || onMount === void 0 || onMount(editor, monaco);
+    setIsMounted(true);
+  };
+  return /*#__PURE__*/_jsx(Spin, {
+    spinning: !configed,
+    children: configed ? /*#__PURE__*/_jsx(Editor, _objectSpread({
+      className: classnames,
+      language: language || 'text',
+      onMount: handleEditorDidMount,
+      options: _objectSpread({
+        domReadOnly: true,
+        quickSuggestions: false,
+        minimap: {
+          enabled: false
+        },
+        lineNumbersMinChars: 1,
+        // would change line num width
+        wordWrap: 'on',
+        // auto line wrap
+        unicodeHighlight: {
+          ambiguousCharacters: false
+        },
+        placeholder: placeholder
+      }, options),
+      theme: isMounted ? theme : 'default-theme' // sometimes not load the default theme
+    }, props)) : null
+  });
+};

package/es/index.d.ts

@@ -7,6 +7,7 @@ export * from './Logo';
 export * from './LogViewer';
 export * from './Mentions';
 export * from './MonacoEditor';
+export * from './MonacoEditor/MonacoEditor2';
 export * from './Page';
 export * from './ProCard';
 export * from './SelectCard';

package/es/index.js

@@ -7,6 +7,7 @@ export * from "./Logo";
 export * from "./LogViewer";
 export * from "./Mentions";
 export * from "./MonacoEditor";
+export * from "./MonacoEditor/MonacoEditor2";
 export * from "./Page";
 export * from "./ProCard";
 export * from "./SelectCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.1.0-beta.9",
+  "version": "1.2.0-beta.1",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -89,7 +89,8 @@
     "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.164.2",
     "@melloware/react-logviewer": "^5.2.0",
-    "@monaco-editor/loader": "^1.4.0",
+    "@monaco-editor/loader": "^1.5.0",
+    "@monaco-editor/react": "^4.7.0",
     "@shikijs/transformers": "^3.2.1",
     "leva": "^0",
     "lexical": "^0.23.1",