@douyinfe/semi-foundation 2.69.1-alpha.0 → 2.70.0-alpha.2

package/jsonViewer/constants.ts

@@ -0,0 +1,7 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-json-viewer`,
+} as const;
+
+export { cssClasses };

package/jsonViewer/foundation.ts

@@ -0,0 +1,67 @@
+
+export * from '@douyinfe/semi-json-viewer-core';
+import { JsonViewer, JsonViewerOptions } from '@douyinfe/semi-json-viewer-core';
+import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+
+export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getJsonViewerRef: () => HTMLElement;
+    onValueChange: (value: string) => void;
+    onValueHover: (value: string, el: HTMLElement) => HTMLElement | undefined
+}
+
+
+class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
+    constructor(adapter: JsonViewerAdapter) {
+        super({ ...JsonViewerFoundation, ...adapter });
+    }
+
+    jsonViewer: JsonViewer | null = null;
+
+    init() {
+        const props = this.getProps();
+        const jsonViewerRef = this._adapter.getJsonViewerRef();
+        this.jsonViewer = new JsonViewer(jsonViewerRef, props.value, props.options);
+        this.jsonViewer.layout();
+        this.jsonViewer.emitter.on('contentChanged', (e) => {
+            this.onValueChange(this.jsonViewer?.getModel().getValue());
+        });
+        this.jsonViewer.emitter.on('hoverNode', (e) => {
+            const el = this.onValueHover(e.value, e.target);
+            if (el) {
+                this.jsonViewer.emitter.emit('renderHoverNode', { el });
+            }
+        });
+    }
+
+    onValueChange(value: string) {
+        this._adapter.onValueChange(value);
+    }
+
+    onValueHover(value: string, el: HTMLElement): HTMLElement | undefined {
+        return this._adapter.onValueHover(value, el);
+    }
+
+    search(searchText: string) {
+        const state = this.getState('searchOptions');
+        const { caseSensitive, wholeWord, regex } = state;
+        this.jsonViewer?.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+    }
+
+    prevSearch() {
+        this.jsonViewer?.getSearchWidget().navigateResults(-1);
+    }
+
+    nextSearch() {
+        this.jsonViewer?.getSearchWidget().navigateResults(1);
+    }
+
+    replace(replaceText: string) {
+        this.jsonViewer?.getSearchWidget().replace(replaceText);
+    }
+
+    replaceAll(replaceText: string) {
+        this.jsonViewer?.getSearchWidget().replaceAll(replaceText);
+    }
+}
+
+export default JsonViewerFoundation;

package/jsonViewer/jsonViewer.scss

@@ -0,0 +1,152 @@
+@import './variables.scss';
+
+$module: #{$prefix}-json-viewer;
+
+.#{$module} {
+    &-background {
+        background-color: $color-json-viewer-background;
+    }
+
+    &-string-key {
+        color: $color-json-viewer-key;
+    }
+
+    &-string-value {
+        color: $color-json-viewer-value;
+    }
+
+    &-keyword {
+        color: $color-json-viewer-keyword;
+    }
+
+    &-number {
+        color: $color-json-viewer-number;
+    }
+
+    &-delimiter-comma {
+        color: $color-json-viewer-delimiter-comma;
+    }
+
+    @each $type, $colors in $semi-json-viewer-delimiter-colors {
+        @each $level, $color in $colors {
+            &-delimiter-#{$type}-#{$level} {
+                color: $color;
+            }
+        }
+    }
+
+    &-search-result {
+        background-color: $semi-json-viewer-search-result-background;
+    }
+
+    &-current-search-result {
+        background-color: $semi-json-viewer-current-search-result-background !important;
+    }
+
+    &-folding-icon {
+        opacity: 0.7;
+        transition: opacity 0.8s;
+        color: $semi-json-viewer-folding-icon-color;
+    }
+
+    &-view-line {
+        font-family: Menlo, Firecode, Monaco, 'Courier New', monospace;
+        font-weight: normal;
+        font-size: 12px;
+        font-feature-settings: 'liga' 0, 'calt' 0;
+        font-variation-settings: normal;
+        letter-spacing: 0px;
+        color: #237893;
+    }
+
+    &-line-number {
+        font-family: Menlo, Firecode, Monaco, 'Courier New', monospace;
+        font-weight: normal;
+        font-size: 12px;
+        font-feature-settings: 'liga' 0, 'calt' 0;
+        font-variation-settings: normal;
+        letter-spacing: 0px;
+        color: $semi-json-viewer-line-number-color;
+        text-align: center;
+        width: 50px;
+    }
+
+    &-line-number-container {
+        scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+        -ms-overflow-style: none; /* 隐藏滚动条（IE 和 Edge） */
+    }
+
+    &-line-number-container::-webkit-scrollbar {
+        display: none; /* 隐藏滚动条（Webkit 浏览器） */
+    }
+
+    &-search-bar-container {
+        width: 440px;
+        border: 1px solid var(--semi-color-border);
+        border-radius: var(--semi-border-radius-small);
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        gap: 8px;
+    }
+
+
+    &-replace-bar,
+    &-search-bar {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    &-search-options {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        list-style: none;
+        padding-inline-start: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+    }
+
+    &-search-options-item {
+        min-width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin: 0 4px;
+        border-radius: var(--semi-border-radius-small);
+    }
+
+    &-search-options-item:hover {
+        background-color: var(--semi-color-default);
+    }
+
+    &-search-options-item-active {
+        color: var(--semi-color-primary);
+        background-color: var(--semi-color-primary-light-default);
+    }
+
+    &-complete-suggestions-container {
+        border-radius: var(--semi-border-radius-medium);
+        background-color: var(--semi-color-bg-3);
+        box-shadow: var(--semi-shadow-elevated);
+        z-index: 1000;
+        min-width: 200px;
+        max-width: 400px;
+        list-style: none;
+        padding: 4px 0;
+    }
+
+    &-complete-container {
+        position: absolute;
+        z-index: 1000;
+    }
+
+    &-complete-suggestions-item {
+        padding: 8px 16px;
+        color: var(--semi-color-text-0);
+        cursor: pointer;
+    }
+}

package/jsonViewer/script/build.js

@@ -0,0 +1,51 @@
+const esbuild = require('esbuild');
+const path = require('path');
+const fs = require('fs');
+
+
+
+
+const compileWorker = async ()=>{
+    const workerEntry = path.join(__dirname, "..", "core/src/worker/json.worker.ts");
+
+    const result = await esbuild.build({
+        entryPoints: [workerEntry],
+        bundle: true,
+        write: false,
+    });
+    return result.outputFiles[0].text;
+};
+
+
+const buildMain = async ()=>{
+    const mainEntry = path.join(__dirname, "..", "core/src/index.ts");
+
+    const result = await esbuild.build({
+        entryPoints: [mainEntry],
+        bundle: true,
+        packages: 'external',
+        write: false,
+        format: 'esm'
+    });
+    return result.outputFiles[0].text;
+
+};
+
+
+
+const compile = async ()=>{
+    const workerRaw = await compileWorker();
+
+    const mainRaw = await buildMain();
+
+    const finalRaw = mainRaw.replaceAll("%WORKER_RAW%", encodeURIComponent(workerRaw));
+
+    const saveDir = path.join(__dirname, "..", "core/lib");
+
+    if (!fs.existsSync(saveDir)) {
+        fs.mkdirSync(saveDir);
+    }
+    fs.writeFileSync(path.join(saveDir, "index.js"), finalRaw, 'utf8');
+};
+
+compile();

package/jsonViewer/variables.scss

@@ -0,0 +1,27 @@
+$color-json-viewer-background: var(--semi-color-default); // JSON背景颜色
+$color-json-viewer-key: rgba(var(--semi-red-5), 1); // JSON key 颜色
+$color-json-viewer-value: rgba(var(--semi-blue-5), 1); 
+$color-json-viewer-number: rgba(var(--semi-green-5), 1); // JSON number 颜色
+$color-json-viewer-keyword: rgba(var(--semi-blue-5), 1); // JSON keyword 颜色
+$color-json-viewer-delimiter-comma: rgba(var(--semi-blue-6), 1); // JSON delimiter comma 颜色
+
+$semi-json-viewer-delimiter-colors: (
+  bracket: (
+    0: rgba(var(--semi-blue-7), 1),   // 括号层级 0 颜色
+    1: rgba(var(--semi-green-7), 1),   // 括号层级 1 颜色
+    2: rgba(var(--semi-orange-7), 1),  // 括号层级 2 颜色
+  ),
+  array: (
+    0: rgba(var(--semi-blue-7), 1),    // 数组层级 0 颜色
+    1: rgba(var(--semi-green-7), 1),   // 数组层级 1 颜色
+    2: rgba(var(--semi-orange-7), 1),  // 数组层级 2 颜色
+  )
+);
+
+$semi-json-viewer-search-result-background: rgba(var(--semi-green-2), 1); // JSON search result background 颜色
+$semi-json-viewer-current-search-result-background: rgba(var(--semi-yellow-4), 1); // JSON current search result background 颜色
+
+$semi-json-viewer-folding-icon-color: rgba(var(--semi-blue-7), 1); // JSON folding icon 颜色
+
+
+$semi-json-viewer-line-number-color: rgba(var(--semi-grey-5), 1); // JSON line number 颜色

package/lib/cjs/jsonViewer/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-json-viewer";
+};
+export { cssClasses };

package/lib/cjs/jsonViewer/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-json-viewer`
+};

