@yuntijs/ui 1.0.0-beta.9 → 1.0.0-beta.91

package/es/Highlighter/FullFeatured.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { DivProps } from "../types";
+export interface FullFeaturedHighlighterProps extends DivProps {
+    allowChangeLanguage?: boolean;
+    /**
+     * @description The code content to be highlighted
+     */
+    children: string;
+    fileName?: string;
+    icon?: ReactNode;
+    /**
+     * @description The language of the code content
+     */
+    language: string;
+    contentStyle?: React.CSSProperties;
+}
+export declare const FullFeaturedHighlighter: import("react").NamedExoticComponent<FullFeaturedHighlighterProps>;
+export * from './SyntaxHighlighter';

package/es/Highlighter/FullFeatured.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "language", "className", "style", "allowChangeLanguage", "fileName", "icon", "contentStyle"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ActionIcon, CopyButton } from '@lobehub/ui';
+import { Select } from 'antd';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { languageMap } from "../hooks/useHighlight";
+import { SyntaxHighlighter } from "./SyntaxHighlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = languageMap.map(function (item) {
+  return {
+    label: item,
+    value: item.toLowerCase()
+  };
+});
+export var FullFeaturedHighlighter = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'markdown' : _ref$language,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$allowChangeLangu = _ref.allowChangeLanguage,
+    allowChangeLanguage = _ref$allowChangeLangu === void 0 ? false : _ref$allowChangeLangu,
+    fileName = _ref.fileName,
+    icon = _ref.icon,
+    contentStyle = _ref.contentStyle,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var _useState3 = useState(language || 'markdown'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lang = _useState4[0],
+    setLang = _useState4[1];
+  var _useStyles = useStyles('block'),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, className);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: container,
+    "data-code-type": "highlighter",
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.header,
+      horizontal: true,
+      justify: 'space-between',
+      children: [/*#__PURE__*/_jsx(ActionIcon, {
+        icon: expand ? ChevronDown : ChevronRight,
+        onClick: function onClick() {
+          return setExpand(!expand);
+        },
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 3
+        }
+      }), allowChangeLanguage && !fileName ? /*#__PURE__*/_jsx(Select, {
+        className: styles.select,
+        onSelect: setLang,
+        options: options,
+        size: 'small',
+        suffixIcon: false,
+        value: lang.toLowerCase(),
+        variant: 'borderless'
+      }) : /*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: styles.select,
+        gap: 2,
+        horizontal: true,
+        children: [icon, /*#__PURE__*/_jsx("span", {
+          children: fileName || lang
+        })]
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        content: children,
+        placement: "left",
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 2
+        }
+      })]
+    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
+      style: expand ? contentStyle : _objectSpread(_objectSpread({}, contentStyle), {}, {
+        height: 0,
+        overflow: 'hidden'
+      }),
+      children: children
+    })]
+  }));
+});
+export * from "./SyntaxHighlighter";

package/es/Highlighter/SyntaxHighlighter/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DivProps } from "../../types";
+export interface SyntaxHighlighterProps extends DivProps {
+    children: string;
+    language: string;
+}
+export declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -0,0 +1,51 @@
+import { Icon } from '@lobehub/ui';
+import { useThemeMode } from 'antd-style';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useHighlight } from "../../hooks/useHighlight";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    language = _ref.language,
+    className = _ref.className,
+    style = _ref.style;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+    data = _useHighlight.data,
+    isLoading = _useHighlight.isLoading;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isLoading || !data ? /*#__PURE__*/_jsx("div", {
+      className: cx(styles.unshiki, className),
+      style: style,
+      children: /*#__PURE__*/_jsx("pre", {
+        children: /*#__PURE__*/_jsx("div", {
+          children: children.trim()
+        })
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      className: cx(styles.shiki, className),
+      dangerouslySetInnerHTML: {
+        __html: data
+      },
+      style: style
+    }), isLoading && /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: styles.loading,
+      gap: 8,
+      horizontal: true,
+      justify: 'center',
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        spin: true
+      })
+    })]
+  });
+});

package/es/Highlighter/SyntaxHighlighter/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    loading: string;
+    shiki: string;
+    unshiki: import("antd-style").SerializedStyles;
+}>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    prefixCls = _ref.prefixCls,
+    stylish = _ref.stylish;
+  var prefix = "".concat(prefixCls, "-highlighter");
+  return {
+    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n\n        height: 34px;\n        padding-block: 0;\n        padding-inline: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: auto;\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow: unset;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n\n          code {\n            display: block;\n\n            .line {\n              display: inline-block;\n\n              width: calc(100% + 32px);\n              margin-block: 0;\n              margin-inline: -16px;\n              padding-block: 0;\n              padding-inline: 16px;\n            }\n          }\n\n          &.has-focused {\n            .line:not(.focused) {\n              opacity: 0.5;\n            }\n          }\n\n          .highlighted {\n            background: ", ";\n\n            &.warning {\n              background: ", ";\n            }\n\n            &.error {\n              background: ", ";\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n\n            background: ", ";\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n\n          .diff {\n            &.remove {\n              background: ", ";\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ", ";\n              }\n            }\n\n            &.add {\n              background: ", ";\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ", ";\n              }\n            }\n          }\n        }\n      "])), token.colorFillTertiary, token.colorWarningBg, token.colorErrorBg, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadius, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText)),
+    unshiki: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: auto;\n      margin: 0;\n      padding: 0;\n      color: ", ";\n    "])), token.colorTextDescription)
+  };
+});

