cosey 0.10.0 → 0.10.1

package/README.md

@@ -76,4 +76,4 @@ Cosey 基于 element-plus 并补充了众多组件，意在使开发者更加专
 - 打标签 `npm run tag`
 - 生成更新日志 `npm run changelog`
 - 暂存、提交 changelog `git commit -a -m 'chore: changelog'`
-- 推送
+- 推送 `npm run push`

package/components/editor/contents/content-code-block.d.ts

@@ -1,18 +1,18 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: {
+    language: {
         type: StringConstructor;
         default: string;
     };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:value': (value: string) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    language: {
         type: StringConstructor;
         default: string;
     };
 }>> & Readonly<{
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
-    value: string;
+    language: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/editor/contents/content-code-block.js

@@ -2,12 +2,13 @@ import { defineComponent, useModel, createVNode } from 'vue';
 import { useEditor, useElement } from 'slate-vue3';
 import { DOMEditor } from 'slate-vue3/dom';
 import { languageOptions } from '../plugins/code-block.js';
+import { useGlobalHighlightStyle } from '../../highlight/highlight.style.js';
 import { isString } from '../../../utils/is.js';
 
 var stdin_default = defineComponent({
   name: "CoEditorContentCodeBlock",
   props: {
-    value: {
+    language: {
       type: String,
       default: "text"
     }
@@ -18,28 +19,31 @@ var stdin_default = defineComponent({
   setup(props, {
     slots
   }) {
-    const innerValue = useModel(props, "value");
+    useGlobalHighlightStyle();
+    const language = useModel(props, "language");
     const editor = useEditor();
     const element = useElement();
     const onChange = e => {
-      innerValue.value = e.target.value;
+      language.value = e.target.value;
       const path = DOMEditor.findPath(editor, element.value);
       editor.setNodes({
-        language: innerValue.value
+        language: language.value
       }, {
         at: path
       });
     };
     return () => {
       return createVNode("pre", {
-        "class": `language-${innerValue.value}`
+        "class": `language-${language.value}`
+      }, [createVNode("code", {
+        "class": `language-${language.value}`
       }, [createVNode("select", {
-        "value": innerValue.value,
+        "value": language.value,
         "contenteditable": false,
         "onChange": onChange
       }, [languageOptions.map(option => createVNode("option", {
         "value": option.value
-      }, [option.label]))]), createVNode("div", null, [slots.default?.()])]);
+      }, [option.label]))]), createVNode("div", null, [slots.default?.()])])]);
     };
   }
 });

package/components/editor/editor.style.js

