@alifd/chat 0.3.0-beta.9 → 0.3.1

package/es/button/index.js

@@ -24,7 +24,7 @@ import cs from 'classnames';
 import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const Button = forwardRef((_a, ref) => {
     var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
-    return (React.createElement(NextButton, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}button`, className), size: size, ref: ref })));
+    return (React.createElement(NextButton, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}button ${size}`, className), size: size, ref: ref })));
 });
 const ButtonWithSub = assignSubComponent(Button, {
     displayName: 'Button',

package/es/button/main.scss

@@ -1,5 +1,5 @@
 @import "../core/variables.scss";
 
 .#{$prefix}button {
-  
+
 }

package/es/button/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/button/style';
+import '@alifd/next/lib/button/style2';
 import './main.scss';

package/es/button/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/button/style';
+import '@alifd/next/lib/button/style2';
 import './main.scss';

package/es/core/variables.scss

@@ -7,6 +7,17 @@ $shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
 
 $font-size-display-3: var(--font-size-display-3, 56px) !default;
 $font-size-display-2: var(--font-size-display-2, 48px) !default;
+$s-1: var(---s-1, 4px) !default;
+$s-2: var(---s-2, 8px) !default;
+$s-3: var(---s-3, 12px) !default;
+$s-4: var(---s-4, 16px) !default;
+$s-5: var(---s-5, 20px) !default;
+$s-6: var(---s-6, 24px) !default;
+$s-7: var(---s-7, 28px) !default;
+$s-8: var(---s-8, 32px) !default;
+$s-9: var(---s-9, 36px) !default;
+$s-10: var(---s-10, 40px) !default;
+
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -37,24 +48,35 @@ $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
 
 $color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
 
-$color-fill1-2: var(--color-fill1-2, #f2f3f7) !default;
+$color-fill1-1: var(--color-fill1-1, rgba(3, 11, 53, 0.03)) !default;
+
+$color-fill1-2: var(--color-fill1-2, rgb(242, 243, 247)) !default;
+
+$color-fill1-3: var(--color-fill1-3, rgb(235, 236, 240)) !default;
+
+$color-fill1-4: var(--color-fill1-4, rgb(226, 228, 232)) !default;
+
+$color-data1-1: var(--color-data1-1, #2d9c9c) !default; // ??
+
+$color-data1-2: var(--color-data1-2, #0089ff) !default; // blue
+
+$color-data1-3: var(--color-data1-3, #b963d3) !default; // purple
 
-$color-fill1-1: var(--color-fill1-1, #030b35) !default;
+$color-data1-4: var(--color-data1-4, #ff5219) !default; // red
 
-$color-data1-1: var(--color-data1-1, #DEE8FF) !default; // ??
+$color-data1-5: var(--color-data1-5, #ff9200) !default; // orange
 
-$color-data1-2: var(--color-data1-2, #007FFF) !default; // blue
+$color-data1-6: var(--color-data1-6, #f4c800) !default; // yellow
 
-$color-data1-3: var(--color-data1-3, #B963D3) !default; // purple
+$color-data1-7: var(--color-data1-7, #00b042) !default; // ?
 
-$color-data1-4: var(--color-data1-4, #FF5219) !default; // red
+$color-data1-8: var(--color-data1-8, #5ac8fa) !default; // water
 
-$color-data1-5: var(--color-data1-5, #FF9200) !default; // orange
+$color-data1-9: var(--color-data1-9, #ec4589) !default; // ?
 
-$color-data1-6: var(--color-data1-6, #F4C800) !default; // yellow
+$color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
-$color-data1-7: var(--color-data1-7, #77912b) !default; // ?
+$color-link-3: var(--color-link-3, #0056ff) !default; // ?
 
-$color-data1-8: var(--color-data1-8, #4fae51) !default; // water
+$color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 
-$color-data1-9: var(--color-data1-9, #da5388) !default; // ?

package/es/date-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/date-picker2/style';
+import '@alifd/next/lib/date-picker2/style2';

package/es/date-picker/style.js

@@ -1 +1 @@
-import '@alifd/next/lib/date-picker2/style';
+import '@alifd/next/lib/date-picker2/style2';

package/es/drawer/index.js

@@ -14,11 +14,9 @@ const Drawer = forwardRef((_a, ref) => {
     var { className, headerStyle, children, footer, footerClassName } = _a, props = __rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
     // 对齐小蜜现有的底部
     const defaultHeaderStyle = {
-        "border-bottom:": "1px solid var(--40gmM)",
-        "border-top-left-radius": "16px",
-        "border-top-right-radius": "16px",
+        "border-bottom:": "1px solid var(--40gmM)"
     };
-    return (React.createElement(NextDrawer, Object.assign({}, props, { ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: cs(`${PREFIX_DEFAULT}drawer`, className) }),
+    return (React.createElement(NextDrawer, Object.assign({}, props, { v2: true, ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: cs(`${PREFIX_DEFAULT}drawer`, className) }),
         React.createElement("div", { className: 'draw-content' }, children),
         footer && footer.length && React.createElement("div", { className: cs('draw-footer', footerClassName) }, footer)));
 });

package/es/drawer/main.scss

@@ -1,7 +1,9 @@
 @import "../core/variables.scss";
 
 .#{$prefix}drawer {
-  border: none;
+
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
 
   .draw-footer {
     width: calc(100% - 40px);

package/es/float-button/hooks/useDragable.js

@@ -7,6 +7,7 @@ function normalizePositionRatio(ratio) {
     }
     return Math.max(0, Math.min(1, ratio));
 }
+// 基本逻辑：在能完全展示悬浮球元素的基础上 left的值 widthRatio * 屏幕宽度；top的值 heightRatio * 屏幕高度
 function parsePosition(position, element) {
     if (!position || !element) {
         return undefined;

package/es/float-button/hooks/useNestleEdge.js

@@ -9,6 +9,7 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         if (!enable || !dom) {
             return;
         }
+        // 悬浮球的dom的结构
         const rect = dom.getBoundingClientRect();
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = getScreenSize();

package/es/float-button/index.d.ts

@@ -2,6 +2,7 @@ declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/type
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
     Drawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
     InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+    AddonAfter: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").AddonAfterProps & import("react").RefAttributes<import("./types").AddonAfterRef>, "key" | keyof import("./types").AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").AddonAfterRef, {}>;
 };
 export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonDrawerProps, FloatButtonInnerDrawerProps, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/es/float-button/index.js

@@ -1,7 +1,8 @@
 import FloatButton from './view/float-button';
 import Backtop from './view/backtop';
+import AddonAfter from './view/addon-after';
 import InnerDrawer from './view/inner-drawer';
 import Drawer from './view/drawer';
 import { assignSubComponent } from '../utils/index';
-const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop, Drawer, InnerDrawer });
+const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop, Drawer, InnerDrawer, AddonAfter });
 export default FloatButtonWithSub;

package/es/float-button/main.scss

@@ -16,6 +16,29 @@
         }
     }
 
+    &-addon-after {
+        opacity: 1;
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
+        &--show-with-hover {
+            opacity: 0;
+        }
+    }
+
+    &:hover {
+        .ct-float-button-addon-after--show-with-hover{
+            opacity: 1;
+        }
+        &-addon-after {
+            &--show-with-hover {
+                opacity: 1;
+            }
+        }
+
+    }
+
     &-inner-drawer {
         flex: 1;
         overflow: hidden;

package/es/float-button/style.d.ts

@@ -1,3 +1,3 @@
-import '@alifd/next/lib/balloon/style';
-import '@alifd/next/lib/drawer/style';
+import '@alifd/next/lib/balloon/style2';
+import '@alifd/next/lib/drawer/style2';
 import './main.scss';

package/es/float-button/style.js

@@ -1,3 +1,3 @@
-import '@alifd/next/lib/balloon/style';
-import '@alifd/next/lib/drawer/style';
+import '@alifd/next/lib/balloon/style2';
+import '@alifd/next/lib/drawer/style2';
 import './main.scss';

package/es/float-button/types.d.ts

@@ -257,3 +257,26 @@ export interface FloatButtonDrawerProps extends FloatButtonProps {
     beforeClose?: () => void;
     afterClose?: () => void;
 }
+/**
+ * 底部额外区域 ref 对象
+ * @api
+ * @order 4
+ */
+export interface AddonAfterRef {
+}
+/**
+ * 底部额外区域
+ * @api FloatButton.AddonAfter
+ *  @order 3
+ */
+export interface AddonAfterProps extends CommonProps {
+    /**
+     * 内容
+     */
+    children: React.ReactNode;
+    /**
+     * 是否hover trigger 元素才出现
+     * @defaultValue 10
+     */
+    showWithHover?: boolean;
+}

package/es/float-button/util.js

@@ -4,6 +4,7 @@ export function getScreenSize() {
         height: document.documentElement.clientHeight,
     };
 }
+// 返回距离最近的边：top, right, left, bottom
 export function getNearlyEdge(el, interactiveEdges, rect = el.getBoundingClientRect()) {
     if (!(interactiveEdges === null || interactiveEdges === void 0 ? void 0 : interactiveEdges.length)) {
         return [];
@@ -45,6 +46,7 @@ export function isInScreen(dom) {
     const bottom = height - rect.top - rect.height;
     return [left, top, right, bottom].every(n => n >= 0);
 }
+// 返回当前位置在安全区域内的安全位置
 export function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
     if (!position || !rect || !safeAreaMargin) {
         return undefined;

package/es/float-button/view/addon-after.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AddonAfterRef, AddonAfterProps } from '../types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<AddonAfterProps & React.RefAttributes<AddonAfterRef>, "key" | keyof AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, AddonAfterRef, {}>;
+export default _default;

package/es/float-button/view/addon-after.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT } from '../../utils';
+const AddonAfter = forwardRef(({ showWithHover = false, children }, ref) => {
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const cls = `${PREFIX_DEFAULT}float-button-addon-after`;
+    return (React.createElement("button", { className: cs(cls, { [`${cls}--show-with-hover`]: showWithHover }) }, children));
+});
+export default ConfigProvider.config(AddonAfter);

package/es/float-button/view/backtop.js

@@ -12,7 +12,8 @@ function getScroller(scroller) {
     return scroller;
 }
 const Backtop = forwardRef(({ autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
-    const [visible, setVisible] = useState(true);
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const [visible, setVisible] = useState(false);
     const cls = `${PREFIX_DEFAULT}float-button-backtop`;
     const visibleRef = useRef(visible);
     visibleRef.current = visible;
@@ -55,6 +56,7 @@ const Backtop = forwardRef(({ autoHide = true, scroller, offset = 10, smooth = t
         if (!target) {
             return;
         }
+        // 滚动时候的显隐控制
         const onScroll = debounce(() => {
             if (isAtTop(target)) {
                 visibleRef.current && setVisible(false);

package/es/float-button/view/drawer.js

@@ -15,7 +15,9 @@ export function Drawer(_a) {
 function FloatButtonDrawer(_a) {
     var { width, title, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = _a, rests = __rest(_a, ["width", "title", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
     return (React.createElement(FloatButton, Object.assign({}, rests, { _renderView: (prefix, { visible, onVisibleChange, trigger, triggerType, showClose, children }) => {
-            return (React.createElement(Drawer, { prefix: prefix, className: drawerClassName, visible: visible, onVisibleChange: onVisibleChange, trigger: trigger, closeMode: ['esc', 'mask', ...(showClose ? ['close'] : [])], triggerType: triggerType, cache: cache }, children));
+            return (React.createElement(Drawer, { prefix: prefix, className: drawerClassName, visible: visible, onVisibleChange: onVisibleChange, 
+                // @ts-ignore
+                trigger: trigger, closeMode: ['esc', 'mask', ...(showClose ? ['close'] : [])], triggerType: triggerType, cache: cache }, children));
         } })));
 }
 export default ConfigProvider.config(FloatButtonDrawer);

package/es/html-render/index.js

@@ -13,7 +13,7 @@ import { PhotoProvider } from 'react-photo-view';
 import qs from 'query-string';
 import ImagePreview from '../image-preview';
 import { ConfigProvider } from '@alifd/next';
-import { assignSubComponent } from '../utils';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 const sanitizeHtmlOptions = {
     allowedTags: sanitizeHtml.defaults.allowedTags.concat([
         'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
@@ -125,7 +125,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
     const element = useMemo(() => {
         return parse(sanitizeHtml(children || '', sanitizeHtmlOptions), parserOptions);
     }, [children]);
-    return (React.createElement("div", { className: classnames('box', className, {
+    return (React.createElement("div", { className: classnames(`${PREFIX_DEFAULT}html`, className, {
             'loose': loose,
         }) }, imagePreview ?
         React.createElement(PhotoProvider, null, element)

package/es/html-render/main.scss

@@ -1,8 +1,11 @@
-.box {
+@import "../core/variables.scss";
+
+.#{$prefix}html {
   font-size: 14px;
   // color: hsla(230, 10%, 11%, 0.9);
   word-break: break-word;
   font-family: inherit;
+  color: $color-text1-4;
 
   &.loose {
     font-size: 16px;
@@ -26,7 +29,7 @@
 
   img {
     body.global-dark & {
-      background: #fff;
+      background: $color-bg-1;
     }
     body.global-dark-dim & {
       filter: hue-rotate(180deg) brightness(.75) invert(1);
@@ -48,6 +51,7 @@
 
   h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
+    color: $color-text1-4;
   }
 
   h1 {
@@ -108,7 +112,7 @@
     padding: .12em .25em;
     border-radius: 3px;
     font-size: 86%;
-    background: rgba(27, 31, 35, .05);
+    background: $color-fill1-2;
   }
 
   pre {
@@ -127,15 +131,16 @@
       font-size: inherit;
       background: none;
       border-radius: 0;
+      text-shadow: none;
+      color: $color-text1-3;
     }
   }
 
   table, td, th {
-    border: 1px solid #caccce;
+    border: 1px solid $color-line1-1;
 
     body.global-dark & {
-      border-color: #babcbd;
-      // border-color: #c9cace;
+      border-color: $color-line1-2
     }
 
     border-collapse: collapse;
@@ -156,7 +161,7 @@
   }
 
   td, th {
-    border: 1px solid #e3e3e3;
+    border: 1px solid $color-line1-1;
     padding: 10px 12px;
     line-height: 1.3;
 
@@ -166,11 +171,11 @@
   }
 
   th {
-    background: hsla(230, 90%, 11%, .03);
+    background: $color-fill1-2;
   }
 
   a, a:visited {
-    color: #0080FF;
+    color: $color-link-3;
     text-decoration: none;
 
     &:hover {
@@ -219,7 +224,7 @@
       margin-left: -16px;
       top: 0;
       bottom: 0;
-      background: hsla(230, 90%, 11%, .2);
+      background: $color-fill1-2;
     }
   }
 
@@ -227,7 +232,7 @@
     height: 0;
     border: none;
     height: 1px;
-    background: hsla(230, 90%, 11%, .1);
+    background: $color-fill1-2;
     margin: 10px 0;
   }
 }

package/es/index.js

@@ -20,4 +20,4 @@ export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
 export { default as Loading } from './loading';
 export { default as Drawer } from './drawer';
-export const version = '0.3.0-beta.9';
+export const version = '0.3.1';

package/es/input/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/input/style';
+import '@alifd/next/lib/input/style2';

package/es/input/style.js

@@ -1 +1 @@
-import '@alifd/next/lib/input/style';
+import '@alifd/next/lib/input/style2';

package/es/markdown/index.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import MarkdownIt from 'markdown-it';
 import HTMLRenderer from '../html-render';
 import { ConfigProvider } from '@alifd/next';
-import { assignSubComponent } from '../utils';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
 import { init, transformTextWithEmoji } from '@ali/dingtalk-im-emoji';
 import hljs from 'highlight.js'; // 引入 highlight.js
 import 'highlight.js/styles/github.css'; // 引入代码高亮样式
@@ -170,7 +170,7 @@ const Markdown = forwardRef(({ className, onReady, content }, ref) => {
             });
         }
     }, [html]);
-    return (React.createElement("div", { ref: containerRef, className: classnames(className) },
+    return (React.createElement("div", { ref: containerRef, className: classnames(`${PREFIX_DEFAULT}markdown`, className) },
         React.createElement(HTMLRenderer, { imagePreview: true }, html)));
 });
 const MarkdownWithSub = assignSubComponent(Markdown, {