@difizen/libro-jupyter 0.2.19 → 0.2.21

package/es/file/index.less

@@ -6,7 +6,7 @@
   margin-bottom: 24px;
   height: 100px;
   width: 100px;
-  border: 1px solid rgba(0, 10, 26, 10%);
+  border: 1px solid var(--mana-libro-file-type-border);
   border-radius: 4px;
   cursor: pointer;
 
@@ -52,14 +52,12 @@
 
   .ant-modal-title {
     font-weight: 500;
-    color: rgba(0, 10, 26, 89%);
   }
 }
 
 .libro-remove-file-modal {
   .ant-modal-confirm-title {
     font-weight: 500;
-    color: rgba(0, 0, 0, 88%);
   }
 }
 
@@ -83,16 +81,16 @@
 .libro-create-file-des {
   margin-bottom: 8px;
   display: inline-block;
-  color: rgba(0, 0, 0, 85%);
+  color: var(--mana-libro-file-label-text);
   letter-spacing: 0;
   line-height: 22px;
 }
 
 .libro-create-file-path {
-  color: rgba(0, 0, 0, 65%);
+  color: var(--mana-libro-file-text);
 }
 
 .libro-create-file-type-text {
   margin-top: 8px;
-  color: rgba(0, 10, 26, 68%);
+  color: var(--mana-libro-file-text);
 }

package/es/file/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/file/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAa/D,eAAO,MAAM,sBAAsB,YAaR,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/file/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAc/D,eAAO,MAAM,sBAAsB,YAcR,CAAC"}

package/es/file/module.js

@@ -1,4 +1,5 @@
 import { FileTreeModule, ManaModule } from '@difizen/mana-app';
+import { FileColorContribution } from "./file-color-registry.js";
 import { FileCommandContribution } from "./file-command.js";
 import { FileCreateModalContribution } from "./file-create-modal-contribution.js";
 import { FileCreateDirModalContribution } from "./file-createdir-modal-contribution.js";
@@ -9,4 +10,4 @@ import { FileTreeLabelProvider } from "./file-tree-label-provider.js";
 import { FileView } from "./file-view/index.js";
 import { LibroNavigatableView } from "./navigatable-view.js";
 import { LibroJupyterOpenHandler } from "./open-handler-contribution.js";
-export var LibroJupyterFileModule = ManaModule.create().register(JupyterFileService, FileView, FileNameAlias, FileTreeLabelProvider, LibroNavigatableView, LibroJupyterOpenHandler, FileCommandContribution, FileCreateModalContribution, FileCreateDirModalContribution, FileRenameModalContribution).dependOn(FileTreeModule);
+export var LibroJupyterFileModule = ManaModule.create().register(JupyterFileService, FileColorContribution, FileView, FileNameAlias, FileTreeLabelProvider, LibroNavigatableView, LibroJupyterOpenHandler, FileCommandContribution, FileCreateModalContribution, FileCreateDirModalContribution, FileRenameModalContribution).dependOn(FileTreeModule);

package/es/widget/progress/view.js