package/lib/cjs/jsonViewer/foundation.d.ts

@@ -0,0 +1,21 @@
+export * from '@douyinfe/semi-json-viewer-core';
+import { JsonViewer } from '@douyinfe/semi-json-viewer-core';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getJsonViewerRef: () => HTMLElement;
+    onValueChange: (value: string) => void;
+    onValueHover: (value: string, el: HTMLElement) => HTMLElement | undefined;
+}
+declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
+    constructor(adapter: JsonViewerAdapter);
+    jsonViewer: JsonViewer | null;
+    init(): void;
+    onValueChange(value: string): void;
+    onValueHover(value: string, el: HTMLElement): HTMLElement | undefined;
+    search(searchText: string): void;
+    prevSearch(): void;
+    nextSearch(): void;
+    replace(replaceText: string): void;
+    replaceAll(replaceText: string): void;
+}
+export default JsonViewerFoundation;

package/lib/cjs/jsonViewer/foundation.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _semiJsonViewerCore = require("@douyinfe/semi-json-viewer-core");
+Object.keys(_semiJsonViewerCore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _semiJsonViewerCore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _semiJsonViewerCore[key];
+    }
+  });
+});
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class JsonViewerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, JsonViewerFoundation), adapter));
+    this.jsonViewer = null;
+  }
+  init() {
+    const props = this.getProps();
+    const jsonViewerRef = this._adapter.getJsonViewerRef();
+    this.jsonViewer = new _semiJsonViewerCore.JsonViewer(jsonViewerRef, props.value, props.options);
+    this.jsonViewer.layout();
+    this.jsonViewer.emitter.on('contentChanged', e => {
+      var _a;
+      this.onValueChange((_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getModel().getValue());
+    });
+    this.jsonViewer.emitter.on('hoverNode', e => {
+      const el = this.onValueHover(e.value, e.target);
+      if (el) {
+        this.jsonViewer.emitter.emit('renderHoverNode', {
+          el
+        });
+      }
+    });
+  }
+  onValueChange(value) {
+    this._adapter.onValueChange(value);
+  }
+  onValueHover(value, el) {
+    return this._adapter.onValueHover(value, el);
+  }
+  search(searchText) {
+    var _a;
+    const state = this.getState('searchOptions');
+    const {
+      caseSensitive,
+      wholeWord,
+      regex
+    } = state;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+  }
+  prevSearch() {
+    var _a;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+  }
+  nextSearch() {
+    var _a;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+  }
+  replace(replaceText) {
+    var _a;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().replace(replaceText);
+  }
+  replaceAll(replaceText) {
+    var _a;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().replaceAll(replaceText);
+  }
+}
+var _default = exports.default = JsonViewerFoundation;

