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

package/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/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,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/cascader/constants.d.ts

@@ -14,6 +14,8 @@ declare const strings: {
     readonly NONE_MERGE_TYPE: "none";
     readonly SEARCH_POSITION_TRIGGER: "trigger";
     readonly SEARCH_POSITION_CUSTOM: "custom";
+    readonly RELATED: "related";
+    readonly UN_RELATED: "unRelated";
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/cjs/cascader/constants.js

@@ -21,7 +21,9 @@ const strings = exports.strings = {
   AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
   NONE_MERGE_TYPE: 'none',
   SEARCH_POSITION_TRIGGER: 'trigger',
-  SEARCH_POSITION_CUSTOM: 'custom'
+  SEARCH_POSITION_CUSTOM: 'custom',
+  RELATED: 'related',
+  UN_RELATED: 'unRelated'
 };
 const numbers = exports.numbers = {};
 const VALUE_SPLIT = exports.VALUE_SPLIT = '_SEMI_CASCADER_SPLIT_';

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

@@ -112,6 +112,7 @@ export interface BasicCascaderProps {
     enableLeafClick?: boolean;
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
+    checkRelation?: string;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -228,6 +229,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     notifyIfLoadData(item: BasicEntity | BasicData): void;
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
+    _handleRelatedMultipleSelect(item: BasicEntity | BasicData): void;
+    _handleUnRelatedMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean): {
         checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;

package/lib/cjs/cascader/foundation.js

@@ -602,6 +602,19 @@ class CascaderFoundation extends _foundation.default {
     }
   }
   _handleMultipleSelect(item) {
+    const {
+      checkRelation
+    } = this.getProps();
+    if (checkRelation === _constants.strings.RELATED) {
+      this._handleRelatedMultipleSelect(item);
+    } else if (checkRelation === 'unRelated') {
+      this._handleUnRelatedMultipleSelect(item);
+    }
+    this._adapter.updateStates({
+      inputValue: ''
+    });
+  }
+  _handleRelatedMultipleSelect(item) {
     const {
       key
     } = item;
@@ -666,9 +679,48 @@ class CascaderFoundation extends _foundation.default {
     if (curCheckedStatus) {
       this._notifySelect(curRealCheckedKeys);
     }
-    this._adapter.updateStates({
-      inputValue: ''
-    });
+  }
+  _handleUnRelatedMultipleSelect(item) {
+    const {
+      key
+    } = item;
+    const {
+      checkedKeys,
+      keyEntities
+    } = this.getStates();
+    const {
+      max
+    } = this.getProps();
+    const newCheckedKeys = new Set(checkedKeys);
+    let targetStatus;
+    const prevCheckedStatus = checkedKeys.has(key);
+    if (prevCheckedStatus) {
+      newCheckedKeys.delete(key);
+      targetStatus = false;
+    } else {
+      // 查看是否超出 max
+      if ((0, _isNumber2.default)(max)) {
+        if (checkedKeys.size >= max) {
+          const checkedEntities = [];
+          checkedKeys.forEach(itemKey => {
+            checkedEntities.push(keyEntities[itemKey]);
+          });
+          this._adapter.notifyOnExceed(checkedEntities);
+          return;
+        }
+      }
+      newCheckedKeys.add(key);
+      targetStatus = true;
+    }
+    if (!this._isControlledComponent()) {
+      this._adapter.updateStates({
+        checkedKeys: newCheckedKeys
+      });
+    }
+    this._notifyChange(newCheckedKeys);
+    if (targetStatus) {
+      this._notifySelect(newCheckedKeys);
+    }
   }
   calcNonDisabledCheckedKeys(eventKey, targetStatus) {
     const {

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

@@ -0,0 +1,45 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export declare function clampValueInRange(value: number, min: number, max: number): number;
+export interface DragMoveAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getDragElement: () => HTMLElement;
+    getConstrainer: () => HTMLElement | null;
+    getHandler: () => HTMLElement;
+    notifyMouseDown?: (e: MouseEvent) => void;
+    notifyMouseMove?: (e: MouseEvent) => void;
+    notifyMouseUp?: (e: MouseEvent) => void;
+    notifyTouchStart?: (e: TouchEvent) => void;
+    notifyTouchMove?: (e: TouchEvent) => void;
+    notifyTouchEnd?: (e: TouchEvent) => void;
+    notifyTouchCancel?: (e: TouchEvent) => void;
+}
+export default class DragMoveFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<DragMoveAdapter<P, S>, P, S> {
+    element: HTMLElement;
+    xMax: number;
+    xMin: number;
+    yMax: number;
+    yMin: number;
+    startOffsetX: number;
+    startOffsetY: number;
+    get constrainer(): HTMLElement;
+    get handler(): HTMLElement;
+    constructor(adapter: DragMoveAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+    _registerDocMouseEvent: () => void;
+    _unRegisterDocMouseEvent: () => void;
+    _registerDocTouchEvent: () => void;
+    _unRegisterDocTouchEvent: () => void;
+    _unRegisterEvent(): void;
+    _calcMoveRange(): void;
+    _allowMove(e: MouseEvent | TouchEvent): any;
+    _calcOffset: (e: Touch | MouseEvent) => void;
+    _preventDefault: (e: MouseEvent | TouchEvent) => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
+    _changePos: (e: Touch | MouseEvent) => void;
+    _onMouseMove: (e: MouseEvent) => void;
+    _onTouchMove: (e: TouchEvent) => void;
+    _onMouseUp: (e: MouseEvent) => void;
+    _onTouchEnd: (e: TouchEvent) => void;
+    _onTouchCancel: (e: TouchEvent) => void;
+}

package/lib/cjs/dragMove/foundation.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clampValueInRange = clampValueInRange;
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function clampValueInRange(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+class DragMoveFoundation extends _foundation.default {
+  get constrainer() {
+    return this._adapter.getConstrainer();
+  }
+  get handler() {
+    return this._adapter.getHandler();
+  }
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this._registerDocMouseEvent = () => {
+      document.addEventListener('mousemove', this._onMouseMove);
+      document.addEventListener('mouseup', this._onMouseUp);
+    };
+    this._unRegisterDocMouseEvent = () => {
+      document.removeEventListener('mousemove', this._onMouseMove);
+      document.removeEventListener('mouseup', this._onMouseUp);
+    };
+    this._registerDocTouchEvent = () => {
+      document.addEventListener('touchend', this._onTouchEnd);
+      document.addEventListener('touchmove', this._onTouchMove);
+      document.addEventListener('touchcancel', this._onTouchCancel);
+    };
+    this._unRegisterDocTouchEvent = () => {
+      document.removeEventListener('touchend', this._onTouchEnd);
+      document.removeEventListener('touchmove', this._onTouchMove);
+      document.removeEventListener('touchcancel', this._onTouchCancel);
+    };
+    this._calcOffset = e => {
+      this.startOffsetX = e.clientX - this.element.offsetLeft;
+      this.startOffsetY = e.clientY - this.element.offsetTop;
+    };
+    this._preventDefault = e => {
+      // prevent default behavior, avoid other element(like img, text) be selected
+      e.preventDefault();
+    };
+    this.onMouseDown = e => {
+      this._calcMoveRange();
+      this._adapter.notifyMouseDown(e);
+      if (!this._allowMove(e)) {
+        return;
+      }
+      this._registerDocMouseEvent();
+      // store origin offset
+      this._calcOffset(e);
+      this._preventDefault(e);
+    };
+    this.onTouchStart = e => {
+      this._calcMoveRange();
+      this._adapter.notifyTouchStart(e);
+      if (!this._allowMove(e)) {
+        return;
+      }
+      this._registerDocTouchEvent();
+      const touch = e.targetTouches[0];
+      this._calcOffset(touch);
+      this._preventDefault(e);
+    };
+    this._changePos = e => {
+      const {
+        customMove
+      } = this.getProps();
+      let newLeft = e.clientX - this.startOffsetX;
+      let newTop = e.clientY - this.startOffsetY;
+      if (this.constrainer) {
+        newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
+        newTop = clampValueInRange(newTop, this.yMin, this.yMax);
+      }
+      requestAnimationFrame(() => {
+        if (customMove) {
+          customMove(this.element, newTop, newLeft);
+          return;
+        }
+        this.element.style.top = newTop + 'px';
+        this.element.style.left = newLeft + 'px';
+      });
+    };
+    this._onMouseMove = e => {
+      this._adapter.notifyMouseMove(e);
+      this._changePos(e);
+    };
+    this._onTouchMove = e => {
+      this._adapter.notifyTouchMove(e);
+      const touch = e.targetTouches[0];
+      this._changePos(touch);
+    };
+    this._onMouseUp = e => {
+      this._adapter.notifyMouseUp(e);
+      this._unRegisterDocMouseEvent();
+    };
+    this._onTouchEnd = e => {
+      this._adapter.notifyTouchEnd(e);
+      this._unRegisterDocTouchEvent();
+    };
+    this._onTouchCancel = e => {
+      this._adapter.notifyTouchCancel(e);
+      this._unRegisterDocTouchEvent();
+    };
+  }
+  init() {
+    const element = this._adapter.getDragElement();
+    if (!element) {
+      throw new Error('drag element must be a valid element');
+    }
+    this.element = element;
+    this.element.style.position = 'absolute';
+    this.handler.style.cursor = 'move';
+  }
+  destroy() {
+    this._unRegisterEvent();
+  }
+  _unRegisterEvent() {
+    this._unRegisterDocMouseEvent();
+    this._unRegisterDocTouchEvent();
+  }
+  _calcMoveRange() {
+    // Calculate the range within which an element can move
+    if (this.constrainer) {
+      let node = this.element.offsetParent;
+      let startX = 0;
+      let startY = 0;
+      while (node !== this.constrainer && node !== null) {
+        startX -= node.offsetLeft;
+        startY -= node.offsetTop;
+        node = node.offsetParent;
+      }
+      this.xMin = startX;
+      this.xMax = startX + this.constrainer.offsetWidth - this.element.offsetWidth;
+      this.yMin = startY;
+      this.yMax = startY + this.constrainer.offsetHeight - this.element.offsetHeight;
+    }
+  }
+  _allowMove(e) {
+    const {
+      allowMove,
+      allowInputDrag
+    } = this.getProps();
+    // When the clicked object is an input or textarea, clicking should be allowed but dragging should not be allowed.
+    if (!allowInputDrag) {
+      let target = e.target.tagName.toLowerCase();
+      if (target === 'input' || target === 'textarea') {
+        return;
+      }
+    }
+    if (allowMove) {
+      return allowMove(e, this.element);
+    }
+    return true;
+  }
+}
+exports.default = DragMoveFoundation;

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

@@ -0,0 +1,84 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+interface HighlightAdapter extends Partial<DefaultAdapter> {
+}
+interface ChunkQuery {
+    autoEscape?: boolean;
+    caseSensitive?: boolean;
+    searchWords: SearchWords;
+    sourceString: string;
+}
+export interface Chunk {
+    start: number;
+    end: number;
+    highlight: boolean;
+    className: string;
+    style: Record<string, string>;
+}
+export interface ComplexSearchWord {
+    text: string;
+    className?: string;
+    style?: Record<string, string>;
+}
+export type SearchWord = string | ComplexSearchWord | undefined;
+export type SearchWords = SearchWord[];
+export default class HighlightFoundation extends BaseFoundation<HighlightAdapter> {
+    constructor(adapter?: HighlightAdapter);
+    /**
+     * 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 })
+    */
+    findAll: ({ autoEscape, caseSensitive, searchWords, sourceString }: ChunkQuery) => Chunk[];
+    /**
+        * 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 }[]
+    */
+    findChunks: ({ autoEscape, caseSensitive, searchWords, sourceString }: ChunkQuery) => Chunk[];
+    /**
+   * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks.
+   * @return {start:number, end:number}[]
+   */
+    combineChunks: ({ chunks }: {
+        chunks: Chunk[];
+    }) => Chunk[];
+    /**
+   * 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}[]
+   */
+    fillInChunks: ({ chunksToHighlight, totalLength }: {
+        chunksToHighlight: Chunk[];
+        totalLength: number;
+    }) => Chunk[];
+}
+export {};