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

package/lib/cjs/highlight/foundation.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Modified version based on 'highlight-words-core'
+
+const escapeRegExpFn = string => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+class HighlightFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    /**
+     * 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 })
+    */
+    this.findAll = _ref => {
+      let {
+        autoEscape = true,
+        caseSensitive = false,
+        searchWords,
+        sourceString
+      } = _ref;
+      if ((0, _isString2.default)(searchWords)) {
+        searchWords = [searchWords];
+      }
+      const chunks = this.findChunks({
+        autoEscape,
+        caseSensitive,
+        searchWords,
+        sourceString
+      });
+      const chunksToHighlight = this.combineChunks({
+        chunks
+      });
+      const result = this.fillInChunks({
+        chunksToHighlight,
+        totalLength: sourceString ? sourceString.length : 0
+      });
+      return result;
+    };
+    /**
+        * Examine text for any matches.
+        * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}).
+        * @return { start:number, end:number }[]
+    */
+    this.findChunks = _ref2 => {
+      let {
+        autoEscape,
+        caseSensitive,
+        searchWords,
+        sourceString
+      } = _ref2;
+      return searchWords.map(searchWord => typeof searchWord === 'string' ? {
+        text: searchWord
+      } : searchWord).filter(searchWord => searchWord.text) // Remove empty words
+      .reduce((chunks, searchWord) => {
+        let searchText = searchWord.text;
+        if (autoEscape) {
+          searchText = escapeRegExpFn(searchText);
+        }
+        const regex = new RegExp(searchText, caseSensitive ? 'g' : 'gi');
+        let match;
+        while (match = regex.exec(sourceString)) {
+          const start = match.index;
+          const end = regex.lastIndex;
+          if (end > start) {
+            chunks.push({
+              highlight: true,
+              start,
+              end,
+              className: searchWord.className,
+              style: searchWord.style
+            });
+          }
+          if (match.index === regex.lastIndex) {
+            regex.lastIndex++;
+          }
+        }
+        return chunks;
+      }, []);
+    };
+    /**
+    * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks.
+    * @return {start:number, end:number}[]
+    */
+    this.combineChunks = _ref3 => {
+      let {
+        chunks
+      } = _ref3;
+      return chunks.sort((first, second) => first.start - second.start).reduce((processedChunks, nextChunk) => {
+        // First chunk just goes straight in the array...
+        if (processedChunks.length === 0) {
+          return [nextChunk];
+        } else {
+          // ... subsequent chunks get checked to see if they overlap...
+          const prevChunk = processedChunks.pop();
+          if (nextChunk.start <= prevChunk.end) {
+            // It may be the case that prevChunk completely surrounds nextChunk, so take the
+            // largest of the end indeces.
+            const endIndex = Math.max(prevChunk.end, nextChunk.end);
+            processedChunks.push({
+              highlight: true,
+              start: prevChunk.start,
+              end: endIndex,
+              className: prevChunk.className || nextChunk.className,
+              style: Object.assign(Object.assign({}, prevChunk.style), nextChunk.style)
+            });
+          } else {
+            processedChunks.push(prevChunk, nextChunk);
+          }
+          return processedChunks;
+        }
+      }, []);
+    };
+    /**
+    * Given a set of chunks to highlight, create an additional set of chunks
+    * to represent the bits of text between the highlighted text.
+    * @param chunksToHighlight {start:number, end:number}[]
+    * @param totalLength number
+    * @return {start:number, end:number, highlight:boolean}[]
+    */
+    this.fillInChunks = _ref4 => {
+      let {
+        chunksToHighlight,
+        totalLength
+      } = _ref4;
+      const allChunks = [];
+      const append = (start, end, highlight, className, style) => {
+        if (end - start > 0) {
+          allChunks.push({
+            start,
+            end,
+            highlight,
+            className,
+            style
+          });
+        }
+      };
+      if (chunksToHighlight.length === 0) {
+        append(0, totalLength, false);
+      } else {
+        let lastIndex = 0;
+        chunksToHighlight.forEach(chunk => {
+          append(lastIndex, chunk.start, false);
+          append(chunk.start, chunk.end, true, chunk.className, chunk.style);
+          lastIndex = chunk.end;
+        });
+        append(lastIndex, totalLength, false);
+      }
+      return allChunks;
+    };
+  }
+}
+exports.default = HighlightFoundation;

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,24 @@
+import { JsonViewer, JsonViewerOptions } from '@douyinfe/semi-json-viewer-core';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export type { JsonViewerOptions };
+export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getEditorRef: () => HTMLElement;
+    getSearchRef: () => HTMLInputElement;
+    notifyChange: (value: string) => void;
+    notifyHover: (value: string, el: HTMLElement) => HTMLElement | undefined;
+    setSearchOptions: (key: string) => void;
+    showSearchBar: () => void;
+}
+declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
+    constructor(adapter: JsonViewerAdapter);
+    jsonViewer: JsonViewer | null;
+    init(): void;
+    search(searchText: string): void;
+    prevSearch(): void;
+    nextSearch(): void;
+    replace(replaceText: string): void;
+    replaceAll(replaceText: string): void;
+    setSearchOptions(key: string): void;
+    showSearchBar(): void;
+}
+export default JsonViewerFoundation;

package/lib/cjs/jsonViewer/foundation.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _semiJsonViewerCore = require("@douyinfe/semi-json-viewer-core");
+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 editorRef = this._adapter.getEditorRef();
+    this.jsonViewer = new _semiJsonViewerCore.JsonViewer(editorRef, props.value, props.options);
+    this.jsonViewer.layout();
+    this.jsonViewer.emitter.on('contentChanged', e => {
+      var _a;
+      this._adapter.notifyChange((_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getModel().getValue());
+      if (this.getState('showSearchBar')) {
+        this.search(this._adapter.getSearchRef().value);
+      }
+    });
+    this.jsonViewer.emitter.on('hoverNode', e => {
+      const el = this._adapter.notifyHover(e.value, e.target);
+      if (el) {
+        this.jsonViewer.emitter.emit('renderHoverNode', {
+          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);
+  }
+  setSearchOptions(key) {
+    this._adapter.setSearchOptions(key);
+  }
+  showSearchBar() {
+    this._adapter.showSearchBar();
+  }
+}
+var _default = exports.default = JsonViewerFoundation;

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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 };