@enableai-base/ui 1.0.0

package/dist/ui.css

@@ -0,0 +1,224 @@
+.color-checkbox-group {
+  display: flex;
+  row-gap: 8px;
+  flex-wrap: wrap;
+}
+
+.color-checkbox-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.color-checkbox-group .ant-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+.color-checkbox-tag {
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.color-radio-group {
+  display: flex !important;
+  flex-wrap: wrap;
+  row-gap: 8px;
+}
+
+.color-radio-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.color-radio-group .ant-radio-label {
+  display: flex;
+  align-items: center;
+}
+
+.color-radio-tag {
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.color-picker-button {
+  --cp-size: 18px;
+  --cp-radius: 50%;
+
+  position: relative;
+  width: var(--cp-size);
+  height: var(--cp-size);
+  cursor: pointer;
+}
+
+  .color-picker-button:hover .color-picker-button-mask {
+      display: inline-block;
+    }
+
+  .color-picker-button .color-picker-button-mask {
+    position: absolute;
+    inset: 0;
+    width: var(--cp-size);
+    height: var(--cp-size);
+    border-radius: var(--cp-radius);
+    background: grey;
+    padding: 0;
+    opacity: 0.5;
+    display: none;
+  }
+
+  .color-picker-button .universe-icon {
+    position: absolute;
+    width: var(--cp-size);
+    height: var(--cp-size);
+    display: inline-block;
+
+    border-radius: var(--cp-radius);
+    padding: 4px;
+
+    font-style: normal;
+    font-size: 10px;
+    line-height: 14px;
+    text-align: center;
+    text-rendering: optimizeLegibility;
+    text-transform: none;
+  }
+
+  .color-picker-button .universe-icon svg {
+      transform: translate(0, -1px);
+    }
+
+.color-picker-panel .ant-collapse-header {
+    display: none !important;
+  }
+
+.content-editable-clear {
+  border: none;
+  box-shadow: none;
+  outline: unset;
+}
+.link-editor-input {
+  flex: 1;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+  cursor: pointer;
+}
+.link-editor-form-item .item-label {
+  margin-bottom: 8px;
+}
+
+.option-editor {
+  --oe-radius: 6px;
+  --oe-icon-size: 24px;
+
+  border-radius: var(--oe-radius);
+}
+
+  .option-editor .option-editor-title button {
+      color: var(--ant-color-primary) !important;
+    }
+
+  .option-editor .option-editor-title button:hover {
+        background: var(--ant-color-primary-bg-hover) !important;
+      }
+
+  .option-editor .option-item {
+    width: 100%;
+    height: 40px;
+  }
+
+  .option-editor .option-item .drag-point {
+      height: var(--oe-icon-size);
+      cursor: grab;
+      color: var(--ant-color-icon);
+    }
+
+  .option-editor .option-item .delete-button {
+      width: var(--oe-icon-size);
+      height: var(--oe-icon-size);
+      margin-right: 4px;
+    }
+
+  .option-editor .option-item .ant-btn-icon {
+      width: var(--oe-icon-size);
+      height: var(--oe-icon-size);
+    }
+
+  .option-editor .option-item .delete-icon {
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--ant-color-icon);
+    }
+
+.option-editor-list::-webkit-scrollbar {
+    width: 8px;
+  }
+
+.option-editor-list::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+.option-editor-list::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: rgba(147, 145, 145, 0.5);
+  }
+
+.option-editor-list::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(125, 125, 125, 0.6);
+    }
+
+.multi-select-editor-popover-root .ant-popover-inner {
+    padding: 0 !important;
+  }
+
+.tag-area .placeholder {
+    color: var(--ant-color-text-secondary);
+    font-size: 14px;
+    height: 22px;
+    line-height: 22px;
+  }
+
+.option-item-modal .ant-modal-content {
+    padding: 0 !important;
+    box-shadow: none !important; /* 比 unset 更直观 */
+  }
+
+.option-item-modal .ant-modal-mask {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+
+.select-editor-popover-content {
+  --se-radius: 6px;
+
+  min-width: 163px;
+}
+
+.select-editor-popover-content .ant-input {
+    height: 40px !important;
+    border-radius: var(--se-radius) !important;
+    /* input reset */
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+.select-editor-popover-content .icon-occupy {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+
+.select-editor-popover-content .option-item {
+    width: 100%;
+    padding: 4px 0 4px 8px;
+
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+    border-radius: var(--se-radius);
+    transition: background-color 0.2s;
+  }

package/dist/ui.d.ts

@@ -0,0 +1,274 @@
+/// <reference types="react" />
+import * as react from 'react';
+import react__default, { CSSProperties, RefObject, ChangeEvent } from 'react';
+import { ButtonProps, TagProps, ColorPickerProps, InputRef, UploadProps, UploadFile } from 'antd';
+import { RegistryKey } from '@enableai-fonts/font-icon-enableai-base';
+import { UploadChangeParam, RcFile } from 'antd/es/upload';
+import { ProFormItemProps } from '@ant-design/pro-components';
+
+type AvatarPopoverProps = {
+    id: string | null;
+    column: {
+        request?: (id: string) => Promise<any>;
+    };
+    fontSize?: number;
+};
+/** 用户加载骨架 */
+export declare const UserLoadingSkeleton: ({ fontSize }: {
+    fontSize: number;
+}) => react.JSX.Element;
+export declare const AvatarPopoverContent: FC<AvatarPopoverProps>;
+
+export interface BlinkButtonRef {
+    /**
+     * 触发闪烁
+     */
+    blink: () => void;
+}
+export interface BlinkButtonProps extends ButtonProps {
+    /** 每次闪烁的间隔(ms)，默认 300 */
+    blinkInterval?: number;
+    /** 闪烁次数（一次=变暗再变亮），默认 2 */
+    blinkTimes?: number;
+    /** 变暗时的透明度，默认 0.4 */
+    dimOpacity?: number;
+}
+export declare const BlinkButton: react__default.ForwardRefExoticComponent<BlinkButtonProps & react__default.RefAttributes<BlinkButtonRef>>;
+
+export type SelectEditorOption = {
+    label: string;
+    value: string;
+    color: string;
+};
+
+export type ColorCheckboxGroupProps = {
+    value?: SelectEditorOption[];
+    options?: SelectEditorOption[];
+    onChange?: (value: SelectEditorOption[]) => void;
+    disabled?: boolean;
+};
+export declare const ColorCheckboxGroup: FC<ColorCheckboxGroupProps>;
+
+export type ColorRadioGroupProps = {
+    value?: SelectEditorOption[];
+    options?: SelectEditorOption[];
+    onChange?: (value: SelectEditorOption[]) => void;
+    disabled?: boolean;
+};
+export declare const ColorRadioGroup: FC<ColorRadioGroupProps>;
+
+type CustomTagProps = {
+    label: react__default.ReactNode;
+    maxWidth?: number | string;
+    color?: string;
+    closable?: boolean;
+    onClose?: (value: string) => void;
+    style?: react__default.CSSProperties;
+    className?: string;
+    fontSize?: number;
+} & Omit<TagProps, 'children'>;
+export declare const CustomTag: FC<CustomTagProps>;
+
+export type FixedColorPickerProps = {
+    value: string;
+} & ColorPickerProps;
+export declare const FixedColorPicker: ({ ...args }: FixedColorPickerProps) => react.JSX.Element;
+
+export declare const getRandomColor: () => string;
+
+type IconFontProps = {
+    name: RegistryKey;
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const IconFont: ({ name, size, color, className, style }: IconFontProps) => react.JSX.Element;
+
+type LinkValue = {
+    title?: string;
+    url?: string;
+};
+export type LinkEditorProps = {
+    value?: LinkValue;
+    onChange?: (value?: LinkValue) => void;
+    disabled?: boolean;
+    styles?: React.CSSProperties;
+    popoverStyles?: React.CSSProperties;
+    placeholder?: string;
+};
+export declare const LinkEdit: FC<LinkEditorProps>;
+
+export declare function isFocused(el: HTMLElement | null): boolean;
+export declare function focusToEnd(el: HTMLElement): void;
+
+export type OptionEditorItemData = {
+    value: string;
+    color: string;
+    label: string;
+};
+export type OptionItemValue = {
+    ordinal: number;
+} & OptionEditorItemData;
+export type OptionEditorAction = 'move' | 'delete' | 'add' | 'edit-value';
+export type OptionItemDispatchEvent = {
+    type: 'move' | 'edit-value';
+    prev: OptionItemValue;
+    next: OptionItemValue;
+} | {
+    type: 'delete';
+    prev: OptionItemValue;
+    next: null;
+} | {
+    type: 'add';
+    prev: null;
+    next: OptionItemValue;
+};
+export type OptionEditorItemAction = {
+    focusInput: () => void;
+};
+
+export type OptionItemProps = {
+    value: OptionItemValue;
+    ref?: React.Ref<OptionEditorItemAction>;
+    onChange: (value: OptionItemValue) => void;
+    onRemove: (value: OptionItemValue) => void;
+    onEnterKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    dispatch?: (e: OptionItemDispatchEvent) => void;
+    style?: CSSProperties;
+    disabled?: boolean;
+};
+export declare const OptionItem: ({ ref, onRemove, dispatch, value, onChange, onEnterKeyUp, style, disabled, }: OptionItemProps) => react.JSX.Element;
+
+export type OptionEditorProps = {
+    initialValues: OptionEditorItemData[];
+    onValuesChange?: (values: OptionEditorItemData[]) => void;
+    dispatch?: (e: OptionItemDispatchEvent) => void;
+    style?: CSSProperties;
+    virtualConfig?: {
+        height?: number;
+    };
+    disabled?: boolean;
+};
+export declare const OptionEditor: ({ initialValues, onValuesChange, virtualConfig, dispatch, style, disabled, }: OptionEditorProps) => react.JSX.Element;
+
+type OptionInputProps = {
+    optionPosition: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    option: SelectEditorOption;
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    updateOptionLabel: (value: string, color?: string) => void;
+};
+export declare const OptionInput: FC<OptionInputProps>;
+
+export declare const COLOR_BG_OPTION_HOVER = "#1f232914";
+type OptionItemProp = {
+    option: SelectEditorOption;
+    multiple?: boolean;
+    onCreate?: (option: SelectEditorOption) => Promise<SelectEditorOption>;
+    onSelect?: (option: SelectEditorOption) => void;
+    onChange?: (option: SelectEditorOption[]) => void;
+    filterOptions: SelectEditorOption[];
+    fontSize?: number;
+    style?: CSSProperties;
+    editValue: SelectEditorOption[];
+    onOptionChange?: (option: SelectEditorOption) => void;
+};
+export declare const SelectOptionItem: ({ editValue, option, multiple, onCreate, onChange, filterOptions, onOptionChange, onSelect, fontSize, style, }: OptionItemProp) => react.JSX.Element;
+
+export declare const BORDER_SECONDARY_COLOR = "#f0f0f0";
+type PopoverContentProps = {
+    editValue: SelectEditorOption[];
+    popoverRef: RefObject<HTMLDivElement | null>;
+    inputRef: RefObject<InputRef | null>;
+    open: boolean;
+    width: number | string;
+    filteredOptions: SelectEditorOption[];
+    searchText: string;
+    handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+    listHeight: number;
+    itemHeight: number;
+    emptyText: string;
+    multiple: boolean;
+    onChange?: (option: SelectEditorOption[]) => void;
+    onSelect: (option: SelectEditorOption) => void;
+    onCreate: (option: SelectEditorOption) => Promise<SelectEditorOption>;
+    fontSize?: number;
+    onOptionChange?: (option: SelectEditorOption) => void;
+};
+export declare const PopoverContent: FC<PopoverContentProps>;
+
+export type SelectProps = {
+    width?: number;
+    fontSize?: number;
+    listHeight?: number;
+    itemHeight?: number;
+    multiple?: boolean;
+    emptyText?: string;
+    options?: SelectEditorOption[];
+    value?: SelectEditorOption[];
+    placeholder?: string;
+    onChange?: (value: SelectEditorOption[]) => void;
+    onDeselect?: (option: SelectEditorOption) => void;
+    onSelect?: (option: SelectEditorOption) => void;
+    onOptionChange?: (option: SelectEditorOption) => void;
+    onOptionCreate?: (option: SelectEditorOption) => Promise<SelectEditorOption>;
+    tagAreaHeight?: number;
+    tagAreaWidth?: number;
+    tagAreaStyle?: React.CSSProperties;
+    showDownIcon?: boolean;
+};
+export declare const Select: FC<SelectProps>;
+
+export type UploadFunction = <File extends {
+    file: any;
+    type: string;
+}>(file: File, path: string, onProgress?: (event: {
+    percent: number;
+    loaded: number;
+    total: number;
+    bps: number;
+}) => void) => Promise<any>;
+
+export type FileInfo = {
+    name: string;
+    path: string;
+};
+export type UploadListProps = {
+    previewTitle?: string;
+    onlyOne?: boolean;
+    maxCount?: number;
+    value?: FileInfo[];
+    onChange?: (value: FileInfo[]) => void;
+    onPreview?: (value: FileInfo) => void;
+    uploadFunction: UploadFunction;
+    itemProps?: ProFormItemProps;
+    uploadProps?: UploadProps;
+    accept?: string;
+    disabled?: boolean;
+};
+
+type UploadListInnerProps = {
+    uploadProps?: UploadProps;
+    maxCount?: number;
+    fileList?: UploadFile<any>[];
+    onChange?: (info: UploadChangeParam<UploadFile<any>>) => void;
+    onPreview?: (fileInfo: FileInfo) => void;
+    accept?: string | undefined;
+    onRemove?: (file: UploadFile<any>) => void;
+    beforeUpload?: (file: RcFile) => boolean;
+    uploadFunction: UploadFunction;
+    disabled?: boolean;
+};
+export declare const UploadListInner: FC<UploadListInnerProps>;
+
+export declare const computeSHA256: (file: File) => Promise<string>;
+
+export declare const UploadList: FC<UploadListProps>;
+
+