@@ -194,6 +194,7 @@ const getEditorStyle = (token) => {
         "&.is-focus::before": {
           content: '""',
           position: "absolute",
+          zIndex: 10,
           inset: 0,
           border: `2px solid ${token.colorPrimaryHover}`,
           borderRadius: token.borderRadius,

package/components/editor/plugins/code-block.js

@@ -19,6 +19,7 @@ const languageOptions = [
   { value: "json", label: "JSON" },
   { value: "markdown", label: "Markdown" },
   { value: "php", label: "PHP" },
+  { value: "bash", label: "Bash" },
   { value: "java", label: "Java" },
   { value: "python", label: "Python" },
   { value: "sql", label: "SQL" }
@@ -318,7 +319,14 @@ function withCodeBlock(editor) {
   editor.renderElement = (props) => {
     const { attributes, children, element } = props;
     if (element.type === "code-block") {
-      return h(stdin_default, useInheritRef(attributes), () => children);
+      return h(
+        stdin_default,
+        {
+          ...useInheritRef(attributes),
+          language: element.language
+        },
+        () => children
+      );
     }
     if (element.type === "code-line") {
       return h("div", { ...attributes, style: { position: "relative" } }, children);

package/components/highlight/highlight.api.js

@@ -6,7 +6,7 @@ const highlightProps = {
   },
   lang: {
     type: String,
-    default: "txt"
+    default: "text"
   },
   maxHeight: {
     type: String

package/components/highlight/highlight.js

@@ -1,7 +1,7 @@
 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$1, { useGlobalHighlightStyle } from './highlight.style.js';
 import stdin_default$2 from '../copy/copy.js';
 import { useComponentConfig } from '../config-provider/config-provider.api.js';
 import Prism from 'prismjs';
@@ -17,7 +17,8 @@ var stdin_default = defineComponent({
     const {
       hashId
     } = stdin_default$1(prefixCls);
-    const highlightedCode = computed(() => Prism.highlight(props.code || "", Prism.languages[props.lang] || Prism.languages["txt"], props.lang));
+    useGlobalHighlightStyle();
+    const highlightedCode = computed(() => Prism.highlight(props.code || "", Prism.languages[props.lang] || Prism.languages["text"], props.lang));
     return () => {
       return createVNode("div", {
         "class": [hashId.value, prefixCls.value]

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

@@ -5,3 +5,4 @@ declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string
     hashId: import("vue").Ref<string, string>;
 };
 export default _default;
+export declare const useGlobalHighlightStyle: (themeManager?: import("../theme/theme-context").ThemeManager) => void;

package/components/highlight/highlight.style.js

@@ -1,8 +1,10 @@
+import { getGlobalStyleHook } from '../theme/getGlobalStyleHook.js';
 import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
 
 function getHljsDark() {
   return {
     'pre[class*="language-"], code[class*="language-"]': {
+      display: "block",
       color: "#d4d4d4",
       fontSize: "13px",
       textShadow: "none",
@@ -32,12 +34,10 @@ function getHljsDark() {
     },
     'pre[class*="language-"]': {
       padding: "1em",
-      margin: ".5em 0",
       overflow: "auto",
       background: "#1e1e1e"
     },
     ':not(pre) > code[class*="language-"]': {
-      padding: ".1em .3em",
       borderRadius: ".3em",
       color: "#db4c69",
       background: "#1e1e1e"
@@ -188,6 +188,7 @@ function getHljsDark() {
 function getHljsLight() {
   return {
     'code[class*="language-"], pre[class*="language-"]': {
+      display: "block",
       background: "hsl(230, 1%, 98%)",
       color: "hsl(230, 8%, 24%)",
       fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
@@ -215,12 +216,10 @@ function getHljsLight() {
     },
     'pre[class*="language-"]': {
       padding: "1em",
-      margin: "0.5em 0",
       overflow: "auto",
       borderRadius: "0.3em"
     },
     ':not(pre) > code[class*="language-"]': {
-      padding: "0.2em 0.3em",
       borderRadius: "0.3em",
       whiteSpace: "normal"
     },
@@ -335,15 +334,15 @@ var stdin_default = getSimpleStyleHook("CoHighlight", (token) => {
         insetBlockStart: token.sizeXXS,
         insetInlineEnd: token.sizeXXS,
         zIndex: 10
-      },
-      ":root.dark &": {
-        ...getHljsDark()
-      },
-      ":root:not(.dark) &": {
-        ...getHljsLight()
       }
     }
   };
 });
+const useGlobalHighlightStyle = getGlobalStyleHook("CoGlobalHighlight", () => {
+  return {
+    ":root.dark": getHljsDark(),
+    ":root:not(.dark)": getHljsLight()
+  };
+});
 
-export { stdin_default as default, getHljsDark, getHljsLight };
+export { stdin_default as default, getHljsDark, getHljsLight, useGlobalHighlightStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosey",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "基于 Vue3 + vite 的后台管理系统框架",
   "type": "module",
   "main": "index.js",
@@ -38,7 +38,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^3.0.2",
     "prismjs": "^1.30.0",
-    "slate-vue3": "^0.8.0",
+    "slate-vue3": "^0.10.0",
     "stylis": "^4.3.6",
     "svga": "^2.1.1",
     "vue": "^3.5.21",
@@ -72,7 +72,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^3.0.2",
     "prismjs": "^1.30.0",
-    "slate-vue3": "^0.8.0",
+    "slate-vue3": "^0.10.0",
     "stylis": "^4.3.6",
     "svga": "^2.1.1",
     "vue": "^3.5.21",