zs_library 0.2.3 → 0.3.5

package/README.md

@@ -5,39 +5,6 @@
 
 个人业务组件库 React
 
-## Usage
-
-TODO
-
-## Options
-
-TODO
-
-## Development
-
-```bash
-# install dependencies
-$ pnpm install
-
-# develop library by docs demo
-$ pnpm start
-
-# build library source code
-$ pnpm run build
-
-# build library source code in watch mode
-$ pnpm run build:watch
-
-# build docs
-$ pnpm run docs:build
-
-# Locally preview the production build.
-$ pnpm run docs:preview
-
-# check your project for potential problems
-$ pnpm run doctor
-```
-
 ## LICENSE
 
 MIT

package/dist/{Desktop → components/Desktop}/ContextMenu/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SortItem } from '../types';
 export interface ContextMenuProps<D, C> {
     showShareButton?: boolean;
@@ -9,5 +8,5 @@ export interface ContextMenuProps<D, C> {
     onInfoClick?: (item: SortItem<D, C>) => void;
     onRemoveClick?: (item: SortItem<D, C>, remove: (id: string) => void) => void;
 }
-declare const ContextMenu: <D, C>(props: ContextMenuProps<D, C>) => React.JSX.Element;
+declare const ContextMenu: <D, C>(props: ContextMenuProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default ContextMenu;

package/dist/{Desktop → components/Desktop}/Items/GroupItem.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { SortItem } from '../types';
 import { SortableItemProps } from './SortableItem';
 interface SortableGroupItemProps<D, C> extends SortableItemProps<D, C> {
     data: SortItem<D, C>;
 }
-declare const SortableGroupItem: <D, C>(props: SortableGroupItemProps<D, C>) => React.JSX.Element;
+declare const SortableGroupItem: <D, C>(props: SortableGroupItemProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default SortableGroupItem;

package/dist/{Desktop → components/Desktop}/Items/Modal/GroupItemModal.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import { SortItem } from '../../types';
 interface GroupItemModalProps<D, C> {
     data: SortItem | null;
     onClose: () => void;
     onItemClick?: (item: SortItem<D, C>) => void;
 }
-declare const GroupItemModal: <D, C>(props: GroupItemModalProps<D, C>) => React.JSX.Element;
+declare const GroupItemModal: <D, C>(props: GroupItemModalProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default GroupItemModal;

package/dist/{Desktop → components/Desktop}/Items/Modal/InfoModal.d.ts

@@ -1,4 +1,3 @@
-import 'rc-dialog/assets/index.css';
 import { FC } from 'react';
 import { SortItem } from '../../types';
 export interface ItemInfoModalProps {

package/dist/{Desktop → components/Desktop}/Items/SortableItem.d.ts

@@ -1,5 +1,4 @@
-import 'rc-tooltip/assets/bootstrap_white.css';
-import React from 'react';
+import { default as React } from 'react';
 import { SortItem } from '../types';
 export interface SortableItemProps<D, C> {
     data: SortItem<D, C>;
@@ -12,6 +11,6 @@ export interface SortableItemProps<D, C> {
     parentIds?: (string | number)[];
     childrenLength?: number;
 }
-export declare const SortableItemDefaultContent: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;
-declare const SortableItem: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;
+export declare const SortableItemDefaultContent: <D, C>(props: SortableItemProps<D, C>) => import("react/jsx-runtime").JSX.Element;
+declare const SortableItem: <D, C>(props: SortableItemProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default SortableItem;

package/dist/{Desktop → components/Desktop}/Sortable.d.ts

@@ -1,7 +1,5 @@
-import React from 'react';
-import Slider, { Settings } from 'react-slick';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
+import { default as React } from 'react';
+import { default as Slider, Settings } from 'react-slick';
 import { SortItem } from './types';
 export interface Pagination {
     position?: 'top' | 'bottom' | 'left' | 'right';
@@ -29,5 +27,5 @@ export interface SortableProps<D, C> {
      */
     onItemClick?: (item: SortItem<D, C>) => void;
 }
-declare const Sortable: <D, C>(props: SortableProps<D, C>) => React.JSX.Element;
+declare const Sortable: <D, C>(props: SortableProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default Sortable;

package/dist/{Desktop → components/Desktop}/context/config/context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ContextMenuProps } from '../../ContextMenu';
 import { Theme } from '../../theme';
 import { SortItem } from '../../types';
@@ -41,4 +41,4 @@ export interface SortableConfigProviderProps<D, C> extends Omit<SortableConfig<D
     readonly theme?: 'light' | 'dark' | Theme;
     children: React.ReactNode;
 }
-export declare const SortableConfigProvider: <D, C>(props: SortableConfigProviderProps<D, C>) => React.JSX.Element;
+export declare const SortableConfigProvider: <D, C>(props: SortableConfigProviderProps<D, C>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Desktop/context/config/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useSortableConfig: () => import('./context').SortableConfig<any, any>;

package/dist/{Desktop → components/Desktop}/context/state/context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SortItem } from '../../types';
 interface ContextMenu {
     rect: DOMRect;
@@ -55,5 +55,5 @@ export interface SortableStateProviderProps<D, C> {
     enableCaching?: boolean;
     children: React.ReactNode;
 }
-export declare const SortableStateProvider: <D, C>(props: SortableStateProviderProps<D, C>) => React.JSX.Element;
+export declare const SortableStateProvider: <D, C>(props: SortableStateProviderProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Desktop/context/state/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useSortableState: () => import('./context').SortableState;

package/dist/{Desktop → components/Desktop}/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { SortableProps } from './Sortable';
 import { SortableConfigProviderProps } from './context/config/context';
 import { SortableStateProviderProps } from './context/state/context';
 export interface DesktopProps<D = any, C = any> extends SortableProps<D, C>, Omit<SortableStateProviderProps<D, C>, 'children'>, Omit<SortableConfigProviderProps<D, C>, 'children'> {
 }
-declare const Desktop: <D, C>(props: DesktopProps<D, C>) => React.JSX.Element;
+declare const Desktop: <D, C>(props: DesktopProps<D, C>) => import("react/jsx-runtime").JSX.Element;
 export default Desktop;

package/dist/components/Desktop/utils.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from './theme';
+import { SortItem } from './types';
+declare class SortableUtils {
+    /** 清理重复id */
+    static uniqueArray: (array: SortItem[]) => SortItem<any, any>[];
+    static getTheme: (theme?: Theme) => {
+        light: {
+            itemNameColor?: string;
+            itemIconBackgroundColor?: string;
+            itemIconShadowColor?: string;
+            groupItemIconBackgroundColor?: string;
+            groupItemIconShadowColor?: string;
+            groupItemModalBackgroundColor?: string;
+            contextMenuTextColor?: string;
+            contextMenuActiveColor?: string;
+            contextMenuBackgroundColor?: string;
+            contextMenuShadowColor?: string;
+        };
+        dark: {
+            itemNameColor?: string;
+            itemIconBackgroundColor?: string;
+            itemIconShadowColor?: string;
+            groupItemIconBackgroundColor?: string;
+            groupItemIconShadowColor?: string;
+            groupItemModalBackgroundColor?: string;
+            contextMenuTextColor?: string;
+            contextMenuActiveColor?: string;
+            contextMenuBackgroundColor?: string;
+            contextMenuShadowColor?: string;
+        };
+    };
+}
+export default SortableUtils;

package/dist/components/Editor/components/BlockTools/MediaAndEmbed/Image/index.d.ts

@@ -0,0 +1,146 @@
+import { TunesMenuConfig } from '@editorjs/editorjs/types/tools';
+import { ToolboxConfig, PasteConfig, BlockToolConstructorOptions, BlockTool, PasteEvent } from '@editorjs/editorjs';
+import { ActionConfig, ImageToolData, ImageConfig } from './types/types';
+type ImageToolConstructorOptions = BlockToolConstructorOptions<ImageToolData, ImageConfig>;
+/**
+ * Implementation of ImageTool class
+ */
+export default class ImageTool implements BlockTool {
+    /**
+     * Editor.js API instance
+     */
+    private api;
+    /**
+     * Flag indicating read-only mode
+     */
+    private readOnly;
+    /**
+     * Current Block API instance
+     */
+    private block;
+    /**
+     * Configuration for the ImageTool
+     */
+    private config;
+    /**
+     * Uploader module instance
+     */
+    private uploader;
+    /**
+     * UI module instance
+     */
+    private ui;
+    /**
+     * Stores current block data internally
+     */
+    private _data;
+    /**
+     * @param tool - tool properties got from editor.js
+     * @param tool.data - previously saved data
+     * @param tool.config - user config for Tool
+     * @param tool.api - Editor.js API
+     * @param tool.readOnly - read-only mode flag
+     * @param tool.block - current Block API
+     */
+    constructor({ data, config, api, readOnly, block, }: ImageToolConstructorOptions);
+    /**
+     * Notify core that read-only mode is supported
+     */
+    static get isReadOnlySupported(): boolean;
+    /**
+     * Get Tool toolbox settings
+     * icon - Tool icon's SVG
+     * title - title to show in toolbox
+     */
+    static get toolbox(): ToolboxConfig;
+    /**
+     * Available image tools
+     */
+    static get tunes(): Array<ActionConfig>;
+    /**
+     * Renders Block content
+     */
+    render(): HTMLDivElement;
+    /**
+     * Validate data: check if Image exists
+     * @param savedData — data received after saving
+     * @returns false if saved data is not correct, otherwise true
+     */
+    validate(savedData: ImageToolData): boolean;
+    /**
+     * Return Block data
+     */
+    save(): ImageToolData;
+    /**
+     * Returns configuration for block tunes: add background, add border, stretch image
+     * @returns TunesMenuConfig
+     */
+    renderSettings(): TunesMenuConfig;
+    /**
+     * Fires after clicks on the Toolbox Image Icon
+     * Initiates click on the Select File button
+     */
+    appendCallback(): void;
+    /**
+     * Specify paste substitutes
+     * @see {@link https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling}
+     */
+    static get pasteConfig(): PasteConfig;
+    /**
+     * Specify paste handlers
+     * @see {@link https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling}
+     * @param event - editor.js custom paste event
+     *                              {@link https://github.com/codex-team/editor.js/blob/master/types/tools/paste-events.d.ts}
+     */
+    onPaste(event: PasteEvent): Promise<void>;
+    /**
+     * Private methods
+     * ̿̿ ̿̿ ̿̿ ̿'̿'\̵͇̿̿\з= ( ▀ ͜͞ʖ▀) =ε/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿
+     */
+    /**
+     * Stores all Tool's data
+     * @param data - data in Image Tool format
+     */
+    private set data(value);
+    /**
+     * Return Tool data
+     */
+    private get data();
+    /**
+     * Set new image file
+     * @param file - uploaded file data
+     */
+    private set image(value);
+    /**
+     * File uploading callback
+     * @param response - uploading server response
+     */
+    private onUpload;
+    /**
+     * Handle uploader errors
+     * @param errorText - uploading error info
+     */
+    private uploadingFailed;
+    /**
+     * Callback fired when Block Tune is activated
+     * @param tuneName - tune that has been clicked
+     */
+    private tuneToggled;
+    /**
+     * Set one tune
+     * @param tuneName - {@link Tunes.tunes}
+     * @param value - tune state
+     */
+    private setTune;
+    /**
+     * Show preloader and upload image file
+     * @param file - file that is currently uploading (from paste)
+     */
+    private uploadFile;
+    /**
+     * Show preloader and upload image by target url
+     * @param url - url pasted
+     */
+    private uploadUrl;
+}
+export {};

package/dist/components/Editor/components/BlockTools/MediaAndEmbed/Image/types/types.d.ts

@@ -0,0 +1,172 @@
+import { HTMLPasteEventDetail } from '@editorjs/editorjs';
+/**
+ * Represents options for uploading, including a function to handle previewing.
+ */
+export interface UploadOptions {
+    /**
+     * Callback function to be called when the preview is ready.
+     * @param src - The source of the preview as a string.
+     * @returns void
+     */
+    onPreview: (src: string) => void;
+}
+/**
+ * User configuration of Image block tunes. Allows to add custom tunes through the config
+ */
+export interface ActionConfig {
+    /**
+     * The name of the tune.
+     */
+    name: string;
+    /**
+     * The icon for the tune. Should be an SVG string.
+     */
+    icon: string;
+    /**
+     * The title of the tune. This will be displayed in the UI.
+     */
+    title: string;
+    /**
+     * An optional flag indicating whether the tune is a toggle (true) or not (false).
+     */
+    toggle?: boolean;
+    /**
+     * An optional action function to be executed when the tune is activated.
+     */
+    action?: Function;
+}
+/**
+ * UploadResponseFormat interface representing the response format expected from the backend on file uploading.
+ */
+export interface UploadResponseFormat<AdditionalFileData = {}> {
+    /**
+     * success - 1 for successful uploading, 0 for failure
+     */
+    success: number;
+    /**
+     * Object with file data.
+     *             'url' is required,
+     *             also can contain any additional data that will be saved and passed back
+     */
+    file: {
+        /**
+         * The URL of the uploaded image.
+         */
+        url: string;
+    } & AdditionalFileData;
+}
+/**
+ * ImageToolData type representing the input and output data format for the image tool, including optional custome actions.
+ */
+export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
+    /**
+     * Caption for the image.
+     */
+    caption: string;
+    /**
+     * Flag indicating whether the image has a border.
+     */
+    withBorder: boolean;
+    /**
+     * Flag indicating whether the image has a background.
+     */
+    withBackground: boolean;
+    /**
+     * Flag indicating whether the image is stretched.
+     */
+    stretched: boolean;
+    /**
+     * Object containing the URL of the image file.
+     * Also can contain any additional data.
+     */
+    file: {
+        /**
+         * The URL of the image.
+         */
+        url: string;
+    } & AdditionalFileData;
+} & (Actions extends Record<string, boolean> ? Actions : {});
+/**
+ *
+ * @description Config supported by Tool
+ */
+export interface ImageConfig {
+    /**
+     * Endpoints for upload, whether using file or URL.
+     */
+    endpoints: {
+        /**
+         * Endpoint for file upload.
+         */
+        byFile?: string;
+        /**
+         * Endpoints for URL upload.
+         */
+        byUrl?: string;
+    };
+    /**
+     * Field name for the uploaded image.
+     */
+    field?: string;
+    /**
+     * Allowed mime-types for the uploaded image.
+     */
+    types?: string;
+    /**
+     * Placeholder text for the caption field.
+     */
+    captionPlaceholder?: string;
+    /**
+     * Additional data to send with requests.
+     */
+    additionalRequestData?: object;
+    /**
+     * Additional headers to send with requests.
+     */
+    additionalRequestHeaders?: object;
+    /**
+     * Custom content for the select file button.
+     */
+    buttonContent?: string;
+    /**
+     * Optional custom uploader.
+     */
+    uploader?: {
+        /**
+         * Method to upload an image by file.
+         */
+        uploadByFile?: (file: Blob) => Promise<UploadResponseFormat>;
+        /**
+         * Method to upload an image by URL.
+         */
+        uploadByUrl?: (url: string) => Promise<UploadResponseFormat>;
+    };
+    /**
+     * Additional actions for the tool.
+     */
+    actions?: ActionConfig[];
+}
+/**
+ * Interface representing the details of a paste event for HTML elements.
+ * Extends the `HTMLPasteEventDetail` interface to include additional data properties.
+ */
+export interface HTMLPasteEventDetailExtended extends HTMLPasteEventDetail {
+    /**
+     * The data property containing the source of the image and HTML element details.
+     */
+    data: {
+        /**
+         * The source URL of the pasted image.
+         */
+        src: string;
+    } & HTMLElement;
+}
+/**
+ * Parameter type of Image setter function in ImageTool
+ */
+export type ImageSetterParam = {
+    /**
+     * url path of the image
+     */
+    url: string;
+};

package/dist/components/Editor/components/BlockTools/MediaAndEmbed/Image/ui.d.ts

@@ -0,0 +1,132 @@
+import { API } from '@editorjs/editorjs';
+import { ImageToolData, ImageConfig } from './types/types';
+/**
+ * Nodes interface representing various elements in the UI.
+ */
+interface Nodes {
+    /**
+     * Wrapper element in the UI.
+     */
+    wrapper: HTMLElement;
+    /**
+     * Container for the image element in the UI.
+     */
+    imageContainer: HTMLElement;
+    /**
+     * Button for selecting files.
+     */
+    fileButton: HTMLElement;
+    /**
+     * Represents the image element in the UI, if one is present; otherwise, it's undefined.
+     */
+    imageEl?: HTMLElement;
+    /**
+     * Preloader element for the image.
+     */
+    imagePreloader: HTMLElement;
+    /**
+     * Caption element for the image.
+     */
+    caption: HTMLElement;
+}
+/**
+ * ConstructorParams interface representing parameters for the Ui class constructor.
+ */
+interface ConstructorParams {
+    /**
+     * Editor.js API.
+     */
+    api: API;
+    /**
+     * Configuration for the image.
+     */
+    config: ImageConfig;
+    /**
+     * Callback function for selecting a file.
+     */
+    onSelectFile: () => void;
+    /**
+     * Flag indicating if the UI is in read-only mode.
+     */
+    readOnly: boolean;
+}
+/**
+ * Class for working with UI:
+ *  - rendering base structure
+ *  - show/hide preview
+ *  - apply tune view
+ */
+export default class Ui {
+    /**
+     * Nodes representing various elements in the UI.
+     */
+    nodes: Nodes;
+    /**
+     * API instance for Editor.js.
+     */
+    private api;
+    /**
+     * Configuration for the image tool.
+     */
+    private config;
+    /**
+     * Callback function for selecting a file.
+     */
+    private onSelectFile;
+    /**
+     * Flag indicating if the UI is in read-only mode.
+     */
+    private readOnly;
+    /**
+     * @param ui - image tool Ui module
+     * @param ui.api - Editor.js API
+     * @param ui.config - user config
+     * @param ui.onSelectFile - callback for clicks on Select file button
+     * @param ui.readOnly - read-only mode flag
+     */
+    constructor({ api, config, onSelectFile, readOnly }: ConstructorParams);
+    /**
+     * Apply visual representation of activated tune
+     * @param tuneName - one of available tunes {@link Tunes.tunes}
+     * @param status - true for enable, false for disable
+     */
+    applyTune(tuneName: string, status: boolean): void;
+    /**
+     * Renders tool UI
+     * @param toolData - saved tool data
+     */
+    render(toolData: ImageToolData): HTMLElement;
+    /**
+     * Shows uploading preloader
+     * @param src - preview source
+     */
+    showPreloader(src: string): void;
+    /**
+     * Hide uploading preloader
+     */
+    hidePreloader(): void;
+    /**
+     * Shows an image
+     * @param url - image source
+     */
+    fillImage(url: string): void;
+    /**
+     * Shows caption input
+     * @param text - caption content text
+     */
+    fillCaption(text: string): void;
+    /**
+     * CSS classes
+     */
+    private get CSS();
+    /**
+     * Creates upload-file button
+     */
+    private createFileButton;
+    /**
+     * Changes UI status
+     * @param status - see {@link Ui.status} constants
+     */
+    private toggleStatus;
+}
+export {};