@@ -28,7 +28,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var LibroProgressWidgetComponent = /*#__PURE__*/forwardRef(function LibroProgressWidgetComponent() {
   var widgetView = useInject(ViewInstance);
-  var percent = widgetView.state.max && widgetView.state.min ? widgetView.state.value / ((widgetView.state.max - widgetView.state.min) / 100) : 0;
+  var percent = widgetView.state.max !== undefined && widgetView.state.min !== undefined ? widgetView.state.value / ((widgetView.state.max - widgetView.state.min) / 100) : 0;
   if (widgetView.isCommClosed) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-jupyter",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "",
   "keywords": [
     "libro"
@@ -31,22 +31,22 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-cofine-editor": "^0.2.19",
-    "@difizen/libro-code-editor": "^0.2.19",
-    "@difizen/libro-code-cell": "^0.2.19",
-    "@difizen/libro-codemirror": "^0.2.19",
-    "@difizen/libro-rendermime": "^0.2.19",
-    "@difizen/libro-common": "^0.2.19",
-    "@difizen/libro-core": "^0.2.19",
-    "@difizen/libro-kernel": "^0.2.19",
-    "@difizen/libro-l10n": "^0.2.19",
-    "@difizen/libro-output": "^0.2.19",
-    "@difizen/libro-search": "^0.2.19",
-    "@difizen/libro-search-code-cell": "^0.2.19",
-    "@difizen/libro-lsp": "^0.2.19",
-    "@difizen/libro-markdown-cell": "^0.2.19",
-    "@difizen/libro-raw-cell": "^0.2.19",
-    "@difizen/libro-language-client": "^0.2.19",
+    "@difizen/libro-cofine-editor": "^0.2.21",
+    "@difizen/libro-code-editor": "^0.2.21",
+    "@difizen/libro-code-cell": "^0.2.21",
+    "@difizen/libro-codemirror": "^0.2.21",
+    "@difizen/libro-rendermime": "^0.2.21",
+    "@difizen/libro-common": "^0.2.21",
+    "@difizen/libro-core": "^0.2.21",
+    "@difizen/libro-kernel": "^0.2.21",
+    "@difizen/libro-l10n": "^0.2.21",
+    "@difizen/libro-output": "^0.2.21",
+    "@difizen/libro-search": "^0.2.21",
+    "@difizen/libro-search-code-cell": "^0.2.21",
+    "@difizen/libro-lsp": "^0.2.21",
+    "@difizen/libro-markdown-cell": "^0.2.21",
+    "@difizen/libro-raw-cell": "^0.2.21",
+    "@difizen/libro-language-client": "^0.2.21",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@ant-design/colors": "^7.0.0",

package/src/cell/jupyter-code-cell-view.tsx

@@ -6,9 +6,9 @@ import type {
   TooltipProvider,
   TooltipProviderOption,
 } from '@difizen/libro-code-editor';
+import { getCellURI } from '@difizen/libro-common';
 import type { KernelMessage } from '@difizen/libro-kernel';
 import { KernelError } from '@difizen/libro-kernel';
-import { getCellURI } from '@difizen/libro-language-client';
 import { transient } from '@difizen/mana-app';
 import { view, ViewInstance } from '@difizen/mana-app';
 import { getOrigin, useInject } from '@difizen/mana-app';
@@ -65,7 +65,7 @@ export class JupyterCodeCellView extends LibroCodeCellView {
 
   protected override getEditorOption(): CodeEditorViewOptions {
     const options = super.getEditorOption();
-    const uri = getCellURI(this.parent.model, this.model);
+    const uri = getCellURI(this.parent.model.filePath, this.model.id);
 
     return {
       ...options,

package/src/file/file-color-registry.ts

@@ -0,0 +1,28 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class FileColorContribution implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    // common
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.file.label.text',
+        defaults: { dark: '#F8F8FB', light: Color.rgba(0, 0, 0, 0.85) },
+        description: '',
+      },
+      {
+        id: 'libro.file.text',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 0, 0, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.file.type.border',
+        defaults: { dark: '#3B3C42', light: Color.rgba(0, 10, 26, 0.1) },
+        description: '',
+      },
+    );
+  }
+}

package/src/file/file-create-modal.tsx

@@ -1,7 +1,8 @@
 import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { ThemeService } from '@difizen/mana-app';
 import { CommandRegistry } from '@difizen/mana-app';
 import { URI, useInject, ViewManager } from '@difizen/mana-app';
-import { Col, Form, message, Row, Input, Modal } from 'antd';
+import { Col, Form, message, Row, Input, Modal, ConfigProvider, theme } from 'antd';
 import type { InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import './index.less';
@@ -33,6 +34,7 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
   const [fileType, setFileType] = useState<FileType>(data?.fileType);
   const [fileView, setFileView] = useState<FileView>();
   const inputRef = useRef<InputRef>(null);
+  const themeService = useInject(ThemeService);
   const [form] = Form.useForm();
 
   const onFinish = async (values: { fileName: string }) => {
@@ -83,106 +85,115 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
     inputRef.current?.focus();
   });
   return (
-    <Modal
-      title="新建文件"
-      open={visible}
-      onCancel={close}
-      width={788}
-      cancelText="取消"
-      okText="确定"
-      onOk={() => {
-        form.submit();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
       }}
-      keyboard={true}
-      wrapClassName="libro-create-file-modal"
     >
-      <div className="libro-create-file-path-container">
-        <div className="libro-create-file-des">创建位置：</div>
-        <span className="libro-create-file-path">{data?.path}</span>
-      </div>
-      <div className="libro-create-file-des">文件类型：</div>
-      <Row>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${
-              fileType === '.ipynb' ? 'active' : ''
-            }`}
-            onClick={() => {
-              setFileType('.ipynb');
-              inputRef.current?.focus();
-            }}
+      <Modal
+        title="新建文件"
+        open={visible}
+        onCancel={close}
+        width={788}
+        cancelText="取消"
+        okText="确定"
+        onOk={() => {
+          form.submit();
+        }}
+        keyboard={true}
+        wrapClassName="libro-create-file-modal"
+      >
+        <div className="libro-create-file-path-container">
+          <div className="libro-create-file-des">创建位置：</div>
+          <span className="libro-create-file-path">{data?.path}</span>
+        </div>
+        <div className="libro-create-file-des">文件类型：</div>
+        <Row>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <NotebookIcon />
-            <span className="libro-create-file-type-text">Notebook</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
-            onClick={() => {
-              setFileType('.py');
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${
+                fileType === '.ipynb' ? 'active' : ''
+              }`}
+              onClick={() => {
+                setFileType('.ipynb');
+                inputRef.current?.focus();
+              }}
+            >
+              <NotebookIcon />
+              <span className="libro-create-file-type-text">Notebook</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <PythonIcon />
-            <span className="libro-create-file-type-text">Python</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
-            onClick={() => {
-              setFileType('.json');
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
+              onClick={() => {
+                setFileType('.py');
+                inputRef.current?.focus();
+              }}
+            >
+              <PythonIcon />
+              <span className="libro-create-file-type-text">Python</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <JSONIcon />
-            <span className="libro-create-file-type-text">JSON</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${
-              fileType === undefined ? 'active' : ''
-            }`}
-            onClick={() => {
-              setFileType(undefined);
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
+              onClick={() => {
+                setFileType('.json');
+                inputRef.current?.focus();
+              }}
+            >
+              <JSONIcon />
+              <span className="libro-create-file-type-text">JSON</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <MoreIcon />
-            <span className="libro-create-file-type-text">其他</span>
-          </div>
-        </Col>
-      </Row>
-      <Form
-        layout="vertical"
-        autoComplete="off"
-        form={form}
-        onFinish={onFinish}
-        className="libro-create-file-form"
-      >
-        <Form.Item
-          name="fileName"
-          label="文件名称"
-          rules={[{ required: true, validator: validateFileName }]}
+            <div
+              className={`libro-create-file-type ${
+                fileType === undefined ? 'active' : ''
+              }`}
+              onClick={() => {
+                setFileType(undefined);
+                inputRef.current?.focus();
+              }}
+            >
+              <MoreIcon />
+              <span className="libro-create-file-type-text">其他</span>
+            </div>
+          </Col>
+        </Row>
+        <Form
+          layout="vertical"
+          autoComplete="off"
+          form={form}
+          onFinish={onFinish}
+          className="libro-create-file-form"
         >
-          <Input addonAfter={fileType || ''} ref={inputRef} />
-        </Form.Item>
-      </Form>
-    </Modal>
+          <Form.Item
+            name="fileName"
+            label="文件名称"
+            rules={[{ required: true, validator: validateFileName }]}
+          >
+            <Input addonAfter={fileType || ''} ref={inputRef} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
   );
 };
 

package/src/file/file-createdir-modal.tsx

@@ -1,8 +1,9 @@
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import { ThemeService } from '@difizen/mana-app';
 import { URI } from '@difizen/mana-app';
 import { ViewManager } from '@difizen/mana-app';
 import { useInject } from '@difizen/mana-app';
-import { Form, message, Input, Modal } from 'antd';
+import { Form, message, Input, Modal, ConfigProvider, theme } from 'antd';
 import type { InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
@@ -19,6 +20,7 @@ export const FileCreateDirModalComponent: React.FC<
 > = ({ visible, close, data }: ModalItemProps<FileDirCreateModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
+  const themeService = useInject(ThemeService);
   const inputRef = useRef<InputRef>(null);
   const [fileView, setFileView] = useState<FileView>();
   const [form] = Form.useForm();
@@ -61,44 +63,53 @@ export const FileCreateDirModalComponent: React.FC<
     inputRef.current?.focus();
   });
   return (
-    <Modal
-      title="新建文件夹"
-      open={visible}
-      onCancel={close}
-      cancelText="取消"
-      okText="确定"
-      onOk={() => {
-        form.submit();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
       }}
-      keyboard={true}
-      wrapClassName="libro-create-dir-modal"
-      width={524}
     >
-      <div className="libro-create-file-des">创建位置：</div>
-      <span className="libro-create-file-path">{data?.path}</span>
-      <Form
-        layout="vertical"
-        autoComplete="off"
-        form={form}
-        onFinish={onFinish}
-        className="libro-create-dir-file-form"
+      <Modal
+        title="新建文件夹"
+        open={visible}
+        onCancel={close}
+        cancelText="取消"
+        okText="确定"
+        onOk={() => {
+          form.submit();
+        }}
+        keyboard={true}
+        wrapClassName="libro-create-dir-modal"
+        width={524}
       >
-        <Form.Item
-          name="dirName"
-          label="文件夹名称"
-          rules={[{ required: true, validator: validateDirName }]}
+        <div className="libro-create-file-des">创建位置：</div>
+        <span className="libro-create-file-path">{data?.path}</span>
+        <Form
+          layout="vertical"
+          autoComplete="off"
+          form={form}
+          onFinish={onFinish}
+          className="libro-create-dir-file-form"
         >
-          <Input
-            ref={inputRef}
-            onKeyDown={async (e) => {
-              if (e.keyCode === 13) {
-                form.submit();
-              }
-            }}
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
+          <Form.Item
+            name="dirName"
+            label="文件夹名称"
+            rules={[{ required: true, validator: validateDirName }]}
+          >
+            <Input
+              ref={inputRef}
+              onKeyDown={async (e) => {
+                if (e.keyCode === 13) {
+                  form.submit();
+                }
+              }}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
   );
 };
 

package/src/file/file-rename-modal.tsx

@@ -1,6 +1,6 @@
-import { useInject, ViewManager } from '@difizen/mana-app';
+import { ThemeService, useInject, ViewManager } from '@difizen/mana-app';
 import type { ModalItem, ModalItemProps, URI } from '@difizen/mana-app';
-import { Form, message, Input, Modal } from 'antd';
+import { Form, message, Input, Modal, theme, ConfigProvider } from 'antd';
 import type { InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
@@ -23,6 +23,7 @@ export const FileRenameModalComponent: React.FC<ModalItemProps<ModalItemType>> =
   const inputRef = useRef<InputRef>(null);
   const [form] = Form.useForm();
   const [fileView, setFileView] = useState<FileView>();
+  const themeService = useInject(ThemeService);
   useEffect(() => {
     viewManager
       .getOrCreateView(FileView)
@@ -62,39 +63,48 @@ export const FileRenameModalComponent: React.FC<ModalItemProps<ModalItemType>> =
   };
 
   return (
-    <Modal
-      title="文件重命名"
-      open={visible}
-      onCancel={close}
-      onOk={() => {
-        form.submit();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
       }}
-      wrapClassName="libro-rename-file-modal"
     >
-      <Form
-        layout="vertical"
-        autoComplete="off"
-        form={form}
-        onFinish={onFinish}
-        className="libro-rename-file-form"
+      <Modal
+        title="文件重命名"
+        open={visible}
+        onCancel={close}
+        onOk={() => {
+          form.submit();
+        }}
+        wrapClassName="libro-rename-file-modal"
       >
-        <Form.Item
-          name="rename"
-          label="文件/文件夹名称"
-          rules={[{ required: true, validator: validateRename }]}
-          initialValue={data?.fileName}
+        <Form
+          layout="vertical"
+          autoComplete="off"
+          form={form}
+          onFinish={onFinish}
+          className="libro-rename-file-form"
         >
-          <Input
-            ref={inputRef}
-            onKeyDown={async (e) => {
-              if (e.keyCode === 13) {
-                form.submit();
-              }
-            }}
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
+          <Form.Item
+            name="rename"
+            label="文件/文件夹名称"
+            rules={[{ required: true, validator: validateRename }]}
+            initialValue={data?.fileName}
+          >
+            <Input
+              ref={inputRef}
+              onKeyDown={async (e) => {
+                if (e.keyCode === 13) {
+                  form.submit();
+                }
+              }}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
   );
 };
 

package/src/file/index.less

@@ -6,7 +6,7 @@
   margin-bottom: 24px;
   height: 100px;
   width: 100px;
-  border: 1px solid rgba(0, 10, 26, 10%);
+  border: 1px solid var(--mana-libro-file-type-border);
   border-radius: 4px;
   cursor: pointer;
 
@@ -52,14 +52,12 @@
 
   .ant-modal-title {
     font-weight: 500;
-    color: rgba(0, 10, 26, 89%);
   }
 }
 
 .libro-remove-file-modal {
   .ant-modal-confirm-title {
     font-weight: 500;
-    color: rgba(0, 0, 0, 88%);
   }
 }
 
@@ -83,16 +81,16 @@
 .libro-create-file-des {
   margin-bottom: 8px;
   display: inline-block;
-  color: rgba(0, 0, 0, 85%);
+  color: var(--mana-libro-file-label-text);
   letter-spacing: 0;
   line-height: 22px;
 }
 
 .libro-create-file-path {
-  color: rgba(0, 0, 0, 65%);
+  color: var(--mana-libro-file-text);
 }
 
 .libro-create-file-type-text {
   margin-top: 8px;
-  color: rgba(0, 10, 26, 68%);
+  color: var(--mana-libro-file-text);
 }

package/src/file/module.ts

@@ -1,5 +1,6 @@
 import { FileTreeModule, ManaModule } from '@difizen/mana-app';
 
+import { FileColorContribution } from './file-color-registry.js';
 import { FileCommandContribution } from './file-command.js';
 import { FileCreateModalContribution } from './file-create-modal-contribution.js';
 import { FileCreateDirModalContribution } from './file-createdir-modal-contribution.js';
@@ -14,6 +15,7 @@ import { LibroJupyterOpenHandler } from './open-handler-contribution.js';
 export const LibroJupyterFileModule = ManaModule.create()
   .register(
     JupyterFileService,
+    FileColorContribution,
     FileView,
     FileNameAlias,
     FileTreeLabelProvider,