package/es/Highlighter/index.d.ts

@@ -0,0 +1,50 @@
+import { type CopyButtonProps } from '@lobehub/ui';
+import React, { ReactNode } from 'react';
+import { DivProps } from "../types";
+export interface HighlighterProps extends DivProps {
+    allowChangeLanguage?: boolean;
+    /**
+     * @description The code content to be highlighted
+     */
+    children: string;
+    copyButtonSize?: CopyButtonProps['size'];
+    /**
+     * @description Whether to show the copy button
+     * @default true
+     */
+    copyable?: boolean;
+    fileName?: string;
+    fullFeatured?: boolean;
+    icon?: ReactNode;
+    /**
+     * @description The language of the code content
+     */
+    language: string;
+    /**
+     * @description Whether to show language tag
+     * @default true
+     */
+    showLanguage?: boolean;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
+    /**
+     * @description The type of the code block
+     * @default 'block'
+     */
+    type?: 'ghost' | 'block' | 'pure';
+    /**
+     * @description The style of the code content
+     */
+    contentStyle?: React.CSSProperties;
+    /**
+     * @description Control text wrap
+     * @default false
+     */
+    wrap?: boolean;
+}
+export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;
+export * from './FullFeatured';
+export * from './SyntaxHighlighter';

package/es/Highlighter/index.js

@@ -0,0 +1,77 @@
+'use client';
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight", "allowChangeLanguage", "fileName", "icon", "contentStyle", "wrap"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { CopyButton, Spotlight, Tag } from '@lobehub/ui';
+import React, { memo } from 'react';
+import { FullFeaturedHighlighter } from "./FullFeatured";
+import { SyntaxHighlighter } from "./SyntaxHighlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Highlighter = /*#__PURE__*/memo(function (_ref) {
+  var fullFeatured = _ref.fullFeatured,
+    _ref$copyButtonSize = _ref.copyButtonSize,
+    copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
+    children = _ref.children,
+    language = _ref.language,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
+    _ref$showLanguage = _ref.showLanguage,
+    showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    spotlight = _ref.spotlight,
+    allowChangeLanguage = _ref.allowChangeLanguage,
+    fileName = _ref.fileName,
+    icon = _ref.icon,
+    contentStyle = _ref.contentStyle,
+    wrap = _ref.wrap,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(type),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, !wrap && styles.nowrap, className);
+  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeaturedHighlighter, _objectSpread(_objectSpread({
+    allowChangeLanguage: allowChangeLanguage,
+    className: className,
+    contentStyle: contentStyle,
+    fileName: fileName,
+    icon: icon,
+    language: language,
+    style: style
+  }, rest), {}, {
+    children: children
+  }));
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: container,
+    "data-code-type": "highlighter",
+    style: style
+  }, rest), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
+      size: 240
+    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
+      className: styles.button,
+      content: children,
+      placement: "left",
+      size: copyButtonSize
+    }), showLanguage && language && /*#__PURE__*/_jsx(Tag, {
+      className: styles.lang,
+      children: language.toLowerCase()
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.scroller,
+      children: /*#__PURE__*/_jsx(SyntaxHighlighter, {
+        language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
+        style: contentStyle,
+        children: children
+      })
+    })]
+  }));
+});
+export * from "./FullFeatured";
+export * from "./SyntaxHighlighter";

package/es/Highlighter/style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: "ghost" | "block" | "pure" | undefined) => import("antd-style").ReturnStyles<{
+    button: string;
+    container: string;
+    header: import("antd-style").SerializedStyles;
+    lang: string;
+    nowrap: import("antd-style").SerializedStyles;
+    scroller: import("antd-style").SerializedStyles;
+    select: import("antd-style").SerializedStyles;
+}>;

package/es/Highlighter/style.js

@@ -0,0 +1,23 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, type) {
+  var token = _ref.token,
+    css = _ref.css,
+    cx = _ref.cx,
+    prefixCls = _ref.prefixCls,
+    stylish = _ref.stylish;
+  var prefix = "".concat(prefixCls, "-highlighter");
+  var buttonHoverCls = "".concat(prefix, "-hover-btn");
+  var langHoverCls = "".concat(prefix, "-hover-lang");
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
+  return {
+    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-start: ", ";\n          inset-inline-end: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '12px', type === 'pure' ? 0 : '12px')),
+    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            overflow: auto hidden;\n\n            margin: 0 !important;\n            padding: ", " !important;\n\n            white-space: break-spaces;\n\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px")),
+    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 12px;\n          inset-inline-end: 4px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
+    nowrap: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        code {\n          text-wrap: nowrap !important;\n        }\n      "]))),
+    scroller: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
+    select: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        user-select: none;\n        font-size: 14px;\n        color: ", ";\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
+  };
+});

package/es/Highlighter/theme.d.ts

@@ -0,0 +1 @@
+export declare const themeConfig: any;