package/lib/cjs/jsonViewer/jsonViewer.css

@@ -0,0 +1,136 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-json-viewer-background {
+  background-color: var(--semi-color-default);
+}
+.semi-json-viewer-string-key {
+  color: rgba(var(--semi-red-5), 1);
+}
+.semi-json-viewer-string-value {
+  color: rgba(var(--semi-blue-5), 1);
+}
+.semi-json-viewer-keyword {
+  color: rgba(var(--semi-blue-5), 1);
+}
+.semi-json-viewer-number {
+  color: rgba(var(--semi-green-5), 1);
+}
+.semi-json-viewer-delimiter-comma {
+  color: rgba(var(--semi-blue-6), 1);
+}
+.semi-json-viewer-delimiter-bracket-0 {
+  color: rgba(var(--semi-blue-7), 1);
+}
+.semi-json-viewer-delimiter-bracket-1 {
+  color: rgba(var(--semi-green-7), 1);
+}
+.semi-json-viewer-delimiter-bracket-2 {
+  color: rgba(var(--semi-orange-7), 1);
+}
+.semi-json-viewer-delimiter-array-0 {
+  color: rgba(var(--semi-blue-7), 1);
+}
+.semi-json-viewer-delimiter-array-1 {
+  color: rgba(var(--semi-green-7), 1);
+}
+.semi-json-viewer-delimiter-array-2 {
+  color: rgba(var(--semi-orange-7), 1);
+}
+.semi-json-viewer-search-result {
+  background-color: rgba(var(--semi-green-2), 1);
+}
+.semi-json-viewer-current-search-result {
+  background-color: rgba(var(--semi-yellow-4), 1) !important;
+}
+.semi-json-viewer-folding-icon {
+  opacity: 0.7;
+  transition: opacity 0.8s;
+  color: rgba(var(--semi-blue-7), 1);
+}
+.semi-json-viewer-view-line {
+  font-family: Menlo, Firecode, Monaco, "Courier New", monospace;
+  font-weight: normal;
+  font-size: 12px;
+  font-feature-settings: "liga" 0, "calt" 0;
+  font-variation-settings: normal;
+  letter-spacing: 0px;
+  color: #237893;
+}
+.semi-json-viewer-line-number {
+  font-family: Menlo, Firecode, Monaco, "Courier New", monospace;
+  font-weight: normal;
+  font-size: 12px;
+  font-feature-settings: "liga" 0, "calt" 0;
+  font-variation-settings: normal;
+  letter-spacing: 0px;
+  color: rgba(var(--semi-grey-5), 1);
+  text-align: center;
+  width: 50px;
+}
+.semi-json-viewer-line-number-container {
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（IE 和 Edge） */
+}
+.semi-json-viewer-line-number-container::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条（Webkit 浏览器） */
+}
+.semi-json-viewer-search-bar-container {
+  width: 440px;
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+}
+.semi-json-viewer-replace-bar, .semi-json-viewer-search-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.semi-json-viewer-search-options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.semi-json-viewer-search-options-item {
+  min-width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 4px;
+  border-radius: var(--semi-border-radius-small);
+}
+.semi-json-viewer-search-options-item:hover {
+  background-color: var(--semi-color-default);
+}
+.semi-json-viewer-search-options-item-active {
+  color: var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-json-viewer-complete-suggestions-container {
+  border-radius: var(--semi-border-radius-medium);
+  background-color: var(--semi-color-bg-3);
+  box-shadow: var(--semi-shadow-elevated);
+  z-index: 1000;
+  min-width: 200px;
+  max-width: 400px;
+  list-style: none;
+  padding: 4px 0;
+}
+.semi-json-viewer-complete-container {
+  position: absolute;
+  z-index: 1000;
+}
+.semi-json-viewer-complete-suggestions-item {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+  cursor: pointer;
+}