@lobehub/ui 5.10.2 → 5.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import FlexBasic_default from "../Flex/FlexBasic.mjs";
3
+ import { useEventCallback } from "../hooks/useEventCallback.mjs";
3
4
  import { variants } from "./style.mjs";
4
5
  import { useScrollOverflow } from "./useScrollOverflow.mjs";
5
6
  import { useMemo, useRef } from "react";
@@ -10,11 +11,14 @@ import { mergeRefs } from "react-merge-refs";
10
11
  const ScrollShadow = ({ className, children, orientation = "vertical", hideScrollBar = false, size = 16, offset = 8, visibility = "auto", isEnabled = true, onVisibilityChange, style, ref, ...rest }) => {
11
12
  const cssVariables = useMemo(() => ({ "--scroll-shadow-size": `${size}%` }), [size]);
12
13
  const domRef = useRef(null);
14
+ const onVisibilityChangeEvent = useEventCallback((visibility) => {
15
+ onVisibilityChange?.(visibility);
16
+ });
13
17
  const scrollState = useScrollOverflow({
14
18
  domRef,
15
19
  isEnabled: isEnabled && visibility === "auto",
16
20
  offset,
17
- onVisibilityChange,
21
+ onVisibilityChange: onVisibilityChangeEvent,
18
22
  orientation,
19
23
  updateDeps: [children]
20
24
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n className,\n children,\n orientation = 'vertical',\n hideScrollBar = false,\n size = 16,\n offset = 8,\n visibility = 'auto',\n isEnabled = true,\n onVisibilityChange,\n style,\n ref,\n ...rest\n}) => {\n // Convert size prop to CSS variable\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--scroll-shadow-size': `${size}%`,\n }),\n [size],\n );\n const domRef = useRef<HTMLDivElement>(null);\n\n // 使用滚动检测钩子\n const scrollState = useScrollOverflow({\n domRef,\n isEnabled: isEnabled && visibility === 'auto',\n offset,\n onVisibilityChange,\n orientation,\n updateDeps: [children],\n });\n\n // 决定最终的滚动状态\n const finalScrollState = useMemo(() => {\n if (visibility === 'always') {\n return {\n bottom: true,\n left: true,\n right: true,\n top: true,\n };\n }\n\n if (visibility === 'never') {\n return {\n bottom: false,\n left: false,\n right: false,\n top: false,\n };\n }\n\n return scrollState;\n }, [visibility, scrollState]);\n\n // 计算数据属性\n const dataAttributes = useMemo(() => {\n const attributes: Record<string, boolean | string> = {\n 'data-orientation': orientation,\n };\n\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) {\n attributes['data-top-bottom-scroll'] = true;\n } else if (finalScrollState.top) {\n attributes['data-top-scroll'] = true;\n } else if (finalScrollState.bottom) {\n attributes['data-bottom-scroll'] = true;\n }\n } else {\n if (finalScrollState.left && finalScrollState.right) {\n attributes['data-left-right-scroll'] = true;\n } else if (finalScrollState.left) {\n attributes['data-left-scroll'] = true;\n } else if (finalScrollState.right) {\n attributes['data-right-scroll'] = true;\n }\n }\n\n return attributes;\n }, [orientation, finalScrollState]);\n\n // 计算滚动位置变体\n const scrollPosition = useMemo(() => {\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n if (finalScrollState.top) return 'top';\n if (finalScrollState.bottom) return 'bottom';\n } else {\n if (finalScrollState.left && finalScrollState.right) return 'left-right';\n if (finalScrollState.left) return 'left';\n if (finalScrollState.right) return 'right';\n }\n return 'none';\n }, [orientation, finalScrollState]);\n\n return (\n <Flexbox\n className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,IACjC,GACD,CAAC,KAAK,CACP;CACD,MAAM,SAAS,OAAuB,KAAK;CAG3C,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA;EACA;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB;OACd,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAgBnC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;AACnC,QAAI,gBAAgB,YAAY;AAC9B,SAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,SAAI,iBAAiB,IAAK,QAAO;AACjC,SAAI,iBAAiB,OAAQ,QAAO;WAC/B;AACL,SAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,SAAI,iBAAiB,KAAM,QAAO;AAClC,SAAI,iBAAiB,MAAO,QAAO;;AAErC,WAAO;MACN,CAAC,aAAa,iBAAiB,CAIqC;GAAE,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EAC7C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EACJ,GAAI;EAEH;EACO,CAAA;;AAId,aAAa,cAAc"}
1
+ {"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { variants } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n className,\n children,\n orientation = 'vertical',\n hideScrollBar = false,\n size = 16,\n offset = 8,\n visibility = 'auto',\n isEnabled = true,\n onVisibilityChange,\n style,\n ref,\n ...rest\n}) => {\n // Convert size prop to CSS variable\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--scroll-shadow-size': `${size}%`,\n }),\n [size],\n );\n const domRef = useRef<HTMLDivElement>(null);\n\n const onVisibilityChangeEvent = useEventCallback<\n NonNullable<ScrollShadowProps['onVisibilityChange']>\n >((visibility) => {\n onVisibilityChange?.(visibility);\n });\n // 使用滚动检测钩子\n const scrollState = useScrollOverflow({\n domRef,\n isEnabled: isEnabled && visibility === 'auto',\n offset,\n onVisibilityChange: onVisibilityChangeEvent,\n orientation,\n updateDeps: [children],\n });\n\n // 决定最终的滚动状态\n const finalScrollState = useMemo(() => {\n if (visibility === 'always') {\n return {\n bottom: true,\n left: true,\n right: true,\n top: true,\n };\n }\n\n if (visibility === 'never') {\n return {\n bottom: false,\n left: false,\n right: false,\n top: false,\n };\n }\n\n return scrollState;\n }, [visibility, scrollState]);\n\n // 计算数据属性\n const dataAttributes = useMemo(() => {\n const attributes: Record<string, boolean | string> = {\n 'data-orientation': orientation,\n };\n\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) {\n attributes['data-top-bottom-scroll'] = true;\n } else if (finalScrollState.top) {\n attributes['data-top-scroll'] = true;\n } else if (finalScrollState.bottom) {\n attributes['data-bottom-scroll'] = true;\n }\n } else {\n if (finalScrollState.left && finalScrollState.right) {\n attributes['data-left-right-scroll'] = true;\n } else if (finalScrollState.left) {\n attributes['data-left-scroll'] = true;\n } else if (finalScrollState.right) {\n attributes['data-right-scroll'] = true;\n }\n }\n\n return attributes;\n }, [orientation, finalScrollState]);\n\n // 计算滚动位置变体\n const scrollPosition = useMemo(() => {\n if (orientation === 'vertical') {\n if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n if (finalScrollState.top) return 'top';\n if (finalScrollState.bottom) return 'bottom';\n } else {\n if (finalScrollState.left && finalScrollState.right) return 'left-right';\n if (finalScrollState.left) return 'left';\n if (finalScrollState.right) return 'right';\n }\n return 'none';\n }, [orientation, finalScrollState]);\n\n return (\n <Flexbox\n className={cx(variants({ hideScrollBar, orientation, scrollPosition }), className)}\n ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...dataAttributes}\n {...rest}\n >\n {children}\n </Flexbox>\n );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,IACjC,GACD,CAAC,KAAK,CACP;CACD,MAAM,SAAS,OAAuB,KAAK;CAE3C,MAAM,0BAA0B,kBAE7B,eAAe;AAChB,uBAAqB,WAAW;GAChC;CAEF,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,SAAS;EACvB,CAAC;CAGF,MAAM,mBAAmB,cAAc;AACrC,MAAI,eAAe,SACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,MAAI,eAAe,QACjB,QAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;AAGH,SAAO;IACN,CAAC,YAAY,YAAY,CAAC;CAG7B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,aACrB;AAED,MAAI,gBAAgB;OACd,iBAAiB,OAAO,iBAAiB,OAC3C,YAAW,4BAA4B;YAC9B,iBAAiB,IAC1B,YAAW,qBAAqB;YACvB,iBAAiB,OAC1B,YAAW,wBAAwB;aAGjC,iBAAiB,QAAQ,iBAAiB,MAC5C,YAAW,4BAA4B;WAC9B,iBAAiB,KAC1B,YAAW,sBAAsB;WACxB,iBAAiB,MAC1B,YAAW,uBAAuB;AAItC,SAAO;IACN,CAAC,aAAa,iBAAiB,CAAC;AAgBnC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAa,gBAflC,cAAc;AACnC,QAAI,gBAAgB,YAAY;AAC9B,SAAI,iBAAiB,OAAO,iBAAiB,OAAQ,QAAO;AAC5D,SAAI,iBAAiB,IAAK,QAAO;AACjC,SAAI,iBAAiB,OAAQ,QAAO;WAC/B;AACL,SAAI,iBAAiB,QAAQ,iBAAiB,MAAO,QAAO;AAC5D,SAAI,iBAAiB,KAAM,QAAO;AAClC,SAAI,iBAAiB,MAAO,QAAO;;AAErC,WAAO;MACN,CAAC,aAAa,iBAAiB,CAIqC;GAAE,CAAC,EAAE,UAAU;EAClF,KAAK,UAA0B,CAAC,QAAQ,IAAI,CAAC;EAC7C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EACJ,GAAI;EAEH;EACO,CAAA;;AAId,aAAa,cAAc"}
@@ -1,17 +1,20 @@
1
- import { useEffect, useState } from "react";
1
+ import { useEffect, useRef, useState } from "react";
2
2
  //#region src/ScrollShadow/useScrollOverflow.ts
3
+ const initialScrollState = {
4
+ bottom: false,
5
+ left: false,
6
+ right: false,
7
+ top: false
8
+ };
9
+ const isSameScrollState = (a, b) => a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;
3
10
  const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEnabled = true, onVisibilityChange, updateDeps = [] }) => {
4
- const [scrollState, setScrollState] = useState({
5
- bottom: false,
6
- left: false,
7
- right: false,
8
- top: false
9
- });
11
+ const [scrollState, setScrollState] = useState(initialScrollState);
12
+ const scrollStateRef = useRef(initialScrollState);
10
13
  useEffect(() => {
11
14
  const element = domRef.current;
12
15
  if (!element || !isEnabled) return;
13
16
  const checkScroll = () => {
14
- const newState = { ...scrollState };
17
+ const newState = { ...initialScrollState };
15
18
  if (orientation === "vertical") if (element.scrollHeight > element.clientHeight) {
16
19
  newState.top = element.scrollTop > offset;
17
20
  newState.bottom = element.scrollTop + element.clientHeight < element.scrollHeight - offset;
@@ -26,6 +29,8 @@ const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEna
26
29
  newState.left = false;
27
30
  newState.right = false;
28
31
  }
32
+ if (isSameScrollState(scrollStateRef.current, newState)) return;
33
+ scrollStateRef.current = newState;
29
34
  setScrollState(newState);
30
35
  onVisibilityChange?.(newState);
31
36
  };
@@ -44,7 +49,6 @@ const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEna
44
49
  offset,
45
50
  orientation,
46
51
  isEnabled,
47
- onVisibilityChange,
48
52
  ...updateDeps
49
53
  ]);
50
54
  return scrollState;
@@ -1 +1 @@
1
- {"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\ninterface UseScrollOverflowProps {\n domRef: RefObject<HTMLElement | null>;\n isEnabled?: boolean;\n offset?: number;\n onVisibilityChange?: (visibility: {\n bottom?: boolean;\n left?: boolean;\n right?: boolean;\n top?: boolean;\n }) => void;\n orientation?: 'vertical' | 'horizontal';\n updateDeps?: any[];\n}\n\nexport const useScrollOverflow = ({\n domRef,\n offset = 0,\n orientation = 'vertical',\n isEnabled = true,\n onVisibilityChange,\n updateDeps = [],\n}: UseScrollOverflowProps) => {\n const [scrollState, setScrollState] = useState({\n bottom: false,\n left: false,\n right: false,\n top: false,\n });\n\n useEffect(() => {\n const element = domRef.current;\n if (!element || !isEnabled) return;\n\n const checkScroll = () => {\n const newState = { ...scrollState };\n\n if (orientation === 'vertical') {\n const hasVerticalScroll = element.scrollHeight > element.clientHeight;\n\n if (hasVerticalScroll) {\n newState.top = element.scrollTop > offset;\n newState.bottom =\n element.scrollTop + element.clientHeight < element.scrollHeight - offset;\n } else {\n newState.top = false;\n newState.bottom = false;\n }\n } else {\n const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\n\n if (hasHorizontalScroll) {\n newState.left = element.scrollLeft > offset;\n newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\n } else {\n newState.left = false;\n newState.right = false;\n }\n }\n\n setScrollState(newState);\n onVisibilityChange?.(newState);\n };\n\n // 初始检查\n checkScroll();\n\n // 监听滚动事件\n element.addEventListener('scroll', checkScroll);\n window.addEventListener('resize', checkScroll);\n\n // 观察内容变化\n const resizeObserver = new ResizeObserver(checkScroll);\n resizeObserver.observe(element);\n\n return () => {\n element.removeEventListener('scroll', checkScroll);\n window.removeEventListener('resize', checkScroll);\n resizeObserver.disconnect();\n };\n }, [domRef, offset, orientation, isEnabled, onVisibilityChange, ...updateDeps]);\n\n return scrollState;\n};\n"],"mappings":";;AAgBA,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,EAAE,OACa;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS;EAC7C,QAAQ;EACR,MAAM;EACN,OAAO;EACP,KAAK;EACN,CAAC;AAEF,iBAAgB;EACd,MAAM,UAAU,OAAO;AACvB,MAAI,CAAC,WAAW,CAAC,UAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,aAAa;AAEnC,OAAI,gBAAgB,WAGlB,KAF0B,QAAQ,eAAe,QAAQ,cAElC;AACrB,aAAS,MAAM,QAAQ,YAAY;AACnC,aAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;UAC/D;AACL,aAAS,MAAM;AACf,aAAS,SAAS;;YAGQ,QAAQ,cAAc,QAAQ,aAEjC;AACvB,aAAS,OAAO,QAAQ,aAAa;AACrC,aAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;UAC7E;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAIrB,kBAAe,SAAS;AACxB,wBAAqB,SAAS;;AAIhC,eAAa;AAGb,UAAQ,iBAAiB,UAAU,YAAY;AAC/C,SAAO,iBAAiB,UAAU,YAAY;EAG9C,MAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,YAAY;AAClD,UAAO,oBAAoB,UAAU,YAAY;AACjD,kBAAe,YAAY;;IAE5B;EAAC;EAAQ;EAAQ;EAAa;EAAW;EAAoB,GAAG;EAAW,CAAC;AAE/E,QAAO"}
1
+ {"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from 'react';\n\ninterface ScrollState {\n bottom: boolean;\n left: boolean;\n right: boolean;\n top: boolean;\n}\n\nconst initialScrollState: ScrollState = {\n bottom: false,\n left: false,\n right: false,\n top: false,\n};\n\nconst isSameScrollState = (a: ScrollState, b: ScrollState) =>\n a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;\n\ninterface UseScrollOverflowProps {\n domRef: RefObject<HTMLElement | null>;\n isEnabled?: boolean;\n offset?: number;\n onVisibilityChange?: (visibility: {\n bottom?: boolean;\n left?: boolean;\n right?: boolean;\n top?: boolean;\n }) => void;\n orientation?: 'vertical' | 'horizontal';\n updateDeps?: any[];\n}\n\nexport const useScrollOverflow = ({\n domRef,\n offset = 0,\n orientation = 'vertical',\n isEnabled = true,\n onVisibilityChange,\n updateDeps = [],\n}: UseScrollOverflowProps) => {\n const [scrollState, setScrollState] = useState(initialScrollState);\n const scrollStateRef = useRef(initialScrollState);\n\n useEffect(() => {\n const element = domRef.current;\n if (!element || !isEnabled) return;\n\n const checkScroll = () => {\n const newState = { ...initialScrollState };\n\n if (orientation === 'vertical') {\n const hasVerticalScroll = element.scrollHeight > element.clientHeight;\n\n if (hasVerticalScroll) {\n newState.top = element.scrollTop > offset;\n newState.bottom =\n element.scrollTop + element.clientHeight < element.scrollHeight - offset;\n } else {\n newState.top = false;\n newState.bottom = false;\n }\n } else {\n const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\n\n if (hasHorizontalScroll) {\n newState.left = element.scrollLeft > offset;\n newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\n } else {\n newState.left = false;\n newState.right = false;\n }\n }\n\n if (isSameScrollState(scrollStateRef.current, newState)) return;\n\n scrollStateRef.current = newState;\n setScrollState(newState);\n onVisibilityChange?.(newState);\n };\n\n // 初始检查\n checkScroll();\n\n // 监听滚动事件\n element.addEventListener('scroll', checkScroll);\n window.addEventListener('resize', checkScroll);\n\n // 观察内容变化\n const resizeObserver = new ResizeObserver(checkScroll);\n resizeObserver.observe(element);\n\n return () => {\n element.removeEventListener('scroll', checkScroll);\n window.removeEventListener('resize', checkScroll);\n resizeObserver.disconnect();\n };\n }, [domRef, offset, orientation, isEnabled, ...updateDeps]);\n\n return scrollState;\n};\n"],"mappings":";;AASA,MAAM,qBAAkC;CACtC,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACN;AAED,MAAM,qBAAqB,GAAgB,MACzC,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE;AAgBnF,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,EAAE,OACa;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS,mBAAmB;CAClE,MAAM,iBAAiB,OAAO,mBAAmB;AAEjD,iBAAgB;EACd,MAAM,UAAU,OAAO;AACvB,MAAI,CAAC,WAAW,CAAC,UAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,oBAAoB;AAE1C,OAAI,gBAAgB,WAGlB,KAF0B,QAAQ,eAAe,QAAQ,cAElC;AACrB,aAAS,MAAM,QAAQ,YAAY;AACnC,aAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;UAC/D;AACL,aAAS,MAAM;AACf,aAAS,SAAS;;YAGQ,QAAQ,cAAc,QAAQ,aAEjC;AACvB,aAAS,OAAO,QAAQ,aAAa;AACrC,aAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;UAC7E;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAIrB,OAAI,kBAAkB,eAAe,SAAS,SAAS,CAAE;AAEzD,kBAAe,UAAU;AACzB,kBAAe,SAAS;AACxB,wBAAqB,SAAS;;AAIhC,eAAa;AAGb,UAAQ,iBAAiB,UAAU,YAAY;AAC/C,SAAO,iBAAiB,UAAU,YAAY;EAG9C,MAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,iBAAe,QAAQ,QAAQ;AAE/B,eAAa;AACX,WAAQ,oBAAoB,UAAU,YAAY;AAClD,UAAO,oBAAoB,UAAU,YAAY;AACjD,kBAAe,YAAY;;IAE5B;EAAC;EAAQ;EAAQ;EAAa;EAAW,GAAG;EAAW,CAAC;AAE3D,QAAO"}
package/es/Tag/Tag.mjs CHANGED
@@ -17,7 +17,7 @@ const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", chi
17
17
  const isPresetSystemColors = color && presetSystemColors.has(color);
