@douyinfe/semi-foundation 2.70.1 → 2.71.0-alpha.3

package/lib/es/jsonViewer/jsonViewer.css

@@ -0,0 +1,168 @@
+/* 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;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.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-content-container {
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（IE 和 Edge） */
+}
+.semi-json-viewer-content-container::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条（Webkit 浏览器） */
+}
+.semi-json-viewer-search-bar-container {
+  width: 458px;
+  box-sizing: border-box;
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+  background-color: var(--semi-color-bg-0);
+}
+.semi-json-viewer-search-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.semi-json-viewer-search-bar-input {
+  width: 200px;
+  flex-shrink: 0;
+}
+.semi-json-viewer-search-bar .semi-button-group {
+  flex-wrap: nowrap;
+}
+.semi-json-viewer-search-bar .semi-button:nth-of-type(1) {
+  width: 40px;
+}
+.semi-json-viewer-search-bar .semi-button:nth-of-type(2) {
+  width: 40px;
+}
+.semi-json-viewer-replace-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.semi-json-viewer-replace-bar-input {
+  width: 261px;
+}
+.semi-json-viewer-replace-bar .semi-button:nth-of-type(1) {
+  width: 52px;
+}
+.semi-json-viewer-replace-bar .semi-button:nth-of-type(2) {
+  width: 80px;
+}
+.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;
+  gap: 8px;
+}
+.semi-json-viewer-search-options-item {
+  min-width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-2);
+}
+.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;
+}

package/lib/es/jsonViewer/jsonViewer.scss

@@ -0,0 +1,200 @@
+@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;
+    }
+
+    &-delimiter-bracket-0 {
+        color: rgba(var(--semi-blue-7), 1);
+    }
+    &-delimiter-bracket-1 {
+        color: rgba(var(--semi-green-7), 1);
+    }
+    &-delimiter-bracket-2 {
+        color: rgba(var(--semi-orange-7), 1);
+    }
+    &-delimiter-array-0 {
+        color: rgba(var(--semi-blue-7), 1);
+    }
+    &-delimiter-array-1 {
+        color: rgba(var(--semi-green-7), 1);
+    }
+    &-delimiter-array-2 {
+        color: rgba(var(--semi-orange-7), 1);
+    }
+
+    &-search-result {
+        background-color: $color-json-viewer-search-result-background;
+    }
+
+    &-current-search-result {
+        background-color: $color-json-viewer-current-search-result-background !important;
+    }
+
+    &-folding-icon {
+        opacity: 0.7;
+        transition: opacity 0.8s;
+        color: $color-json-viewer-folding-icon;
+    }
+
+    &-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;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+
+    &-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: $color-json-viewer-line-number;
+        text-align: center;
+        width: 50px;
+    }
+
+    &-content-container {
+        scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+        -ms-overflow-style: none; /* 隐藏滚动条（IE 和 Edge） */
+    }
+
+    &-content-container::-webkit-scrollbar {
+        display: none; /* 隐藏滚动条（Webkit 浏览器） */
+    }
+
+    &-search-bar-container {
+        width: 458px;
+        box-sizing: border-box;
+        border: 1px solid var(--semi-color-border);
+        border-radius: var(--semi-border-radius-small);
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        gap: 8px;
+        background-color: var(--semi-color-bg-0);
+    }
+
+    &-search-bar {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        &-input {
+            width: 200px;
+            flex-shrink: 0;
+        }
+        .#{$prefix}-button-group {
+            flex-wrap: nowrap;
+        }
+        // next icon btn
+        .#{$prefix}-button:nth-of-type(1) {
+            width: 40px;
+        }
+        // prev icon btn
+        .#{$prefix}-button:nth-of-type(2) {
+            width: 40px;
+        }
+    }
+
+    &-replace-bar {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        &-input {
+            width: 261px;
+        }
+        // replace btn
+        .#{$prefix}-button:nth-of-type(1) {
+            width: 52px;
+        }
+        // all replace btn
+        .#{$prefix}-button:nth-of-type(2) {
+            width: 80px;
+        }
+    }
+
+    &-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;
+        gap: 8px;
+    }
+
+    &-search-options-item {
+        min-width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: var(--semi-border-radius-small);
+        color: var(--semi-color-text-2);
+    }
+
+    &-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/lib/es/jsonViewer/variables.scss

@@ -0,0 +1,15 @@
+$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 颜色
+
+
+$color-json-viewer-search-result-background: rgba(var(--semi-green-2), 1); // JSON search result background 颜色
+$color-json-viewer-current-search-result-background: rgba(var(--semi-yellow-4), 1); // JSON current search result background 颜色
+
+$color-json-viewer-folding-icon: rgba(var(--semi-blue-7), 1); // JSON folding icon 颜色
+
+
+$color-json-viewer-line-number: rgba(var(--semi-grey-5), 1); // JSON line number 颜色

package/lib/es/lottie/foundation.d.ts

@@ -8,7 +8,7 @@ export interface LottieAdapter<P = Record<string, any>, S = Record<string, any>>
 export interface LottieBaseProps {
     width?: string;
     height?: string;
-    params: ArgsType<typeof lottie.loadAnimation>[0];
+    params: Partial<ArgsType<typeof lottie.loadAnimation>[0]>;
     getAnimationInstance?: (instance: AnimationItem | null) => void;
     getLottie?: (lottiePKG: typeof lottie) => void;
 }

package/lib/es/resizable/foundation.d.ts

@@ -1,2 +1,6 @@
-export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
-export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+import { ResizableHandlerFoundation, ResizableFoundation } from './single';
+import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+import type { ResizableHandlerAdapter, ResizableAdapter } from './single';
+import type { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter } from './group';
+export type { ResizableHandlerAdapter, ResizableAdapter, ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, };
+export { ResizableHandlerFoundation, ResizableFoundation, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };

