cosey 0.6.16 → 0.6.18

package/components/copy/copy.style.js

@@ -4,10 +4,15 @@ var stdin_default = getSimpleStyleHook("CoMask", (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
+      width: token.sizeLG,
+      height: `${token.sizeLG} !important`,
+      fontSize: token.fontSize,
+      transition: "none",
       "&:not(.is-copied):hover": {
         opacity: 0.75
       },
       "&.is-copied": {
+        fontSize: token.fontSizeXL,
         [`${componentCls}-icon`]: {
           color: token.colorSuccess
         }

package/components/editor/editor.style.js

@@ -1,4 +1,4 @@
-import { getHljs } from '../highlight/highlight.style.js';
+import { getHljsDark } from '../highlight/highlight.style.js';
 import { getGlobalStyleHook } from '../theme/getGlobalStyleHook.js';
 import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
 import { getTruncateStyle } from '../style/mixins.js';
@@ -357,7 +357,7 @@ const getEditorButtonStyle = (token) => {
   };
 };
 const useHljsStyle = getGlobalStyleHook("CoGlobalHighlight", () => {
-  return getHljs();
+  return getHljsDark();
 });
 var stdin_default = getSimpleStyleHook("CoEditor", (token) => {
   return [getEditorStyle(token), getEditorToolbarStyle(token), getEditorButtonStyle(token)];

package/components/highlight/highlight.api.d.ts

@@ -16,6 +16,9 @@ export declare const highlightProps: {
     lang: {
         type: PropType<xml | json | js | ts | plaintext | "css" | "scss" | "less" | (string & {})>;
     };
+    maxHeight: {
+        type: StringConstructor;
+    };
 };
 export type HighlightProps = ExtractPropTypes<typeof highlightProps>;
 export interface HighlightSlots {

package/components/highlight/highlight.api.js

@@ -23,6 +23,9 @@ const highlightProps = {
   },
   lang: {
     type: String
+  },
+  maxHeight: {
+    type: String
   }
 };
 const highlightSlots = Object;

package/components/highlight/highlight.d.ts

@@ -5,6 +5,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     lang: {
         type: import("vue").PropType<("html" | "svg" | "xml" | "xhtml" | "rss" | "atom" | "xjb" | "xsd" | "xsl" | "plist" | "wsf") | "json" | ("javascript" | "js" | "jsx" | "mjs" | "cjs") | ("typescript" | "ts" | "tsx" | "mts" | "cts") | ("text" | "plaintext" | "txt") | "css" | "scss" | "less" | (string & {})>;
     };
+    maxHeight: {
+        type: StringConstructor;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     code: {
         type: StringConstructor;
@@ -12,5 +15,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     lang: {
         type: import("vue").PropType<("html" | "svg" | "xml" | "xhtml" | "rss" | "atom" | "xjb" | "xsd" | "xsl" | "plist" | "wsf") | "json" | ("javascript" | "js" | "jsx" | "mjs" | "cjs") | ("typescript" | "ts" | "tsx" | "mts" | "cts") | ("text" | "plaintext" | "txt") | "css" | "scss" | "less" | (string & {})>;
     };
+    maxHeight: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, {}, import("vue").SlotsType<import("./highlight.api").HighlightSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/highlight/highlight.js

@@ -1,4 +1,5 @@
 import { defineComponent, computed, createVNode } from 'vue';
+import { ElScrollbar } from 'element-plus';
 import { highlightSlots, highlightProps } from './highlight.api.js';
 import stdin_default$1 from './highlight.style.js';
 import stdin_default$2 from '../copy/copy.js';
@@ -22,10 +23,16 @@ var stdin_default = defineComponent({
     return () => {
       return createVNode("div", {
         "class": [hashId.value, prefixCls.value]
-      }, [createVNode("pre", null, [createVNode("code", {
-        "class": "hljs",
-        "innerHTML": highlightedCode.value
-      }, null)]), createVNode("div", {
+      }, [createVNode(ElScrollbar, {
+        "tag": "pre",
+        "class": `${prefixCls.value}-scroll`,
+        "view-class": "hljs",
+        "maxHeight": props.maxHeight
+      }, {
+        default: () => [createVNode("code", {
+          "innerHTML": highlightedCode.value
+        }, null)]
+      }), createVNode("div", {
         "class": `${prefixCls.value}-copy`
       }, [createVNode(stdin_default$2, {
         "text": props.code,

package/components/highlight/highlight.style.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from '../cssinjs';
-export declare function getHljs(): CSSObject;
+export declare function getHljsDark(): CSSObject;
+export declare function getHljsLight(): CSSObject;
 declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../theme/theme-context").ThemeManager) => {
     hashId: import("vue").Ref<string, string>;
 };

package/components/highlight/highlight.style.js

@@ -1,6 +1,6 @@
 import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
 
-function getHljs() {
+function getHljsDark() {
   return {
     ".hljs": {
       color: "#abb2bf",
@@ -42,31 +42,71 @@ function getHljs() {
     }
   };
 }
+function getHljsLight() {
+  return {
+    ".hljs": {
+      color: "#383a42",
+      background: "#fafafa"
+    },
+    ".hljs-comment,.hljs-quote": {
+      color: "#a0a1a7",
+      fontStyle: "italic"
+    },
+    ".hljs-doctag,.hljs-keyword,.hljs-formula": {
+      color: "#a626a4"
+    },
+    ".hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst": {
+      color: "#e45649"
+    },
+    ".hljs-literal": {
+      color: "#0184bb"
+    },
+    ".hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string": {
+      color: "#50a14f"
+    },
+    ".hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number": {
+      color: "#986801"
+    },
+    ".hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title": {
+      color: "#4078f2"
+    },
+    ".hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title": {
+      color: "#c18401"
+    },
+    ".hljs-emphasis": {
+      fontStyle: "italic"
+    },
+    ".hljs-strong": {
+      fontWeight: "bold"
+    },
+    ".hljs-link": {
+      textDecoration: "underline"
+    }
+  };
+}
 var stdin_default = getSimpleStyleHook("CoHighlight", (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
       position: "relative",
-      pre: {
-        padding: token.paddingSM,
-        overflow: "auto",
-        color: "#abb2bf",
-        background: "#282c34",
+      [`${componentCls}-scroll`]: {
         borderRadius: token.borderRadius
       },
+      pre: {
+        padding: token.paddingSM
+      },
       [`${componentCls}-copy`]: {
         position: "absolute",
         insetBlockStart: token.sizeXXS,
         insetInlineEnd: token.sizeXXS,
-        zIndex: 10,
-        color: token.colorWhite,
-        "&:hover,&:active": {
-          color: `${token.colorWhite} !important`
-        }
+        zIndex: 10
       },
-      ...getHljs()
+      ...getHljsLight(),
+      ":root.dark &": {
+        ...getHljsDark()
+      }
     }
   };
 });
 
-export { stdin_default as default, getHljs };
+export { stdin_default as default, getHljsDark, getHljsLight };

package/components/highlight/index.d.ts

@@ -7,6 +7,9 @@ declare const _Highlight: {
         lang: {
             type: import("vue").PropType<("html" | "svg" | "xml" | "xhtml" | "rss" | "atom" | "xjb" | "xsd" | "xsl" | "plist" | "wsf") | "json" | ("javascript" | "js" | "jsx" | "mjs" | "cjs") | ("typescript" | "ts" | "tsx" | "mts" | "cts") | ("text" | "plaintext" | "txt") | "css" | "scss" | "less" | (string & {})>;
         };
+        maxHeight: {
+            type: StringConstructor;
+        };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, import("vue").SlotsType<import("./highlight.api").HighlightSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -21,6 +24,9 @@ declare const _Highlight: {
         lang: {
             type: import("vue").PropType<("html" | "svg" | "xml" | "xhtml" | "rss" | "atom" | "xjb" | "xsd" | "xsl" | "plist" | "wsf") | "json" | ("javascript" | "js" | "jsx" | "mjs" | "cjs") | ("typescript" | "ts" | "tsx" | "mts" | "cts") | ("text" | "plaintext" | "txt") | "css" | "scss" | "less" | (string & {})>;
         };
+        maxHeight: {
+            type: StringConstructor;
+        };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -32,6 +38,9 @@ declare const _Highlight: {
     lang: {
         type: import("vue").PropType<("html" | "svg" | "xml" | "xhtml" | "rss" | "atom" | "xjb" | "xsd" | "xsl" | "plist" | "wsf") | "json" | ("javascript" | "js" | "jsx" | "mjs" | "cjs") | ("typescript" | "ts" | "tsx" | "mts" | "cts") | ("text" | "plaintext" | "txt") | "css" | "scss" | "less" | (string & {})>;
     };
+    maxHeight: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, import("vue").SlotsType<import("./highlight.api").HighlightSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin;
 export { _Highlight as Highlight };
 export default _Highlight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosey",
-  "version": "0.6.16",
+  "version": "0.6.18",
   "description": "基于 Vue3 + vite 的后台管理系统框架",
   "type": "module",
   "main": "index.js",