18
18
  const isHexColor = color && color.startsWith("#");
19
19
  if (isPresetColor) {
20
- textColor = colorsPreset(color);
20
+ textColor = colorsPreset(color, "active");
21
21
  backgroundColor = isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
22
22
  borderColor = colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
23
23
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n size = 'middle',\n color,\n variant = 'filled',\n children,\n onClick,\n style,\n ...rest\n}) => {\n const colors = useMemo(() => {\n let textColor = cssVar.colorTextSecondary;\n let backgroundColor;\n let borderColor;\n const isBorderless = variant === 'borderless';\n const isFilled = variant === 'filled';\n const isPresetColor = color && presetColors.includes(color);\n const isPresetSystemColors = color && presetSystemColors.has(color);\n const isHexColor = color && color.startsWith('#');\n\n if (isPresetColor) {\n textColor = colorsPreset(color);\n backgroundColor = isBorderless ? 'transparent' : colorsPreset(color, 'fillTertiary');\n borderColor = colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isPresetSystemColors) {\n textColor = colorsPresetSystem(color);\n backgroundColor = isBorderless ? 'transparent' : colorsPresetSystem(color, 'fillTertiary');\n borderColor = colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isHexColor) {\n textColor = cssVar.colorBgLayout;\n backgroundColor = isBorderless ? 'transparent' : color;\n }\n\n return {\n backgroundColor,\n borderColor,\n textColor,\n };\n }, [color, variant]);\n\n return (\n <AntTag\n className={cx(variants({ size, variant: variant as any }), className)}\n color={color}\n ref={ref}\n variant={variant === 'borderless' ? 'outlined' : variant}\n style={{\n background: colors?.backgroundColor,\n borderColor: colors?.borderColor,\n color: colors?.textColor,\n cursor: onClick ? 'pointer' : undefined,\n ...style,\n }}\n onClick={onClick}\n {...rest}\n >\n {children}\n </AntTag>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,MAAM;AAC/B,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,eAAe;AACpF,iBAAc,aAAa,OAAO,WAAW,mBAAmB,eAAe;;AAEjF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,MAAM;AACrC,qBAAkB,eAAe,gBAAgB,mBAAmB,OAAO,eAAe;AAC1F,iBAAc,mBAAmB,OAAO,WAAW,mBAAmB,eAAe;;AAEvF,MAAI,YAAY;AACd,eAAY,OAAO;AACnB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACF;EACL,SAAS,YAAY,eAAe,aAAa;EACjD,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACJ;EACQ;EACT,GAAI;EAEH;EACM,CAAA;;AAIb,MAAI,cAAc"}
1
+ {"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n size = 'middle',\n color,\n variant = 'filled',\n children,\n onClick,\n style,\n ...rest\n}) => {\n const colors = useMemo(() => {\n let textColor = cssVar.colorTextSecondary;\n let backgroundColor;\n let borderColor;\n const isBorderless = variant === 'borderless';\n const isFilled = variant === 'filled';\n const isPresetColor = color && presetColors.includes(color);\n const isPresetSystemColors = color && presetSystemColors.has(color);\n const isHexColor = color && color.startsWith('#');\n\n if (isPresetColor) {\n textColor = colorsPreset(color, 'active');\n backgroundColor = isBorderless ? 'transparent' : colorsPreset(color, 'fillTertiary');\n borderColor = colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isPresetSystemColors) {\n textColor = colorsPresetSystem(color);\n backgroundColor = isBorderless ? 'transparent' : colorsPresetSystem(color, 'fillTertiary');\n borderColor = colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isHexColor) {\n textColor = cssVar.colorBgLayout;\n backgroundColor = isBorderless ? 'transparent' : color;\n }\n\n return {\n backgroundColor,\n borderColor,\n textColor,\n };\n }, [color, variant]);\n\n return (\n <AntTag\n className={cx(variants({ size, variant: variant as any }), className)}\n color={color}\n ref={ref}\n variant={variant === 'borderless' ? 'outlined' : variant}\n style={{\n background: colors?.backgroundColor,\n borderColor: colors?.borderColor,\n color: colors?.textColor,\n cursor: onClick ? 'pointer' : undefined,\n ...style,\n }}\n onClick={onClick}\n {...rest}\n >\n {children}\n </AntTag>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,OAAO,SAAS;AACzC,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,eAAe;AACpF,iBAAc,aAAa,OAAO,WAAW,mBAAmB,eAAe;;AAEjF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,MAAM;AACrC,qBAAkB,eAAe,gBAAgB,mBAAmB,OAAO,eAAe;AAC1F,iBAAc,mBAAmB,OAAO,WAAW,mBAAmB,eAAe;;AAEvF,MAAI,YAAY;AACd,eAAY,OAAO;AACnB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACF;EACL,SAAS,YAAY,eAAe,aAAa;EACjD,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACJ;EACQ;EACT,GAAI;EAEH;EACM,CAAA;;AAIb,MAAI,cAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "5.10.2",
3
+ "version": "5.10.3",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",
@@ -243,6 +243,9 @@
243
243
  "lint-staged": "^16.4.0",
244
244
  "mdast-util-to-markdown": "^2.1.2",
245
245
  "prettier": "^3.8.3",
246
+ "prettier-plugin-packagejson": "^3.0.2",
247
+ "prettier-plugin-sh": "^0.18.1",
248
+ "prettier-plugin-sort-json": "^4.2.0",
246
249
  "react": "^19.2.5",
247
250
  "react-dom": "^19.2.5",
248
251
  "remark": "^15.0.1",