package/lib/es/resizable/foundation.js

@@ -1,2 +1,3 @@
-export { ResizableHandlerFoundation, ResizableFoundation } from './single';
-export { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+import { ResizableHandlerFoundation, ResizableFoundation } from './single';
+import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
+export { ResizableHandlerFoundation, ResizableFoundation, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };

package/lib/es/tree/tree.css

@@ -107,6 +107,7 @@
 .semi-tree-option-list .semi-tree-option-highlight {
   font-weight: 600;
   color: var(--semi-color-primary);
+  background-color: inherit;
 }
 .semi-tree-option-list .semi-tree-option-hidden {
   display: none;

package/lib/es/tree/tree.scss

@@ -137,6 +137,8 @@ $module: #{$prefix}-tree;
         &-highlight {
             font-weight: $font-tree_option_hightlight-fontWeight;
             color: $color-tree_option_hightlight-text;
+            // set inherit to override highlight component default bgc
+            background-color: inherit;
         }
 
         &-hidden {

package/lottie/foundation.ts

@@ -10,7 +10,7 @@ export interface LottieAdapter<P = Record<string, any>, S = Record<string, any>>
 export interface LottieBaseProps {
     width?: string;
     height?: string;
-    params: ArgsType<typeof lottie.loadAnimation>[0];
+    params: Partial<ArgsType<typeof lottie.loadAnimation>[0]>;
     getAnimationInstance?: (instance: AnimationItem|null) => void;
     getLottie?: (lottiePKG: typeof lottie) => void
 
@@ -57,4 +57,4 @@ class LottieFoundation <P = Record<string, any>, S = Record<string, any>> extend
 
 }
 
-export default LottieFoundation;
+export default LottieFoundation;

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.70.1",
+    "version": "2.71.0-alpha.3",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.70.1",
+        "@douyinfe/semi-animation": "2.71.0-alpha.3",
+        "@douyinfe/semi-json-viewer-core": "2.71.0-alpha.3",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "782c2fb120e3a72460408ba5e81271fdd8ce8238",
+    "gitHead": "156f6a12ab4c342a4807b6c55ce0f24a4a56d8e2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
@@ -37,6 +38,7 @@
         "@types/prismjs": "^1.26.3",
         "babel-plugin-lodash": "^3.3.4",
         "del": "^6.0.0",
+        "esbuild": "0.24.0",
         "gulp": "^4.0.2",
         "gulp-babel": "^8.0.0",
         "gulp-replace": "^1.1.3",

package/resizable/foundation.ts

@@ -1,15 +1,29 @@
-export {
-    ResizableHandlerAdapter, 
+import { 
     ResizableHandlerFoundation, 
     ResizableFoundation, 
-    ResizableAdapter 
 } from './single';
 
-export {
+import { 
+    ResizeGroupFoundation,
+    ResizeItemFoundation,
+    ResizeHandlerFoundation
+} from './group';
+
+import type { ResizableHandlerAdapter, ResizableAdapter } from './single';
+import type { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter } from './group';
+
+export type {
+    ResizableHandlerAdapter, 
+    ResizableAdapter,
     ResizeGroupAdapter,
     ResizeItemAdapter,
     ResizeHandlerAdapter,
+};
+
+export { 
+    ResizableHandlerFoundation, 
+    ResizableFoundation, 
     ResizeGroupFoundation,
     ResizeItemFoundation,
     ResizeHandlerFoundation
-} from './group';
+}; 

package/tree/tree.scss

@@ -137,6 +137,8 @@ $module: #{$prefix}-tree;
         &-highlight {
             font-weight: $font-tree_option_hightlight-fontWeight;
             color: $color-tree_option_hightlight-text;
+            // set inherit to override highlight component default bgc
+            background-color: inherit;
         }
 
         &-hidden {

package/tsconfig.json

@@ -6,7 +6,7 @@
         "sourceMap": true,
         "allowJs": true,
         "module": "es6",
-        "lib": ["es7", "dom", "es2017"],
+        "lib": ["esnext", "dom"],
         "moduleResolution": "node",
         "noImplicitAny": false,
         "forceConsistentCasingInFileNames": true,

package/lib/cjs/utils/getHighlight.d.ts

@@ -1,45 +0,0 @@
-interface ChunkQuery {
-    autoEscape?: boolean;
-    caseSensitive?: boolean;
-    searchWords: string[];
-    sourceString: string;
-}
-interface Chunk {
-    start: number;
-    end: number;
-    highlight: boolean;
-}
-/**
- * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word.
- *
-    findAll ['z'], 'aaazaaazaaa'
-        result #=> [
-            { start: 0, end: 3, highlight: false }
-            { start: 3, end: 4, highlight: true }
-            { start: 4, end: 7, highlight: false }
-            { start: 7, end: 8, highlight: true }
-            { start: 8, end: 11, highlight: false }
-        ]
-
-    findAll ['do', 'dollar'], 'aaa do dollar aaa'
-        #=> chunks: [
-                { start: 4, end: 6 },
-                { start: 7, end: 9 },
-                { start: 7, end: 13 },
-            ]
-        #=> chunksToHight: [
-                { start: 4, end: 6 },
-                { start: 7, end: 13 },
-            ]
-        #=> result: [
-                { start: 0, end: 4, highlight: false },
-                { start: 4, end: 6, highlight: true },
-                { start: 6, end: 7, highlight: false },
-                { start: 7, end: 13, highlight: true },
-                { start: 13, end: 17, highlight: false },
-            ]
-
- * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean })
- */
-declare const findAll: ({ autoEscape, caseSensitive, searchWords, sourceString }: ChunkQuery) => Chunk[];
-export { findAll };