neko-ui 1.7.2 → 2.0.0-bate.0

package/README.md

@@ -1,6 +1,6 @@
 # Neko UI
 
-!> UI组件库
+> UI组件库
 
 [![version][version-tag]][npm-url]
 [![install size][size-tag]][size-url]
@@ -17,7 +17,7 @@
 [size-url]: https://packagephobia.com/result?p=neko-ui@latest
 [download-tag]: https://img.shields.io/npm/dm/neko-ui.svg?logo=docusign
 
-!> logo轮廓其实是双马尾
+> 这是一个适用于任何技术栈的 WebComponents 组件库
 
 ## 安装依赖
 
@@ -45,7 +45,7 @@ yarn build
 
 ## 打包项目`使用自定义配置`
 
-!> 在打包其它有特殊配置的bundle时, 可以通过命令行参数来加载额外的配置文件;
+> 在打包其它有特殊配置的bundle时, 可以通过命令行参数来加载额外的配置文件;
 
 例如: 使用 **config/index.ts** 与 **config/prod.ts** 合并后的配置进行编译.
 

package/lib/avatar/index.d.ts

@@ -1,11 +1,32 @@
-import React from 'react';
 import type { ComponentSize } from '../index';
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-    src?: React.ReactNode;
+export interface AvatarProps {
+    src?: string;
     alt?: string;
     size?: number | ComponentSize;
     username?: string;
     color?: string;
+    class?: string;
+    css?: string;
+}
+declare function Avatar(_props: AvatarProps): import("solid-js").JSX.Element;
+export interface AvatarElement extends AvatarProps {
+    ref?: AvatarElement | {
+        current: AvatarElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-avatar': AvatarElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
 }
-declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/lib/avatar-group/index.d.ts

@@ -1,10 +1,30 @@
-import React from 'react';
-import { type AvatarProps } from '../avatar';
+import '../popover';
+import type { AvatarProps } from '../avatar';
 export interface AvatarGroupProps {
     data: Omit<AvatarProps, 'size'>[];
     size?: AvatarProps['size'];
-    className?: string;
+    class?: string;
     maxCount?: number;
 }
-declare const AvatarGroup: React.FC<AvatarGroupProps>;
+declare function AvatarGroup(_props: AvatarGroupProps): import("solid-js").JSX.Element;
+export interface AvatarGroupElement extends AvatarGroupProps {
+    ref?: AvatarGroupElement | {
+        current: AvatarGroupElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-avatar-group': AvatarGroupElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
 export default AvatarGroup;

package/lib/back-top/index.d.ts

@@ -1,11 +1,32 @@
-import React from 'react';
-export interface BackTopProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素 */
-    target?: () => HTMLElement;
-    /** 挂载到指定的元素，值为一个返回对应 DOM 元素 默认 document.body */
-    getPopupContainer?: (node?: HTMLElement) => HTMLElement;
+export interface BackTopProps {
+    /** 设置需要监听其滚动事件的元素，值为一个selectors */
+    target?: HTMLElement;
+    /** 挂载到指定的元素，值为一个selectors 默认 body */
+    mount?: HTMLElement;
     /** 滚动高度达到此参数值才出现 BackTop */
     visibilityHeight?: number;
+    css?: string;
+    class?: string;
+}
+declare function BackTop(_props: BackTopProps): import("solid-js").JSX.Element;
+export interface BackTopElement extends BackTopProps {
+    ref?: BackTopElement | {
+        current: BackTopElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-back-top': BackTopElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
 }
-declare const BackTop: React.FC<BackTopProps>;
 export default BackTop;

package/lib/carousel/index.d.ts

@@ -1,13 +1,33 @@
-import React from 'react';
+import { type JSXElement } from 'solid-js';
 export interface CarouselProps {
-    className?: string;
-    style?: React.CSSProperties;
-    children: React.ReactNode[];
+    class?: string;
+    css?: string;
+    children?: JSXElement[];
     offset?: number;
     dots?: boolean;
     autoplay?: number;
-    header?: (offset: number) => React.ReactNode;
-    onOffsetChange?: (offset: number) => void;
+    header?: HTMLElement;
+    onChange?(e: number): void;
+}
+declare function Carousel(_props: CarouselProps): import("solid-js").JSX.Element;
+export interface CarouselElement extends CarouselProps {
+    ref?: CarouselElement | {
+        current: CarouselElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-carousel': CarouselElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
 }
-declare function Carousel(props: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export default Carousel;

package/lib/carousel/style.d.ts

@@ -1,11 +1 @@
-export declare const cls: {
-    carousel: "n-carousel";
-    item: "n-carousel-item";
-    list: "n-carousel-list";
-    prev: "n-carousel-prev";
-    next: "n-carousel-next";
-    dot: "n-carousel-dot";
-    active: "n-carousel-dot-active";
-    dots: "n-carousel-dots";
-    header: "n-carousel-header";
-};
+export declare const style: string;

package/lib/checkbox/index.d.ts

@@ -1,18 +1,39 @@
-import React from 'react';
-import { type FieldNames, type BaseOption } from '../get-options';
-export interface CheckboxOption extends BaseOption {
+import { type BaseOption, type FieldNames } from '../get-options';
+export interface CheckboxOption extends Omit<BaseOption, 'danger' | 'icon'> {
     indeterminate?: boolean;
 }
 export interface CheckboxProps {
-    className?: string;
-    style?: React.CSSProperties;
+    class?: string;
+    css?: string;
     name?: string;
     disabled?: boolean;
+    checkAll?: boolean;
     value?: string[];
     options: (CheckboxOption | string)[];
-    onChange?: (val: string[]) => void;
+    onChange: (val: string[]) => void;
     layout?: 'vertical' | 'horizontal';
     fieldNames?: Partial<FieldNames>;
 }
-declare const Checkbox: React.FC<CheckboxProps>;
+declare function Checkbox(props: CheckboxProps): import("solid-js").JSX.Element;
+export interface CheckboxElement extends Omit<CheckboxProps, 'onChange'> {
+    ref?: CheckboxElement | {
+        current: CheckboxElement | null;
+    };
+    onChange?(val: CustomEvent<any[]>): void;
+}
+interface CustomElementTags {
+    'n-checkbox': CheckboxElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
 export default Checkbox;

package/lib/code/index.d.ts

@@ -0,0 +1,35 @@
+import { type JSXElement } from 'solid-js';
+export interface CodeProps {
+    class?: string;
+    code?: string;
+    lang?: string;
+    css?: string;
+    lineNumber?: boolean;
+    children?: JSXElement;
+    edit?: boolean | 'true' | 'false';
+    toolbar?: boolean;
+    onChange?(code: string): void;
+}
+declare function Code(props: CodeProps): import("solid-js").JSX.Element;
+export interface CodeElement extends Omit<CodeProps, 'onChange'> {
+    ref?: CodeElement | {
+        current: CodeElement | null;
+    };
+    onChange?(event: CustomEvent<string>): void;
+}
+interface CustomElementTags {
+    'n-code': CodeElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
+export default Code;

package/lib/color-palette/index.d.ts

@@ -1,8 +1,43 @@
-import React from 'react';
-export interface ColorPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import '../dropdown';
+import '../input';
+import '../input-number';
+import type { CSSProperties } from '..';
+export interface ColorPaletteProps {
+    style?: CSSProperties;
+    class?: string;
+    css?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (color: string) => void;
 }
-declare const ColorPalette: React.FC<ColorPaletteProps>;
+declare function ColorPalette(props: ColorPaletteProps): import("solid-js").JSX.Element;
+export interface ColorPaletteElement extends Omit<ColorPaletteProps, 'onChange'> {
+    ref?: ColorPaletteElement | {
+        current: ColorPaletteElement | null;
+    };
+    onChange?(e: CustomEvent<string | undefined>): void;
+}
+interface CustomElementTags {
+    'n-color-palette': ColorPaletteElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
+export declare const defaultColorPaletteProps: {
+    class: undefined;
+    style: undefined;
+    css: undefined;
+    value: undefined;
+    defaultValue: undefined;
+    onChange: undefined;
+};
 export default ColorPalette;

package/lib/color-palette/style.d.ts

@@ -1,15 +1,2 @@
-export declare const cls: {
-    palette: "n-color-palette";
-    picker: "n-color-palette-picker";
-    preview: "n-color-palette-preview";
-    form: "n-color-palette-form";
-    input: "n-color-palette-input";
-    switch: "n-color-palette-switch";
-    chooser: "n-color-chooser";
-    range: "n-color-range";
-    hue: "n-color-hue";
-    opacity: "n-color-opacity";
-    color: "n-color-color";
-    slider: "n-color-slider";
-    cmykHue: "n-color-slider-cmyk-hue";
-};
+export declare const style: string;
+export declare const switchCss: string;

package/lib/color-picker/index.d.ts

@@ -1,11 +1,32 @@
-import React from 'react';
 import { type ColorPaletteProps } from '../color-palette';
-import type { ComponentSize } from '../index';
-export interface ColorPickerProps extends ColorPaletteProps {
+import type { ComponentSize, PopoverProps } from '../index';
+export interface ColorPickerProps extends ColorPaletteProps, PopoverProps {
     destroyInactive?: boolean;
     popupClassName?: string;
     size?: ComponentSize;
     defaultValue?: string;
+    popupClass?: string;
+}
+declare function ColorPicker(props: ColorPickerProps): import("solid-js").JSX.Element;
+export interface ColorPickerElement extends Omit<ColorPickerProps, 'onChange'> {
+    ref?: ColorPickerElement | {
+        current: ColorPickerElement | null;
+    };
+    onChange?(e: CustomEvent<string>): void;
+}
+interface CustomElementTags {
+    'n-color-picker': ColorPickerElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
 }
-declare const ColorPicker: React.FC<ColorPickerProps>;
 export default ColorPicker;

package/lib/color-picker/style.d.ts

@@ -1,7 +1 @@
-export declare const cls: {
-    picker: "n-color-picker";
-    trigger: "n-color-picker-trigger";
-    small: "n-color-picker-small";
-    large: "n-color-picker-large";
-    normal: "n-color-picker-normal";
-};
+export declare const style: string;

package/lib/dropdown/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { type FieldNames, type BaseOption } from '../get-options';
+import { type BaseOption, type FieldNames } from '../get-options';
 import { type PopoverProps } from '../popover';
 export interface DropdownOption extends BaseOption {
+    handleClosed?: boolean;
     options?: DropdownOption[];
 }
-export interface BaseDropdownProps extends PopoverProps {
-    options: (DropdownOption | string)[];
+export interface BaseDropdownProps extends Omit<PopoverProps, 'content'> {
+    options?: (DropdownOption | string)[];
     selectable?: boolean;
     fieldNames?: Partial<FieldNames>;
     toggle?: boolean;
@@ -13,12 +13,74 @@ export interface BaseDropdownProps extends PopoverProps {
 export interface DropdownProps extends BaseDropdownProps {
     onChange?(val: string | number, item: DropdownOption): void;
     value?: string | number;
+    defaultValue?: string | number;
     multiple?: false;
 }
 export interface DropdownMultipleProps extends BaseDropdownProps {
-    multiple: true;
+    multiple?: true;
     onChange?(val: (string | number)[], item: DropdownOption): void;
     value?: (string | number)[];
+    defaultValue?: (string | number)[];
 }
-declare const Dropdown: React.FC<DropdownProps | DropdownMultipleProps>;
+declare function Dropdown(props: DropdownProps | DropdownMultipleProps): import("solid-js").JSX.Element;
+export interface DropdownSingleElement extends Omit<DropdownProps, 'onChange' | 'onOpenChange'> {
+    ref?: DropdownSingleElement | {
+        current: DropdownSingleElement | null;
+    };
+    onChange?(e: CustomEvent<{
+        key: string | number;
+        item: DropdownOption;
+    }>): void;
+    onOpenChange?(open: CustomEvent<boolean | null>): void;
+}
+export interface DropdownMultipleElement extends Omit<DropdownMultipleProps, 'onChange' | 'onOpenChange'> {
+    ref?: DropdownMultipleElement | {
+        current: DropdownMultipleElement | null;
+    };
+    onChange?(e: CustomEvent<{
+        key: Array<string | number>;
+        item: DropdownOption;
+    }>): void;
+    onOpenChange?(open: CustomEvent<boolean | null>): void;
+}
+interface CustomElementTags {
+    'n-dropdown': DropdownSingleElement | DropdownMultipleElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
+export declare const defaultProps: {
+    selectable: undefined;
+    fieldNames: undefined;
+    toggle: undefined;
+    value: undefined;
+    defaultValue: undefined;
+    onChange: undefined;
+    multiple: undefined;
+    options: undefined;
+    class: undefined;
+    content: undefined;
+    getPopupContainer: undefined;
+    trigger: undefined;
+    open: undefined;
+    onOpenChange: undefined;
+    popupClass: undefined;
+    popupCss: undefined;
+    destroyInactive: boolean;
+    disabled: undefined;
+    arrow: undefined;
+    placement: undefined;
+    css: undefined;
+    dropdownMatchSelectWidth: undefined;
+    useShadow: boolean;
+};
 export default Dropdown;

package/lib/dropdown/style.d.ts

@@ -1,10 +1 @@
-export declare const cls: {
-    dropdown: "n-dropdown";
-    portal: "n-dropdown-portal";
-    item: "n-dropdown-item";
-    group: "n-dropdown-group";
-    danger: "n-dropdown-danger";
-    active: "n-dropdown-active";
-    icon: "n-dropdown-icon";
-    selectable: "n-dropdown-selectable";
-};
+export declare const style: string;

package/lib/empty/index.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from '..';
+export interface EmptyProps {
+    class?: string;
+    css?: string;
+    style?: CSSProperties;
+}
+declare function Empty(props: EmptyProps): import("solid-js").JSX.Element;
+export interface EmptyElement extends EmptyProps {
+    ref?: EmptyElement | {
+        current: EmptyElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-empty': EmptyElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
+export default Empty;

package/lib/get-options/index.d.ts

@@ -1,12 +1,14 @@
-/// <reference types="react" />
+import { type JSXElement } from 'solid-js';
+import { ComponentStatus } from '..';
 export type BaseOption = {
-    icon?: React.ReactNode;
+    icon?: JSXElement;
     value?: string;
-    label?: React.ReactNode;
+    label?: JSXElement;
     disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
+    class?: string;
+    style?: unknown;
     danger?: boolean;
+    status?: ComponentStatus;
     options?: BaseOption[];
     [key: string]: any;
 };
@@ -20,5 +22,5 @@ export declare const defaultFieldNames: {
     value: string;
     options: string;
 };
-declare function getOptions<T extends BaseOption = BaseOption>(list: (T | string)[], fieldNames?: Partial<FieldNames>): BaseOption[];
+declare function getOptions<T extends BaseOption = BaseOption>(list?: (T | string)[], fieldNames?: Partial<FieldNames>): BaseOption[];
 export default getOptions;

package/lib/highlight/index.d.ts

@@ -1,9 +0,0 @@
-import '../prism';
-import '../prism/prism.css';
-/** 根据指定语言高亮代码片段
- * @param {string} code - 待高亮的代码
- * @param {string} lang - 代码语言
- * @returns {string} 高亮后的代码字符串
- */
-declare function highlight(code: string, lang: string): string;
-export default highlight;

package/lib/highlight-text/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * 高亮字符串语法
  * @example
@@ -12,12 +11,8 @@ export type HighlightTextJson = {
     text: string;
 }[] | null;
 export interface HighlightTextProps {
-    className?: string;
-    style?: React.CSSProperties;
-    /** 命中高亮部分的样式 */
-    hitStyle?: React.CSSProperties;
-    /** 命中高亮部分的类名 */
-    hitClassName?: string;
+    class?: string;
+    css?: string;
     /** 内容 */
     text?: string;
     /** 需要高亮的内容 */
@@ -42,5 +37,25 @@ export type Highlight = {
  * @returns {HighlightTextJson} 高亮字符的Json
  */
 export declare function strToHighlight(text: string): Highlight[] | null;
-declare const HighlightText: React.FC<HighlightTextProps>;
+declare const HighlightText: (props: HighlightTextProps) => import("solid-js").JSX.Element;
+export interface HighlightTextElement extends HighlightTextProps {
+    ref?: HighlightTextElement | {
+        current: HighlightTextElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-highlight-text': HighlightTextElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
 export default HighlightText;

package/lib/img/index.d.ts

@@ -0,0 +1,30 @@
+export interface ImgProps {
+    src?: string;
+    alt?: string;
+    open?: boolean | null;
+    onOpenChange?(open: boolean | null): void;
+    maskClosable?: boolean;
+    escClosable?: boolean;
+}
+declare function Img(props: ImgProps): import("solid-js").JSX.Element;
+export interface ImgElement extends ImgProps {
+    ref?: ImgElement | {
+        current: ImgElement | null;
+    };
+}
+interface CustomElementTags {
+    'n-img': ImgElement;
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
+        }
+    }
+}
+declare global {
+    export namespace JSX {
+        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
+        }
+    }
+}
+export default Img;

package/lib/img/style.d.ts

@@ -0,0 +1,2 @@
+export declare const imgCss: string;
+export declare const style: string;