@lobehub/ui 5.32.7 → 5.33.0
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.
- package/es/ActionIcon/ActionIcon.d.mts +3 -0
- package/es/ActionIcon/ActionIcon.mjs +3 -0
- package/es/ActionIcon/ActionIcon.mjs.map +1 -1
- package/es/Avatar/Avatar.mjs +3 -0
- package/es/Avatar/Avatar.mjs.map +1 -1
- package/es/Tag/Tag.d.mts +3 -0
- package/es/Tag/Tag.mjs +4 -1
- package/es/Tag/Tag.mjs.map +1 -1
- package/es/Text/Text.d.mts +3 -0
- package/es/Text/Text.mjs +3 -0
- package/es/Text/Text.mjs.map +1 -1
- package/es/base-ui/ActionIcon/ActionIcon.d.mts +6 -0
- package/es/base-ui/ActionIcon/ActionIcon.mjs +88 -0
- package/es/base-ui/ActionIcon/ActionIcon.mjs.map +1 -0
- package/es/base-ui/ActionIcon/index.d.mts +4 -0
- package/es/base-ui/ActionIcon/style.d.mts +9 -0
- package/es/base-ui/ActionIcon/style.mjs +36 -0
- package/es/base-ui/ActionIcon/style.mjs.map +1 -0
- package/es/base-ui/ActionIcon/type.d.mts +41 -0
- package/es/base-ui/ActionIcon/utils.mjs +42 -0
- package/es/base-ui/ActionIcon/utils.mjs.map +1 -0
- package/es/base-ui/Avatar/Avatar.mjs +99 -0
- package/es/base-ui/Avatar/Avatar.mjs.map +1 -0
- package/es/base-ui/Avatar/AvatarGroup/index.d.mts +6 -0
- package/es/base-ui/Avatar/AvatarGroup/index.mjs +65 -0
- package/es/base-ui/Avatar/AvatarGroup/index.mjs.map +1 -0
- package/es/base-ui/Avatar/AvatarGroup/style.mjs +17 -0
- package/es/base-ui/Avatar/AvatarGroup/style.mjs.map +1 -0
- package/es/base-ui/Avatar/index.d.mts +12 -0
- package/es/base-ui/Avatar/index.mjs +9 -0
- package/es/base-ui/Avatar/index.mjs.map +1 -0
- package/es/base-ui/Avatar/style.mjs +73 -0
- package/es/base-ui/Avatar/style.mjs.map +1 -0
- package/es/base-ui/Avatar/type.d.mts +128 -0
- package/es/base-ui/Avatar/utils.mjs +27 -0
- package/es/base-ui/Avatar/utils.mjs.map +1 -0
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Tag/Tag.d.mts +6 -0
- package/es/base-ui/Tag/Tag.mjs +85 -0
- package/es/base-ui/Tag/Tag.mjs.map +1 -0
- package/es/base-ui/Tag/index.d.mts +4 -0
- package/es/base-ui/Tag/style.mjs +112 -0
- package/es/base-ui/Tag/style.mjs.map +1 -0
- package/es/base-ui/Tag/type.d.mts +29 -0
- package/es/base-ui/Tag/utils.d.mts +8 -0
- package/es/base-ui/Tag/utils.mjs +41 -0
- package/es/base-ui/Tag/utils.mjs.map +1 -0
- package/es/base-ui/Text/Text.d.mts +6 -0
- package/es/base-ui/Text/Text.mjs +85 -0
- package/es/base-ui/Text/Text.mjs.map +1 -0
- package/es/base-ui/Text/index.d.mts +4 -0
- package/es/base-ui/Text/style.d.mts +39 -0
- package/es/base-ui/Text/style.mjs +120 -0
- package/es/base-ui/Text/style.mjs.map +1 -0
- package/es/base-ui/Text/type.d.mts +43 -0
- package/es/base-ui/index.d.mts +25 -10
- package/es/base-ui/index.mjs +21 -13
- package/es/utils/safeReadableColor.mjs +1 -1
- package/es/utils/safeReadableColor.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { ActionIconProps } from "./type.mjs";
|
|
2
2
|
//#region src/ActionIcon/ActionIcon.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `ActionIcon` from `@lobehub/ui/base-ui` instead.
|
|
5
|
+
*/
|
|
3
6
|
declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
|
|
4
7
|
//#endregion
|
|
5
8
|
export { ActionIcon as default };
|
|
@@ -9,6 +9,9 @@ import { jsx } from "react/jsx-runtime";
|
|
|
9
9
|
import { cx } from "antd-style";
|
|
10
10
|
import { Loader2 } from "lucide-react";
|
|
11
11
|
//#region src/ActionIcon/ActionIcon.tsx
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Use `ActionIcon` from `@lobehub/ui/base-ui` instead.
|
|
14
|
+
*/
|
|
12
15
|
const ActionIcon = memo(({ color, fill, className, active, icon, size = "middle", variant = "borderless", style, glass, title, onClick, loading, fillOpacity, fillRule, focusable, shadow, disabled, spin: iconSpinning, tooltipProps, danger, ref, ...rest }) => {
|
|
13
16
|
const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
|
|
14
17
|
const popupTriggerAria = rest;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../src/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, type MouseEventHandler, useCallback, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\n\nconst ActionIcon = memo<ActionIconProps>(\n ({\n color,\n fill,\n className,\n active,\n icon,\n size = 'middle',\n variant = 'borderless',\n style,\n glass,\n title,\n onClick,\n loading,\n fillOpacity,\n fillRule,\n focusable,\n shadow,\n disabled,\n spin: iconSpinning,\n tooltipProps,\n danger,\n ref,\n ...rest\n }) => {\n const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n const popupTriggerAria = rest as {\n 'aria-expanded'?: unknown;\n 'aria-haspopup'?: unknown;\n 'aria-label'?: string;\n };\n const isPopupTrigger =\n popupTriggerAria['aria-haspopup'] !== undefined ||\n popupTriggerAria['aria-expanded'] !== undefined;\n const popupTriggerLabel =\n popupTriggerAria['aria-label'] ??\n (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (loading || disabled) return;\n onClick?.(event);\n },\n [loading, disabled, onClick],\n );\n\n const node = (\n <Center\n horizontal\n className={cx(variants({ active, danger, disabled, glass, shadow, variant }), className)}\n flex={'none'}\n ref={ref}\n role=\"button\"\n style={{ borderRadius, height: blockSize, width: blockSize, ...style }}\n tabIndex={disabled ? -1 : 0}\n onClick={handleClick}\n {...rest}\n aria-label={popupTriggerLabel}\n >\n {icon && (\n <Icon\n color={color}\n fill={fill}\n fillOpacity={fillOpacity}\n fillRule={fillRule}\n focusable={focusable}\n icon={loading ? Loader2 : icon}\n size={size}\n spin={loading ? true : iconSpinning}\n style={{\n pointerEvents: 'none',\n }}\n />\n )}\n </Center>\n );\n\n if (!title) return node;\n\n return (\n <Tooltip\n title={title}\n {...tooltipProps}\n styles={\n typeof tooltipProps?.styles === 'function'\n ? tooltipProps.styles\n : {\n ...tooltipProps?.styles,\n container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n }\n }\n >\n {node}\n </Tooltip>\n );\n },\n);\n\nActionIcon.displayName = 'ActionIcon';\n\nexport default ActionIcon;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../src/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, type MouseEventHandler, useCallback, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\n\n/**\n * @deprecated Use `ActionIcon` from `@lobehub/ui/base-ui` instead.\n */\nconst ActionIcon = memo<ActionIconProps>(\n ({\n color,\n fill,\n className,\n active,\n icon,\n size = 'middle',\n variant = 'borderless',\n style,\n glass,\n title,\n onClick,\n loading,\n fillOpacity,\n fillRule,\n focusable,\n shadow,\n disabled,\n spin: iconSpinning,\n tooltipProps,\n danger,\n ref,\n ...rest\n }) => {\n const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n const popupTriggerAria = rest as {\n 'aria-expanded'?: unknown;\n 'aria-haspopup'?: unknown;\n 'aria-label'?: string;\n };\n const isPopupTrigger =\n popupTriggerAria['aria-haspopup'] !== undefined ||\n popupTriggerAria['aria-expanded'] !== undefined;\n const popupTriggerLabel =\n popupTriggerAria['aria-label'] ??\n (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (loading || disabled) return;\n onClick?.(event);\n },\n [loading, disabled, onClick],\n );\n\n const node = (\n <Center\n horizontal\n className={cx(variants({ active, danger, disabled, glass, shadow, variant }), className)}\n flex={'none'}\n ref={ref}\n role=\"button\"\n style={{ borderRadius, height: blockSize, width: blockSize, ...style }}\n tabIndex={disabled ? -1 : 0}\n onClick={handleClick}\n {...rest}\n aria-label={popupTriggerLabel}\n >\n {icon && (\n <Icon\n color={color}\n fill={fill}\n fillOpacity={fillOpacity}\n fillRule={fillRule}\n focusable={focusable}\n icon={loading ? Loader2 : icon}\n size={size}\n spin={loading ? true : iconSpinning}\n style={{\n pointerEvents: 'none',\n }}\n />\n )}\n </Center>\n );\n\n if (!title) return node;\n\n return (\n <Tooltip\n title={title}\n {...tooltipProps}\n styles={\n typeof tooltipProps?.styles === 'function'\n ? tooltipProps.styles\n : {\n ...tooltipProps?.styles,\n container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n }\n }\n >\n {node}\n </Tooltip>\n );\n },\n);\n\nActionIcon.displayName = 'ActionIcon';\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aAAa,MAChB,EACC,OACA,MACA,WACA,QACA,MACA,OAAO,UACP,UAAU,cACV,OACA,OACA,OACA,SACA,SACA,aACA,UACA,WACA,QACA,UACA,MAAM,cACN,cACA,QACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,cAAc,aACjB,UAAU;EACT,IAAI,WAAW,UAAU;EACzB,UAAU,KAAK;CACjB,GACA;EAAC;EAAS;EAAU;CAAO,CAC7B;CAEA,MAAM,OACJ,oBAAC,QAAD;EACE,YAAA;EACA,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAU;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACvF,MAAM;EACD;EACL,MAAK;EACL,OAAO;GAAE;GAAc,QAAQ;GAAW,OAAO;GAAW,GAAG;EAAM;EACrE,UAAU,WAAW,KAAK;EAC1B,SAAS;EACT,GAAI;EACJ,cAAY;EAEX,UAAA,QACC,oBAAC,MAAD;GACS;GACD;GACO;GACH;GACC;GACX,MAAM,UAAU,UAAU;GACpB;GACN,MAAM,UAAU,OAAO;GACvB,OAAO,EACL,eAAe,OACjB;EACD,CAAA;CAEG,CAAA;CAGV,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QACE,OAAO,cAAc,WAAW,aAC5B,aAAa,SACb;GACE,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAGL,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}
|
package/es/Avatar/Avatar.mjs
CHANGED
|
@@ -13,6 +13,9 @@ import { cssVar, cx } from "antd-style";
|
|
|
13
13
|
import { Loader2 } from "lucide-react";
|
|
14
14
|
import { getEmoji } from "@lobehub/fluent-emoji";
|
|
15
15
|
//#region src/Avatar/Avatar.tsx
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `Avatar` from `@lobehub/ui/base-ui` instead.
|
|
18
|
+
*/
|
|
16
19
|
const Avatar$1 = memo(({ bordered, className, avatar, title, animation, borderedColor, size = 48, shape = "square", background, style, unoptimized, alt, variant = "borderless", shadow, loading, sliceText = true, emojiScaleWithBackground = true, ref, ...rest }) => {
|
|
17
20
|
const isStringAvatar = typeof avatar === "string";
|
|
18
21
|
const isDefaultAntAvatar$1 = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
|
package/es/Avatar/Avatar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","AntAvatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n calculateEmojiSize,\n formatAvatarText,\n hasValidBackground,\n isDefaultAntAvatar as checkIsDefaultAntAvatar,\n} from './utils';\n\nconst Avatar = memo<AvatarProps>(\n ({\n bordered,\n className,\n avatar,\n title,\n animation,\n borderedColor,\n size = 48,\n shape = 'square',\n background,\n style,\n unoptimized,\n alt,\n variant = 'borderless',\n shadow,\n loading,\n sliceText = true,\n emojiScaleWithBackground = true,\n ref,\n ...rest\n }) => {\n const isStringAvatar = typeof avatar === 'string';\n\n const isDefaultAntAvatar = useMemo(() => checkIsDefaultAntAvatar(avatar), [avatar]);\n const [isImgError, setIsImgError] = useState(false);\n\n const emoji = useMemo(\n () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n [avatar, isStringAvatar, isDefaultAntAvatar],\n );\n\n const text = String(isDefaultAntAvatar ? title : avatar);\n\n const imgAlt = alt || title || 'avatar';\n\n const defaultAvatar = useMemo(\n () =>\n typeof avatar === 'string' ? (\n <Img\n alt={imgAlt}\n height={size}\n loading={'lazy'}\n src={avatar}\n unoptimized={unoptimized}\n width={size}\n onError={() => setIsImgError(true)}\n />\n ) : (\n avatar\n ),\n [avatar, imgAlt, size, unoptimized],\n );\n\n const hasBackground = hasValidBackground(background);\n\n const customAvatar = useMemo(\n () =>\n emoji ? (\n <FluentEmoji\n emoji={emoji}\n size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n type={animation ? 'anim' : '3d'}\n unoptimized={unoptimized}\n />\n ) : (\n formatAvatarText(text || title, sliceText)\n ),\n [\n animation,\n emoji,\n hasBackground,\n size,\n sliceText,\n text,\n title,\n unoptimized,\n emojiScaleWithBackground,\n ],\n );\n\n const avatarStyle = useMemo(\n () => ({\n backgroundColor:\n (isDefaultAntAvatar && !isImgError) || emoji\n ? background\n : background || cssVar.colorBorder,\n borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n boxShadow: bordered\n ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n : undefined,\n color: safeReadableColor(background || cssVar.colorBorder),\n cursor: rest?.onClick ? 'pointer' : undefined,\n fontSize: size * (emoji ? 0.7 : 0.5),\n ...style,\n }),\n [\n isDefaultAntAvatar,\n isImgError,\n background,\n shape,\n emoji,\n size,\n bordered,\n borderedColor,\n rest?.onClick,\n style,\n ],\n );\n\n const showFallback = !isDefaultAntAvatar || isImgError;\n\n return (\n <AntAvatar\n alt={imgAlt}\n className={cx(variants({ shadow, variant }), className)}\n draggable={false}\n ref={ref}\n shape={shape}\n size={size}\n src={isDefaultAntAvatar && !isImgError ? defaultAvatar : undefined}\n style={avatarStyle}\n {...rest}\n >\n {loading && (\n <Center className={styles.loading} height={'100%'} width={'100%'}>\n <Icon spin icon={Loader2} />\n </Center>\n )}\n {showFallback && customAvatar}\n </AntAvatar>\n );\n },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","AntAvatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n calculateEmojiSize,\n formatAvatarText,\n hasValidBackground,\n isDefaultAntAvatar as checkIsDefaultAntAvatar,\n} from './utils';\n\n/**\n * @deprecated Use `Avatar` from `@lobehub/ui/base-ui` instead.\n */\nconst Avatar = memo<AvatarProps>(\n ({\n bordered,\n className,\n avatar,\n title,\n animation,\n borderedColor,\n size = 48,\n shape = 'square',\n background,\n style,\n unoptimized,\n alt,\n variant = 'borderless',\n shadow,\n loading,\n sliceText = true,\n emojiScaleWithBackground = true,\n ref,\n ...rest\n }) => {\n const isStringAvatar = typeof avatar === 'string';\n\n const isDefaultAntAvatar = useMemo(() => checkIsDefaultAntAvatar(avatar), [avatar]);\n const [isImgError, setIsImgError] = useState(false);\n\n const emoji = useMemo(\n () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n [avatar, isStringAvatar, isDefaultAntAvatar],\n );\n\n const text = String(isDefaultAntAvatar ? title : avatar);\n\n const imgAlt = alt || title || 'avatar';\n\n const defaultAvatar = useMemo(\n () =>\n typeof avatar === 'string' ? (\n <Img\n alt={imgAlt}\n height={size}\n loading={'lazy'}\n src={avatar}\n unoptimized={unoptimized}\n width={size}\n onError={() => setIsImgError(true)}\n />\n ) : (\n avatar\n ),\n [avatar, imgAlt, size, unoptimized],\n );\n\n const hasBackground = hasValidBackground(background);\n\n const customAvatar = useMemo(\n () =>\n emoji ? (\n <FluentEmoji\n emoji={emoji}\n size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n type={animation ? 'anim' : '3d'}\n unoptimized={unoptimized}\n />\n ) : (\n formatAvatarText(text || title, sliceText)\n ),\n [\n animation,\n emoji,\n hasBackground,\n size,\n sliceText,\n text,\n title,\n unoptimized,\n emojiScaleWithBackground,\n ],\n );\n\n const avatarStyle = useMemo(\n () => ({\n backgroundColor:\n (isDefaultAntAvatar && !isImgError) || emoji\n ? background\n : background || cssVar.colorBorder,\n borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n boxShadow: bordered\n ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n : undefined,\n color: safeReadableColor(background || cssVar.colorBorder),\n cursor: rest?.onClick ? 'pointer' : undefined,\n fontSize: size * (emoji ? 0.7 : 0.5),\n ...style,\n }),\n [\n isDefaultAntAvatar,\n isImgError,\n background,\n shape,\n emoji,\n size,\n bordered,\n borderedColor,\n rest?.onClick,\n style,\n ],\n );\n\n const showFallback = !isDefaultAntAvatar || isImgError;\n\n return (\n <AntAvatar\n alt={imgAlt}\n className={cx(variants({ shadow, variant }), className)}\n draggable={false}\n ref={ref}\n shape={shape}\n size={size}\n src={isDefaultAntAvatar && !isImgError ? defaultAvatar : undefined}\n style={avatarStyle}\n {...rest}\n >\n {loading && (\n <Center className={styles.loading} height={'100%'} width={'100%'}>\n <Icon spin icon={Loader2} />\n </Center>\n )}\n {showFallback && customAvatar}\n </AntAvatar>\n );\n },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAS,MACZ,EACC,UACA,WACA,QACA,OACA,WACA,eACA,OAAO,IACP,QAAQ,UACR,YACA,OACA,aACA,KACA,UAAU,cACV,QACA,SACA,YAAY,MACZ,2BAA2B,MAC3B,KACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAMC,uBAAqB,cAAcC,mBAAwB,MAAM,GAAG,CAAC,MAAM,CAAC;CAClF,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,QAAQ,cACN,UAAU,CAACD,wBAAsB,kBAAkB,SAAS,MAAM,GACxE;EAAC;EAAQ;EAAgBA;CAAkB,CAC7C;CAEA,MAAM,OAAO,OAAOA,uBAAqB,QAAQ,MAAM;CAEvD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,cAElB,OAAO,WAAW,WAChB,oBAAC,KAAD;EACE,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;EACP,eAAe,cAAc,IAAI;CAClC,CAAA,IAED,QAEJ;EAAC;EAAQ;EAAQ;EAAM;CAAW,CACpC;CAEA,MAAM,gBAAgB,mBAAmB,UAAU;CAEnD,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,cAAc,eACX;EACL,iBACGA,wBAAsB,CAAC,cAAe,QACnC,aACA,cAAc,OAAO;EAC3B,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ,KAAA;EAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;EACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;EACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;EACpC,UAAU,QAAQ,QAAQ,KAAM;EAChC,GAAG;CACL,IACA;EACEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;CACF,CACF;CAEA,MAAM,eAAe,CAACA,wBAAsB;CAE5C,OACE,qBAACE,QAAD;EACE,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,WAAW;EACN;EACE;EACD;EACN,KAAKF,wBAAsB,CAAC,aAAa,gBAAgB,KAAA;EACzD,OAAO;EACP,GAAI;EATN,UAAA,CAWG,WACC,oBAAC,QAAD;GAAQ,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;GACxD,UAAA,oBAAC,MAAD;IAAM,MAAA;IAAK,MAAM;GAAU,CAAA;EACrB,CAAA,GAET,gBAAgB,YACR;;AAEf,CACF;AAEA,SAAO,cAAc"}
|
package/es/Tag/Tag.d.mts
CHANGED
package/es/Tag/Tag.mjs
CHANGED
|
@@ -7,6 +7,9 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
import { Tag } from "antd";
|
|
8
8
|
import { cssVar, cx } from "antd-style";
|
|
9
9
|
//#region src/Tag/Tag.tsx
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `Tag` from `@lobehub/ui/base-ui` instead.
|
|
12
|
+
*/
|
|
10
13
|
const Tag$1 = ({ className, ref, shape = "normal", size = "middle", color, variant = "filled", children, onClick, style, ...rest }) => {
|
|
11
14
|
const colors = useMemo(() => {
|
|
12
15
|
let textColor = cssVar.colorTextSecondary;
|
|
@@ -31,7 +34,7 @@ const Tag$1 = ({ className, ref, shape = "normal", size = "middle", color, varia
|
|
|
31
34
|
borderColor = isSolid ? solidBgColor : colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
|
|
32
35
|
}
|
|
33
36
|
if (isHexColor) {
|
|
34
|
-
textColor = isSolid ? safeReadableColor(color) : cssVar.colorBgLayout;
|
|
37
|
+
textColor = isSolid ? safeReadableColor(color) : isBorderless ? color : cssVar.colorBgLayout;
|
|
35
38
|
backgroundColor = isSolid ? color : isBorderless ? "transparent" : color;
|
|
36
39
|
borderColor = isSolid ? color : borderColor;
|
|
37
40
|
}
|
package/es/Tag/Tag.mjs.map
CHANGED
|
@@ -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';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n shape = 'normal',\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 isSolid = variant === 'solid';\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 const solidBgColor = colorsPreset(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPreset(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isPresetSystemColors) {\n const solidBgColor = colorsPresetSystem(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPresetSystem(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isHexColor) {\n textColor = isSolid ? safeReadableColor(color) : cssVar.colorBgLayout;\n backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n borderColor = isSolid ? color : borderColor;\n }\n\n return {\n backgroundColor,\n borderColor,\n textColor,\n };\n }, [color, variant]);\n\n return (\n <AntTag\n className={cx(variants({ shape, size, variant: variant as any }), className)}\n color={color}\n ref={ref}\n variant={variant === 'borderless' ? 'outlined' : variant === 'solid' ? 'filled' : 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":"
|
|
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';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\n/**\n * @deprecated Use `Tag` from `@lobehub/ui/base-ui` instead.\n */\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n shape = 'normal',\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 isSolid = variant === 'solid';\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 const solidBgColor = colorsPreset(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPreset(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isPresetSystemColors) {\n const solidBgColor = colorsPresetSystem(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPresetSystem(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isHexColor) {\n textColor = isSolid ? safeReadableColor(color) : isBorderless ? color : cssVar.colorBgLayout;\n backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n borderColor = isSolid ? color : borderColor;\n }\n\n return {\n backgroundColor,\n borderColor,\n textColor,\n };\n }, [color, variant]);\n\n return (\n <AntTag\n className={cx(variants({ shape, size, variant: variant as any }), className)}\n color={color}\n ref={ref}\n variant={variant === 'borderless' ? 'outlined' : variant === 'solid' ? 'filled' : 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":";;;;;;;;;;;;AAeA,MAAMA,SAAqB,EACzB,WACA,KACA,QAAQ,UACR,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,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UAAU,kBAAkB,KAAK,IAAI,eAAe,QAAQ,OAAO;GAC/E,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAO;GAAe;EAAe,CAAC,GAAG,SAAS;EACpE;EACF;EACL,SAAS,YAAY,eAAe,aAAa,YAAY,UAAU,WAAW;EAClF,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;EACL;EACS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,MAAI,cAAc"}
|
package/es/Text/Text.d.mts
CHANGED
package/es/Text/Text.mjs
CHANGED
|
@@ -6,6 +6,9 @@ import { useRef } from "react";
|
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
8
|
//#region src/Text/Text.tsx
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `Text` from `@lobehub/ui/base-ui` instead.
|
|
11
|
+
*/
|
|
9
12
|
const Text = ({ as: Container = "div", align, className, children, style, type, disabled, strong, italic, underline, delete: deleteStyle, fontSize, lineClamp, lineHeight, mark, code, color, weight, ellipsis, noWrap, textDecoration, textTransform, whiteSpace, wordBreak, ...rest }) => {
|
|
10
13
|
const textRef = useRef(null);
|
|
11
14
|
const isOverflow = useTextOverflow(textRef, ellipsis, children);
|
package/es/Text/Text.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useRef } from 'react';\n\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\nimport Tooltip from '@/Tooltip';\n\nimport { variants } from './styles';\nimport { type TextProps } from './type';\n\nconst Text: FC<TextProps> = ({\n as: Container = 'div',\n align,\n className,\n children,\n style,\n type,\n disabled,\n strong,\n italic,\n underline,\n delete: deleteStyle,\n fontSize,\n lineClamp,\n lineHeight,\n mark,\n code,\n color,\n weight,\n ellipsis,\n noWrap,\n textDecoration,\n textTransform,\n whiteSpace,\n wordBreak,\n ...rest\n}) => {\n const textRef = useRef<HTMLElement>(null);\n const isOverflow = useTextOverflow(textRef, ellipsis, children);\n\n const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;\n const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n const textStyle = {\n ...(color && { color }),\n ...(weight && { fontWeight: weight }),\n ...(lineHeight && { lineHeight }),\n ...(textTransform && { textTransform }),\n ...(textDecoration && { textDecoration }),\n ...(wordBreak && { wordBreak }),\n ...(typeof ellipsis === 'object' &&\n ellipsis.rows && {\n WebkitLineClamp: ellipsis.rows,\n }),\n ...(!ellipsis &&\n !!lineClamp && {\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: lineClamp,\n display: '-webkit-box',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n ...(fontSize && { fontSize }),\n ...(align && { textAlign: align }),\n ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),\n ...(whiteSpace && { whiteSpace }),\n ...style,\n };\n\n const content = (\n <Container\n ref={textRef}\n style={textStyle}\n className={cx(\n variants({\n as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n ? (Container as any)\n : undefined,\n code,\n delete: deleteStyle,\n disabled,\n ellipsis: ellipsis\n ? typeof ellipsis === 'object' && ellipsis.rows\n ? 'multi'\n : true\n : undefined,\n italic,\n mark,\n strong,\n type,\n underline,\n }),\n className,\n )}\n {...rest}\n >\n {children}\n </Container>\n );\n\n // 处理带有 tooltip 的省略\n if (\n ellipsis &&\n typeof ellipsis === 'object' &&\n (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)\n ) {\n // 如果设置了 tooltipWhenOverflow,只在溢出时显示 tooltip\n if (tooltipWhenOverflow && !isOverflow) {\n return content;\n }\n\n const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')\n return (\n <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n {content}\n </Tooltip>\n );\n return <Tooltip title={title}>{content}</Tooltip>;\n }\n\n return content;\n};\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.mjs","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC, useRef } from 'react';\n\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\nimport Tooltip from '@/Tooltip';\n\nimport { variants } from './styles';\nimport { type TextProps } from './type';\n\n/**\n * @deprecated Use `Text` from `@lobehub/ui/base-ui` instead.\n */\nconst Text: FC<TextProps> = ({\n as: Container = 'div',\n align,\n className,\n children,\n style,\n type,\n disabled,\n strong,\n italic,\n underline,\n delete: deleteStyle,\n fontSize,\n lineClamp,\n lineHeight,\n mark,\n code,\n color,\n weight,\n ellipsis,\n noWrap,\n textDecoration,\n textTransform,\n whiteSpace,\n wordBreak,\n ...rest\n}) => {\n const textRef = useRef<HTMLElement>(null);\n const isOverflow = useTextOverflow(textRef, ellipsis, children);\n\n const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;\n const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n const textStyle = {\n ...(color && { color }),\n ...(weight && { fontWeight: weight }),\n ...(lineHeight && { lineHeight }),\n ...(textTransform && { textTransform }),\n ...(textDecoration && { textDecoration }),\n ...(wordBreak && { wordBreak }),\n ...(typeof ellipsis === 'object' &&\n ellipsis.rows && {\n WebkitLineClamp: ellipsis.rows,\n }),\n ...(!ellipsis &&\n !!lineClamp && {\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: lineClamp,\n display: '-webkit-box',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n ...(fontSize && { fontSize }),\n ...(align && { textAlign: align }),\n ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),\n ...(whiteSpace && { whiteSpace }),\n ...style,\n };\n\n const content = (\n <Container\n ref={textRef}\n style={textStyle}\n className={cx(\n variants({\n as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n ? (Container as any)\n : undefined,\n code,\n delete: deleteStyle,\n disabled,\n ellipsis: ellipsis\n ? typeof ellipsis === 'object' && ellipsis.rows\n ? 'multi'\n : true\n : undefined,\n italic,\n mark,\n strong,\n type,\n underline,\n }),\n className,\n )}\n {...rest}\n >\n {children}\n </Container>\n );\n\n // 处理带有 tooltip 的省略\n if (\n ellipsis &&\n typeof ellipsis === 'object' &&\n (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)\n ) {\n // 如果设置了 tooltipWhenOverflow,只在溢出时显示 tooltip\n if (tooltipWhenOverflow && !isOverflow) {\n return content;\n }\n\n const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')\n return (\n <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n {content}\n </Tooltip>\n );\n return <Tooltip title={title}>{content}</Tooltip>;\n }\n\n return content;\n};\n\nText.displayName = 'Text';\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,QAAuB,EAC3B,IAAI,YAAY,OAChB,OACA,WACA,UACA,OACA,MACA,UACA,QACA,QACA,WACA,QAAQ,aACR,UACA,WACA,YACA,MACA,MACA,OACA,QACA,UACA,QACA,gBACA,eACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAoB,IAAI;CACxC,MAAM,aAAa,gBAAgB,SAAS,UAAU,QAAQ;CAE9D,MAAM,kBAAkB,OAAO,aAAa,YAAY,CAAC,CAAC,SAAS,QAAQ,SAAS,OAAO;CAC3F,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;CAErE,MAAM,YAAY;EAChB,GAAI,SAAS,EAAE,MAAM;EACrB,GAAI,UAAU,EAAE,YAAY,OAAO;EACnC,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAI,iBAAiB,EAAE,cAAc;EACrC,GAAI,kBAAkB,EAAE,eAAe;EACvC,GAAI,aAAa,EAAE,UAAU;EAC7B,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,KAC5B;EACF,GAAI,CAAC,YACH,CAAC,CAAC,aAAa;GACb,iBAAiB;GACjB,iBAAiB;GACjB,SAAS;GACT,UAAU;GACV,cAAc;EAChB;EACF,GAAI,YAAY,EAAE,SAAS;EAC3B,GAAI,SAAS,EAAE,WAAW,MAAM;EAChC,GAAI,CAAC,mBAAmB,UAAU,EAAE,YAAY,SAAkB;EAClE,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAG;CACL;CAEA,MAAM,UACJ,oBAAC,WAAD;EACE,KAAK;EACL,OAAO;EACP,WAAW,GACT,SAAS;GACP,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;GAAG,CAAC,CAAC,SAAS,SAAmB,IAC/D,YACD,KAAA;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF,KAAA;GACJ;GACA;GACA;GACA;GACA;EACF,CAAC,GACD,SACF;EACA,GAAI;EAEH;CACQ,CAAA;CAIb,IACE,YACA,OAAO,aAAa,aACnB,SAAS,WAAW,SAAS,sBAC9B;EAEA,IAAI,uBAAuB,CAAC,YAC1B,OAAO;EAGT,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;EACxE,IAAI,SAAS,WAAW,OAAO,SAAS,YAAY,UAClD,OACE,oBAAC,SAAD;GAAS,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;GAC9D,UAAA;EACM,CAAA;EAEb,OAAO,oBAAC,SAAD;GAAgB;GAAQ,UAAA;EAAiB,CAAA;CAClD;CAEA,OAAO;AACT;AAEA,KAAK,cAAc"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ActionIconProps } from "./type.mjs";
|
|
2
|
+
//#region src/base-ui/ActionIcon/ActionIcon.d.ts
|
|
3
|
+
declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { ActionIcon as default };
|
|
6
|
+
//# sourceMappingURL=ActionIcon.d.mts.map
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import Icon from "../../Icon/Icon.mjs";
|
|
3
|
+
import { Tooltip } from "../Tooltip/Tooltip.mjs";
|
|
4
|
+
import Button from "../Button/Button.mjs";
|
|
5
|
+
import { variants } from "./style.mjs";
|
|
6
|
+
import { calcSize } from "./utils.mjs";
|
|
7
|
+
import { memo, useMemo } from "react";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import { cx } from "antd-style";
|
|
10
|
+
//#region src/base-ui/ActionIcon/ActionIcon.tsx
|
|
11
|
+
const resolveButtonType = (variant) => {
|
|
12
|
+
if (variant === "filled") return "fill";
|
|
13
|
+
if (variant === "outlined") return "default";
|
|
14
|
+
return "text";
|
|
15
|
+
};
|
|
16
|
+
const resolveButtonSize = (size) => {
|
|
17
|
+
if (size === "small") return "small";
|
|
18
|
+
if (size === "large") return "large";
|
|
19
|
+
return "middle";
|
|
20
|
+
};
|
|
21
|
+
const ActionIcon = memo(({ active, className, classNames, color, danger, disabled, fill, fillOpacity, fillRule, focusable, glass, icon, loading, onClick, ref, shadow, size = "middle", spin: iconSpinning, style, styles, title, tooltipProps, variant = "borderless", ...rest }) => {
|
|
22
|
+
const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
|
|
23
|
+
const popupTriggerAria = rest;
|
|
24
|
+
const isPopupTrigger = popupTriggerAria["aria-haspopup"] !== void 0 || popupTriggerAria["aria-expanded"] !== void 0;
|
|
25
|
+
const popupTriggerLabel = popupTriggerAria["aria-label"] ?? (isPopupTrigger && typeof title === "string" ? title : void 0);
|
|
26
|
+
const handleClick = (event) => {
|
|
27
|
+
onClick?.(event);
|
|
28
|
+
};
|
|
29
|
+
const iconNode = icon ? /* @__PURE__ */ jsx(Icon, {
|
|
30
|
+
className: classNames?.icon,
|
|
31
|
+
color,
|
|
32
|
+
fill,
|
|
33
|
+
fillOpacity,
|
|
34
|
+
fillRule,
|
|
35
|
+
focusable,
|
|
36
|
+
icon,
|
|
37
|
+
size,
|
|
38
|
+
spin: iconSpinning,
|
|
39
|
+
style: {
|
|
40
|
+
pointerEvents: "none",
|
|
41
|
+
...styles?.icon
|
|
42
|
+
}
|
|
43
|
+
}) : void 0;
|
|
44
|
+
const node = /* @__PURE__ */ jsx(Button, {
|
|
45
|
+
...rest,
|
|
46
|
+
"aria-label": popupTriggerLabel,
|
|
47
|
+
className: cx(variants({
|
|
48
|
+
active,
|
|
49
|
+
glass,
|
|
50
|
+
shadow
|
|
51
|
+
}), classNames?.root, className),
|
|
52
|
+
danger,
|
|
53
|
+
disabled,
|
|
54
|
+
htmlType: "button",
|
|
55
|
+
icon: iconNode,
|
|
56
|
+
loading,
|
|
57
|
+
ref,
|
|
58
|
+
size: resolveButtonSize(size),
|
|
59
|
+
tabIndex: disabled ? -1 : 0,
|
|
60
|
+
type: resolveButtonType(variant),
|
|
61
|
+
style: {
|
|
62
|
+
borderRadius,
|
|
63
|
+
height: blockSize,
|
|
64
|
+
width: blockSize,
|
|
65
|
+
...styles?.root,
|
|
66
|
+
...style
|
|
67
|
+
},
|
|
68
|
+
onClick: handleClick
|
|
69
|
+
});
|
|
70
|
+
if (!title) return node;
|
|
71
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
72
|
+
title,
|
|
73
|
+
...tooltipProps,
|
|
74
|
+
styles: {
|
|
75
|
+
...tooltipProps?.styles,
|
|
76
|
+
container: {
|
|
77
|
+
pointerEvents: "none",
|
|
78
|
+
...tooltipProps?.styles?.container
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
children: node
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
ActionIcon.displayName = "ActionIcon";
|
|
85
|
+
//#endregion
|
|
86
|
+
export { ActionIcon as default };
|
|
87
|
+
|
|
88
|
+
//# sourceMappingURL=ActionIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/base-ui/Button';\nimport Button from '@/base-ui/Button';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\nimport { calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n if (variant === 'filled') return 'fill' as const;\n if (variant === 'outlined') return 'default' as const;\n return 'text' as const;\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n if (size === 'small') return 'small' as const;\n if (size === 'large') return 'large' as const;\n return 'middle' as const;\n};\n\nconst ActionIcon = memo<ActionIconProps>(\n ({\n active,\n className,\n classNames,\n color,\n danger,\n disabled,\n fill,\n fillOpacity,\n fillRule,\n focusable,\n glass,\n icon,\n loading,\n onClick,\n ref,\n shadow,\n size = 'middle',\n spin: iconSpinning,\n style,\n styles,\n title,\n tooltipProps,\n variant = 'borderless',\n ...rest\n }) => {\n const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n const popupTriggerAria = rest as {\n 'aria-expanded'?: unknown;\n 'aria-haspopup'?: unknown;\n 'aria-label'?: string;\n };\n const isPopupTrigger =\n popupTriggerAria['aria-haspopup'] !== undefined ||\n popupTriggerAria['aria-expanded'] !== undefined;\n const popupTriggerLabel =\n popupTriggerAria['aria-label'] ??\n (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n const handleClick: ButtonProps['onClick'] = (event) => {\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n };\n\n const iconNode = icon ? (\n <Icon\n className={classNames?.icon}\n color={color}\n fill={fill}\n fillOpacity={fillOpacity}\n fillRule={fillRule}\n focusable={focusable}\n icon={icon}\n size={size}\n spin={iconSpinning}\n style={{ pointerEvents: 'none', ...styles?.icon }}\n />\n ) : undefined;\n\n const node = (\n <Button\n {...(rest as unknown as ButtonProps)}\n aria-label={popupTriggerLabel}\n className={cx(variants({ active, glass, shadow }), classNames?.root, className)}\n danger={danger}\n disabled={disabled}\n htmlType=\"button\"\n icon={iconNode}\n loading={loading}\n ref={ref as unknown as Ref<HTMLButtonElement>}\n size={resolveButtonSize(size)}\n tabIndex={disabled ? -1 : 0}\n type={resolveButtonType(variant)}\n style={{\n borderRadius,\n height: blockSize,\n width: blockSize,\n ...styles?.root,\n ...style,\n }}\n onClick={handleClick}\n />\n );\n\n if (!title) return node;\n\n return (\n <Tooltip\n title={title}\n {...tooltipProps}\n styles={{\n ...tooltipProps?.styles,\n container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n }}\n >\n {node}\n </Tooltip>\n );\n },\n);\n\nActionIcon.displayName = 'ActionIcon';\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAEA,MAAM,aAAa,MAChB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QACA,OACA,cACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,QAAQ;EAAK;CACjD,CAAA,IACC,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EACtE;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL;GACA,QAAQ;GACR,OAAO;GACP,GAAG,QAAQ;GACX,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ActionIconClassNames, ActionIconProps, ActionIconSize, ActionIconStyles } from "./type.mjs";
|
|
2
|
+
import ActionIcon from "./ActionIcon.mjs";
|
|
3
|
+
import { styles } from "./style.mjs";
|
|
4
|
+
export { type ActionIconClassNames, type ActionIconProps, type ActionIconSize, type ActionIconStyles, styles as actionIconStyles, ActionIcon as default };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
|
|
2
|
+
import { createStaticStyles } from "antd-style";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
//#region src/base-ui/ActionIcon/style.ts
|
|
5
|
+
const styles = createStaticStyles(() => {
|
|
6
|
+
return {
|
|
7
|
+
active: staticStylish.active,
|
|
8
|
+
glass: staticStylish.blur,
|
|
9
|
+
shadow: staticStylish.shadow
|
|
10
|
+
};
|
|
11
|
+
});
|
|
12
|
+
const variants = cva(null, {
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
active: false,
|
|
15
|
+
glass: false,
|
|
16
|
+
shadow: false
|
|
17
|
+
},
|
|
18
|
+
variants: {
|
|
19
|
+
active: {
|
|
20
|
+
false: null,
|
|
21
|
+
true: styles.active
|
|
22
|
+
},
|
|
23
|
+
glass: {
|
|
24
|
+
false: null,
|
|
25
|
+
true: styles.glass
|
|
26
|
+
},
|
|
27
|
+
shadow: {
|
|
28
|
+
false: null,
|
|
29
|
+
true: styles.shadow
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
//#endregion
|
|
34
|
+
export { styles, variants };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/ActionIcon/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(() => {\n return {\n active: lobeStaticStylish.active,\n glass: lobeStaticStylish.blur,\n shadow: lobeStaticStylish.shadow,\n };\n});\n\nexport const variants = cva(null, {\n defaultVariants: {\n active: false,\n glass: false,\n shadow: false,\n },\n\n variants: {\n active: {\n false: null,\n true: styles.active,\n },\n glass: {\n false: null,\n true: styles.glass,\n },\n shadow: {\n false: null,\n true: styles.shadow,\n },\n },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,yBAAyB;CAC7C,OAAO;EACL,QAAQA,cAAkB;EAC1B,OAAOA,cAAkB;EACzB,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,MAAM;CAChC,iBAAiB;EACf,QAAQ;EACR,OAAO;EACP,QAAQ;CACV;CAEA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { CenterProps } from "../../Flex/type.mjs";
|
|
2
|
+
import "../../Flex/index.mjs";
|
|
3
|
+
import { IconProps, IconSizeConfig, IconSizeType, LucideIconProps } from "../../Icon/type.mjs";
|
|
4
|
+
import "../../Icon/index.mjs";
|
|
5
|
+
import { TooltipProps } from "../Tooltip/type.mjs";
|
|
6
|
+
import "../Tooltip/index.mjs";
|
|
7
|
+
import { CSSProperties, ReactNode, Ref } from "react";
|
|
8
|
+
//#region src/base-ui/ActionIcon/type.d.ts
|
|
9
|
+
interface ActionIconSizeConfig extends IconSizeConfig {
|
|
10
|
+
blockSize?: number | string;
|
|
11
|
+
borderRadius?: number | string;
|
|
12
|
+
}
|
|
13
|
+
type ActionIconSize = number | IconSizeType | ActionIconSizeConfig;
|
|
14
|
+
interface ActionIconClassNames {
|
|
15
|
+
icon?: string;
|
|
16
|
+
root?: string;
|
|
17
|
+
}
|
|
18
|
+
interface ActionIconStyles {
|
|
19
|
+
icon?: CSSProperties;
|
|
20
|
+
root?: CSSProperties;
|
|
21
|
+
}
|
|
22
|
+
interface ActionIconProps extends Partial<LucideIconProps>, Omit<CenterProps, 'title' | 'children'> {
|
|
23
|
+
active?: boolean;
|
|
24
|
+
classNames?: ActionIconClassNames;
|
|
25
|
+
danger?: boolean;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
glass?: boolean;
|
|
28
|
+
icon?: IconProps['icon'] | ReactNode;
|
|
29
|
+
loading?: boolean;
|
|
30
|
+
ref?: Ref<HTMLButtonElement>;
|
|
31
|
+
shadow?: boolean;
|
|
32
|
+
size?: ActionIconSize;
|
|
33
|
+
spin?: boolean;
|
|
34
|
+
styles?: ActionIconStyles;
|
|
35
|
+
title?: TooltipProps['title'];
|
|
36
|
+
tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
|
|
37
|
+
variant?: 'borderless' | 'filled' | 'outlined';
|
|
38
|
+
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { ActionIconClassNames, ActionIconProps, ActionIconSize, ActionIconStyles };
|
|
41
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { isNumber } from "es-toolkit/compat";
|
|
2
|
+
//#region src/base-ui/ActionIcon/utils.ts
|
|
3
|
+
const calcSize = (iconSize) => {
|
|
4
|
+
let blockSize;
|
|
5
|
+
let borderRadius;
|
|
6
|
+
if (isNumber(iconSize)) {
|
|
7
|
+
const blockSize = iconSize * 1.8;
|
|
8
|
+
return {
|
|
9
|
+
blockSize,
|
|
10
|
+
borderRadius: Math.floor(blockSize / 6)
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
switch (iconSize) {
|
|
14
|
+
case "large":
|
|
15
|
+
blockSize = 44;
|
|
16
|
+
borderRadius = 8;
|
|
17
|
+
break;
|
|
18
|
+
case "middle":
|
|
19
|
+
blockSize = 36;
|
|
20
|
+
borderRadius = 6;
|
|
21
|
+
break;
|
|
22
|
+
case "small":
|
|
23
|
+
blockSize = 24;
|
|
24
|
+
borderRadius = 4;
|
|
25
|
+
break;
|
|
26
|
+
default: if (iconSize) {
|
|
27
|
+
blockSize = iconSize?.blockSize || 36;
|
|
28
|
+
borderRadius = iconSize?.borderRadius || 6;
|
|
29
|
+
} else {
|
|
30
|
+
blockSize = "1.8em";
|
|
31
|
+
borderRadius = "0.3em";
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
blockSize,
|
|
36
|
+
borderRadius
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
//#endregion
|
|
40
|
+
export { calcSize };
|
|
41
|
+
|
|
42
|
+
//# sourceMappingURL=utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\n\nimport type { ActionIconSize } from './type';\n\nexport const calcSize = (iconSize?: ActionIconSize) => {\n let blockSize: number | string;\n let borderRadius: number | string;\n\n if (isNumber(iconSize)) {\n const blockSize = iconSize * 1.8;\n return {\n blockSize,\n borderRadius: Math.floor(blockSize / 6),\n };\n }\n\n switch (iconSize) {\n case 'large': {\n blockSize = 44;\n borderRadius = 8;\n break;\n }\n case 'middle': {\n blockSize = 36;\n borderRadius = 6;\n break;\n }\n case 'small': {\n blockSize = 24;\n borderRadius = 4;\n break;\n }\n default: {\n if (iconSize) {\n blockSize = iconSize?.blockSize || 36;\n borderRadius = iconSize?.borderRadius || 6;\n } else {\n blockSize = '1.8em';\n borderRadius = '0.3em';\n }\n\n break;\n }\n }\n\n return {\n blockSize,\n borderRadius,\n };\n};\n"],"mappings":";;AAIA,MAAa,YAAY,aAA8B;CACrD,IAAI;CACJ,IAAI;CAEJ,IAAI,SAAS,QAAQ,GAAG;EACtB,MAAM,YAAY,WAAW;EAC7B,OAAO;GACL;GACA,cAAc,KAAK,MAAM,YAAY,CAAC;EACxC;CACF;CAEA,QAAQ,UAAR;EACE,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,SACE,IAAI,UAAU;GACZ,YAAY,UAAU,aAAa;GACnC,eAAe,UAAU,gBAAgB;EAC3C,OAAO;GACL,YAAY;GACZ,eAAe;EACjB;CAIJ;CAEA,OAAO;EACL;EACA;CACF;AACF"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import Center from "../../Flex/Center.mjs";
|
|
3
|
+
import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
|
|
4
|
+
import Icon from "../../Icon/Icon.mjs";
|
|
5
|
+
import FluentEmoji from "../../FluentEmoji/FluentEmoji.mjs";
|
|
6
|
+
import { styles, variants } from "./style.mjs";
|
|
7
|
+
import { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
|
|
8
|
+
import { memo, useMemo, useState } from "react";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
import { cssVar, cx } from "antd-style";
|
|
11
|
+
import { Loader2 } from "lucide-react";
|
|
12
|
+
import { getEmoji } from "@lobehub/fluent-emoji";
|
|
13
|
+
//#region src/base-ui/Avatar/Avatar.tsx
|
|
14
|
+
const Avatar = memo(({ alt, animation, avatar, background, bordered, borderedColor, className, classNames, crossOrigin, draggable = false, emojiScaleWithBackground = true, loading, ref, shadow, shape = "square", size = 48, sliceText = true, style, styles: customStyles, title, tooltipProps, unoptimized, variant = "borderless", ...rest }) => {
|
|
15
|
+
const isStringAvatar = typeof avatar === "string";
|
|
16
|
+
const [isImgError, setIsImgError] = useState(false);
|
|
17
|
+
const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
|
|
18
|
+
const emoji = useMemo(() => avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : void 0, [
|
|
19
|
+
avatar,
|
|
20
|
+
isStringAvatar,
|
|
21
|
+
isUrlOrElement
|
|
22
|
+
]);
|
|
23
|
+
const text = String(isUrlOrElement ? title : avatar);
|
|
24
|
+
const imgAlt = alt || title || "avatar";
|
|
25
|
+
const hasBackground = hasValidBackground(background);
|
|
26
|
+
const showImage = isUrlOrElement && isStringAvatar && !isImgError;
|
|
27
|
+
const showElement = isUrlOrElement && !isStringAvatar && !isImgError;
|
|
28
|
+
const customAvatar = useMemo(() => emoji ? /* @__PURE__ */ jsx(FluentEmoji, {
|
|
29
|
+
emoji,
|
|
30
|
+
size: calculateEmojiSize(size, hasBackground, emojiScaleWithBackground),
|
|
31
|
+
type: animation ? "anim" : "3d",
|
|
32
|
+
unoptimized
|
|
33
|
+
}) : formatAvatarText(text || title, sliceText), [
|
|
34
|
+
animation,
|
|
35
|
+
emoji,
|
|
36
|
+
hasBackground,
|
|
37
|
+
size,
|
|
38
|
+
sliceText,
|
|
39
|
+
text,
|
|
40
|
+
title,
|
|
41
|
+
unoptimized,
|
|
42
|
+
emojiScaleWithBackground
|
|
43
|
+
]);
|
|
44
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
45
|
+
...rest,
|
|
46
|
+
className: cx(variants({
|
|
47
|
+
shadow,
|
|
48
|
+
variant
|
|
49
|
+
}), className, classNames?.root),
|
|
50
|
+
ref,
|
|
51
|
+
style: {
|
|
52
|
+
backgroundColor: isUrlOrElement && !isImgError || emoji ? background : background || cssVar.colorBorder,
|
|
53
|
+
borderRadius: shape === "circle" ? "50%" : size < 24 ? "33%" : Math.max(size / 6, 2),
|
|
54
|
+
boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
|
|
55
|
+
color: safeReadableColor(background || cssVar.colorBorder),
|
|
56
|
+
cursor: rest?.onClick ? "pointer" : void 0,
|
|
57
|
+
fontSize: size * (emoji ? .7 : .5),
|
|
58
|
+
height: size,
|
|
59
|
+
width: size,
|
|
60
|
+
...style,
|
|
61
|
+
...customStyles?.root
|
|
62
|
+
},
|
|
63
|
+
children: [
|
|
64
|
+
loading && /* @__PURE__ */ jsx(Center, {
|
|
65
|
+
className: cx(styles.loading, classNames?.loading),
|
|
66
|
+
flex: "none",
|
|
67
|
+
height: "100%",
|
|
68
|
+
style: customStyles?.loading,
|
|
69
|
+
width: "100%",
|
|
70
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
71
|
+
spin: true,
|
|
72
|
+
icon: Loader2
|
|
73
|
+
})
|
|
74
|
+
}),
|
|
75
|
+
typeof avatar === "string" && showImage && /* @__PURE__ */ jsx("img", {
|
|
76
|
+
alt: imgAlt,
|
|
77
|
+
className: cx(styles.img, classNames?.img),
|
|
78
|
+
crossOrigin,
|
|
79
|
+
draggable,
|
|
80
|
+
height: size,
|
|
81
|
+
loading: "lazy",
|
|
82
|
+
src: avatar,
|
|
83
|
+
style: customStyles?.img,
|
|
84
|
+
width: size,
|
|
85
|
+
onError: () => setIsImgError(true)
|
|
86
|
+
}),
|
|
87
|
+
!showImage && /* @__PURE__ */ jsx("span", {
|
|
88
|
+
className: cx(styles.content, classNames?.content),
|
|
89
|
+
style: customStyles?.content,
|
|
90
|
+
children: showElement ? avatar : customAvatar
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
Avatar.displayName = "Avatar";
|
|
96
|
+
//#endregion
|
|
97
|
+
export { Avatar as default };
|
|
98
|
+
|
|
99
|
+
//# sourceMappingURL=Avatar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../src/base-ui/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n calculateEmojiSize,\n formatAvatarText,\n hasValidBackground,\n isDefaultAntAvatar,\n} from './utils';\n\nconst Avatar = memo<AvatarProps>(\n ({\n alt,\n animation,\n avatar,\n background,\n bordered,\n borderedColor,\n className,\n classNames,\n crossOrigin,\n draggable = false,\n emojiScaleWithBackground = true,\n loading,\n ref,\n shadow,\n shape = 'square',\n size = 48,\n sliceText = true,\n style,\n styles: customStyles,\n title,\n tooltipProps,\n unoptimized,\n variant = 'borderless',\n ...rest\n }) => {\n const isStringAvatar = typeof avatar === 'string';\n\n const [isImgError, setIsImgError] = useState(false);\n\n const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n const emoji = useMemo(\n () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n [avatar, isStringAvatar, isUrlOrElement],\n );\n\n const text = String(isUrlOrElement ? title : avatar);\n\n const imgAlt = alt || title || 'avatar';\n\n const hasBackground = hasValidBackground(background);\n const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n const customAvatar = useMemo(\n () =>\n emoji ? (\n <FluentEmoji\n emoji={emoji}\n size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n type={animation ? 'anim' : '3d'}\n unoptimized={unoptimized}\n />\n ) : (\n formatAvatarText(text || title, sliceText)\n ),\n [\n animation,\n emoji,\n hasBackground,\n size,\n sliceText,\n text,\n title,\n unoptimized,\n emojiScaleWithBackground,\n ],\n );\n\n return (\n <div\n {...rest}\n className={cx(variants({ shadow, variant }), className, classNames?.root)}\n ref={ref}\n style={{\n backgroundColor:\n (isUrlOrElement && !isImgError) || emoji\n ? background\n : background || cssVar.colorBorder,\n borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n boxShadow: bordered\n ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n : undefined,\n color: safeReadableColor(background || cssVar.colorBorder),\n cursor: rest?.onClick ? 'pointer' : undefined,\n fontSize: size * (emoji ? 0.7 : 0.5),\n height: size,\n width: size,\n ...style,\n ...customStyles?.root,\n }}\n >\n {loading && (\n <Center\n className={cx(styles.loading, classNames?.loading)}\n flex={'none'}\n height={'100%'}\n style={customStyles?.loading}\n width={'100%'}\n >\n <Icon spin icon={Loader2} />\n </Center>\n )}\n {typeof avatar === 'string' && showImage && (\n <img\n alt={imgAlt}\n className={cx(styles.img, classNames?.img)}\n crossOrigin={crossOrigin}\n draggable={draggable}\n height={size}\n loading={'lazy'}\n src={avatar}\n style={customStyles?.img}\n width={size}\n onError={() => setIsImgError(true)}\n />\n )}\n {!showImage && (\n <span className={cx(styles.content, classNames?.content)} style={customStyles?.content}>\n {showElement ? avatar : customAvatar}\n </span>\n )}\n </div>\n );\n },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAS,MACZ,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,OAAO,iBAAiB,QAAQ,MAAM;CAEnD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,WAAW,YAAY,IAAI;EACnE;EACL,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EApBF,UAAA;GAsBG,WACC,oBAAC,QAAD;IACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IACjD,MAAM;IACN,QAAQ;IACR,OAAO,cAAc;IACrB,OAAO;IAEP,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACL,WAAW,GAAG,OAAO,KAAK,YAAY,GAAG;IAC5B;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO,cAAc;IACrB,OAAO;IACP,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IAAG,OAAO,cAAc;IAC5E,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,OAAO,cAAc"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AvatarGroupProps } from "../type.mjs";
|
|
2
|
+
//#region src/base-ui/Avatar/AvatarGroup/index.d.ts
|
|
3
|
+
declare const AvatarGroup: import("react").NamedExoticComponent<AvatarGroupProps>;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { AvatarGroup as default };
|
|
6
|
+
//# sourceMappingURL=index.d.mts.map
|