neko-ui 2.0.0-beta.9 → 2.0.1

package/README.md

@@ -1,15 +1,17 @@
 # Neko UI
 
-> UI组件库
-
 [![version][version-tag]][npm-url]
 [![install size][size-tag]][size-url]
 [![download][download-tag]][npm-url]
 
-## 使用
+> 这是一个适用于任何技术栈的 WebComponents UI组件库
 
 [![neko-ui][install-tag]][npm-url]
 
+[![docs-ui][docs-tag]][docs-url]
+
+[docs-url]: https://monako97.github.io/neko-ui
+[docs-tag]: https://cdn.staticaly.com/gh/monako97/cdn/main/image/202307281701250.svg
 [npm-url]: https://npmjs.org/package/neko-ui
 [install-tag]: https://nodei.co/npm/neko-ui.png
 [version-tag]: https://img.shields.io/npm/v/neko-ui/latest.svg?logo=npm
@@ -17,40 +19,28 @@
 [size-url]: https://packagephobia.com/result?p=neko-ui@latest
 [download-tag]: https://img.shields.io/npm/dm/neko-ui.svg?logo=docusign
 
-> 这是一个适用于任何技术栈的 WebComponents 组件库
-
-## 安装依赖
+## 安装 (npm)
 
 ```shell
-npm install
+npm install neko-ui -S
 # or
-yarn install
+yarn add neko-ui -S
 ```
 
-## 启动项目
+### 使用 (npm)
 
-```shell
-npm start
-# or
-yarn start
+```html
+<n-button>按钮</n-button>
 ```
 
-## 打包项目
+## 安装 (umd)
 
-```shell
-npm run build
-# or
-yarn build
+```html
+<script src="https://cdn.staticaly.com/gh/monako97/cdn/main/npm/neko-ui/2.0.1/lib/index.js"></script>
 ```
 
-## 打包项目`使用自定义配置`
-
-> 在打包其它有特殊配置的bundle时, 可以通过命令行参数来加载额外的配置文件;
-
-例如: 使用 **config/index.ts** 与 **config/prod.ts** 合并后的配置进行编译.
+### 使用 (umd)
 
-```shell
-npm run build --config=prod
-# or
-yarn build config=prod
+```html
+<n-button>按钮</n-button>
 ```

package/lib/avatar/group.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from 'solid-js';
+import '../popover';
+import type { BasicConfig, CustomElement } from '..';
+import type { AvatarProps } from '../avatar';
+export interface AvatarGroupProps extends Omit<JSX.ButtonHTMLAttributes<HTMLDivElement>, 'onChange' | 'ref'> {
+    /** 头像数据 */
+    data: Omit<AvatarProps, 'size'>[];
+    /** 头像尺寸
+     * @default 'normal'
+     */
+    size?: BasicConfig['size'];
+    /** 最多显示个数 */
+    maxCount?: number;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义样式表 */
+    css?: string;
+}
+export type AvatarGroupElement = CustomElement<AvatarGroupProps>;
+declare function AvatarGroup(_props: AvatarGroupProps): JSX.Element;
+export default AvatarGroup;

package/lib/avatar/index.d.ts

@@ -1,32 +1,23 @@
-import type { ComponentSize } from '../index';
-export interface AvatarProps {
+import { type JSX } from 'solid-js';
+import type { BasicConfig, CustomElement } from '../index';
+export interface AvatarProps extends Omit<JSX.ButtonHTMLAttributes<HTMLDivElement>, 'onChange' | 'ref' | 'children'> {
+    /** 头像 */
     src?: string;
+    /** 替代文本 */
     alt?: string;
-    size?: number | ComponentSize;
+    /** 尺寸
+     * @default 'normal'
+     */
+    size?: number | BasicConfig['size'];
+    /** 用户名 */
     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 {
-        }
-    }
-}
+export type AvatarElement = CustomElement<AvatarProps>;
+declare function Avatar(_: AvatarProps): JSX.Element;
 export default Avatar;

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

@@ -1,32 +1,21 @@
-export interface BackTopProps {
-    /** 设置需要监听其滚动事件的元素，值为一个selectors */
-    target?: HTMLElement;
-    /** 挂载到指定的元素，值为一个selectors 默认 body */
+import { type JSX } from 'solid-js';
+import type { CustomElement } from '..';
+export interface BackTopProps extends Omit<JSX.ButtonHTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** 设置需要监听其滚动事件的元素
+     * @default window
+     */
+    target?: HTMLElement | (() => HTMLElement);
+    /** 挂载到指定的元素
+     * @default body
+     */
     mount?: HTMLElement;
     /** 滚动高度达到此参数值才出现 BackTop */
     visibilityHeight?: number;
-    css?: string;
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
+    css?: 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 function BackTop(_: BackTopProps): JSX.Element;
+export type BackTopElement = CustomElement<BackTopProps>;
 export default BackTop;

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

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

package/lib/basic-config/index.d.ts

@@ -0,0 +1,90 @@
+import type { JSXElement } from 'solid-js';
+import type { ICustomElement } from 'component-register';
+export interface BasicConfig {
+    /** 组件状态
+     * @default 'normal'
+     */
+    status: keyof typeof Status;
+    /** 组件尺寸
+     * @default 'normal'
+     */
+    size: keyof typeof Size;
+    /** 自定义 'label'、'value'、'options' 等映射的key */
+    fieldName: Partial<{
+        [key in keyof typeof FieldName]: string;
+    }>;
+}
+export declare enum Size {
+    /** 小 */
+    small = "small",
+    /** 默认: 中 */
+    normal = "normal",
+    /** 大 */
+    large = "large"
+}
+export declare enum Status {
+    /** 默认 */
+    normal = "normal",
+    /** 成功 */
+    success = "success",
+    /** 警告 */
+    warning = "warning",
+    /** 错误 */
+    error = "error",
+    /** 详细 */
+    info = "info",
+    /** 主要 */
+    primary = "primary"
+}
+export interface BaseOption {
+    /** 图标 */
+    icon?: JSXElement;
+    /** 值 */
+    value?: string | number;
+    /** 标题 */
+    label?: JSXElement;
+    /** 不可用状态 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义样式 */
+    style?: Record<string, unknown>;
+    /** 选项状态
+     * @default 'normal'
+     */
+    status?: Status;
+    /** 分组子选项 */
+    options?: (BaseOption | string)[];
+    [key: string]: any;
+}
+export declare enum FieldName {
+    /** 标题 */
+    label = "label",
+    /** 值 */
+    value = "value",
+    /** 分组子选项 */
+    options = "options",
+    /** 子选项 */
+    children = "children",
+    /** 图标 */
+    icon = "icon",
+    /** 后缀图标 */
+    suffix = "suffix"
+}
+type IEvent<T> = (e: CustomEvent<T>) => void;
+type ICustomEvent<T, K extends keyof T> = T extends {
+    [key in K]?: (v: infer V) => void;
+} ? IEvent<V> : T extends {
+    [key in K]?: (...args: infer Args) => void;
+} ? IEvent<Args> : never;
+type IOmit<T, Keys extends keyof T> = Omit<T, Keys> & {
+    [K in Keys]?: ICustomEvent<T, K>;
+};
+export type CustomElement<T extends Partial<ICustomElement> = ICustomElement> = IOmit<T, 'onChange' | 'onOpenChange' | 'onErrorRecorder' | 'onStopRecorder' | 'onStartRecorder' | 'onRecorderDataAvailable' | 'onErrorCapture' | 'onStopCapture' | 'onStartCapture' | 'onSaveRecorder'> & {
+    ref?: CustomElement<T> | {
+        current: CustomElement<T> | null;
+    };
+    shadowRoot?: ShadowRoot | Element | null;
+    offsetWidth?: number;
+};
+export {};

package/lib/button/index.d.ts

@@ -1,9 +1,12 @@
-import { type JSXElement } from 'solid-js';
-import { type ComponentSize } from '../index';
-export type ButtonType = 'success' | 'error' | 'primary' | 'warning' | 'default';
-export interface ButtonProps extends Partial<Omit<HTMLButtonElement, 'type' | 'children'>> {
+import { type JSX } from 'solid-js';
+import type { BasicConfig, CustomElement } from '../index';
+export interface ButtonProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'ref'> {
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义样式表 */
+    css?: string;
     /** 按钮类型 */
-    type?: ButtonType;
+    type?: 'success' | 'error' | 'primary' | 'warning' | 'default';
     /** 透明背景 */
     ghost?: boolean;
     /** 实色背景 */
@@ -22,31 +25,15 @@ export interface ButtonProps extends Partial<Omit<HTMLButtonElement, 'type' | 'c
     link?: boolean;
     /** 危险按钮 */
     danger?: boolean;
-    size?: ComponentSize;
-    onClick?: HTMLButtonElement['onclick'];
-    class?: string;
-    css?: string;
-    children?: JSXElement;
-}
-declare function Button(_: ButtonProps): import("solid-js").JSX.Element;
-export interface ButtonElement extends ButtonProps {
-    ref?: ButtonElement | {
-        current: ButtonElement | null;
-    };
-}
-interface CustomElementTags {
-    'n-button': ButtonElement;
-}
-declare module 'solid-js' {
-    namespace JSX {
-        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
-        }
-    }
-}
-declare global {
-    export namespace JSX {
-        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
-        }
-    }
+    /** 按钮尺寸
+     * @default 'normal'
+     */
+    size?: BasicConfig['size'];
+    /** 按钮前面添加一个图标 */
+    icon?: (() => JSX.Element) | JSX.Element;
+    /** 按键抬起 */
+    onKeyUp?(e: KeyboardEvent): void;
 }
+export type ButtonElement = CustomElement<ButtonProps>;
+declare function Button(_: ButtonProps): JSX.Element;
 export default Button;

package/lib/capture-screen/index.d.ts

@@ -1,9 +1,15 @@
+import { type JSX } from 'solid-js';
+import type { CustomElement } from '../index';
 declare interface MediaRecorderDataAvailableEvent extends Event {
+    /** MediaRecorderDataAvailableEvent */
     data: any;
 }
-export interface CaptureScreenProps {
+export interface CaptureScreenProps extends JSX.ButtonHTMLAttributes<HTMLDivElement> {
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
     css?: string;
+    /** MediaStreamConstraints */
     options?: MediaStreamConstraints;
     /** 是否预览 */
     preview?: boolean;
@@ -26,7 +32,7 @@ export interface CaptureScreenProps {
     /** 录制中按钮文字 */
     recorderingText?: string;
     /** 录制错误回调方法 */
-    onErrorRecorder?: MediaRecorder['onerror'];
+    onErrorRecorder?: (e: Event) => void;
     /** 停止录制回调方法 */
     onStopRecorder?: () => void;
     /** 开始录制回调方法 */
@@ -34,7 +40,7 @@ export interface CaptureScreenProps {
     /** 记录媒体时触发 */
     onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;
     /** 捕获屏幕错误回调方法 */
-    onErrorCapture?: (err: any) => void;
+    onErrorCapture?: (err: unknown) => void;
     /** 停止捕获屏幕回调方法 */
     onStopCapture?: () => void;
     /** 开始捕获屏幕回调方法 */
@@ -42,25 +48,6 @@ export interface CaptureScreenProps {
     /** 自定义保存录制文件方法 */
     onSaveRecorder?: (blob: Blob, fileName: string) => void;
 }
-declare function CaptureScreen(_: CaptureScreenProps): import("solid-js").JSX.Element;
-export interface CaptureScreenElement extends CaptureScreenProps {
-    ref?: CaptureScreenElement | {
-        current: CaptureScreenElement | null;
-    };
-}
-interface CustomElementTags {
-    'n-capture-screen': CaptureScreenElement;
-}
-declare module 'solid-js' {
-    namespace JSX {
-        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
-        }
-    }
-}
-declare global {
-    export namespace JSX {
-        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
-        }
-    }
-}
+export type CaptureScreenElement = CustomElement<CaptureScreenProps>;
+declare function CaptureScreen(_: CaptureScreenProps): JSX.Element;
 export default CaptureScreen;

package/lib/carousel/index.d.ts

@@ -1,33 +1,25 @@
 import { type JSXElement } from 'solid-js';
+import type { CustomElement } from '../index';
 export interface CarouselProps {
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
     css?: string;
+    /** 轮播的内容 */
     children?: JSXElement[];
+    /** 当前内容的位置
+     * @default 0
+     */
     offset?: number;
+    /** 开启指示器 */
     dots?: boolean;
+    /** 设置自动播放时长, 不设置时不自动播放 */
     autoplay?: number;
-    header?: HTMLElement;
-    onChange?(e: number): void;
+    /** 自定义头部 */
+    header?: (current: number) => JSXElement | ((current: number) => JSXElement);
+    /** 切换显示的位置时的回调方法 */
+    onChange?: (e: number) => void;
 }
+export type CarouselElement = CustomElement<CarouselProps>;
 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 {
-        }
-    }
-}
 export default Carousel;

package/lib/checkbox/index.d.ts

@@ -1,39 +1,60 @@
-import { type BaseOption, type FieldNames } from '../get-options';
-export interface CheckboxOption extends Omit<BaseOption, 'danger' | 'icon'> {
-    indeterminate?: boolean;
-}
-export interface CheckboxProps {
+import { type BaseOption, type BasicConfig, type CustomElement } from '../basic-config';
+/** 通用API
+ * @since 1.0.0
+ */
+export interface CheckboxBaseProps {
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
     css?: string;
+    /** input[type="checkbox"] 的 name 属性 */
     name?: string;
+    /** 只读 */
     disabled?: boolean;
-    checkAll?: boolean;
-    value?: string[];
-    options: (CheckboxOption | string)[];
-    onChange: (val: string[]) => void;
+    /** 选项排列方式
+     * @default 'horizontal'
+     */
     layout?: 'vertical' | 'horizontal';
-    fieldNames?: Partial<FieldNames>;
+    /** 自定义节点 'label'、'value'、'options' 的字段 */
+    fieldNames?: BasicConfig['fieldName'];
 }
-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;
+/** 复选框API */
+export interface CheckboxBoolProps extends CheckboxBaseProps {
+    /** 一个 bool 值; */
+    value?: boolean;
+    /** 默认值 */
+    defaultValue?: boolean;
+    /** 值修改时的回调方法 */
+    onChange?: (val: boolean) => void;
+    checkAll?: never;
+    options?: never;
 }
-interface CustomElementTags {
-    'n-checkbox': CheckboxElement;
-}
-declare module 'solid-js' {
-    namespace JSX {
-        interface IntrinsicElements extends HTMLElementTags, CustomElementTags {
-        }
-    }
+/** 通过数据渲染一组复选框按钮的API */
+export interface CheckboxGroupProps extends CheckboxBaseProps {
+    /** 全选 */
+    checkAll?: boolean;
+    /** 值;
+     * 当设置了value时, 将是受控模式;
+     * 受控模式可通过 onChange 事件更新 value
+     **/
+    value?: (string | number)[];
+    /** 默认值 */
+    defaultValue?: (string | number)[];
+    /** 渲染选项所使用的数据,
+     * 当没有设置该值时, 将渲染一个切换 bool 值的按钮
+     * */
+    options?: (CheckboxOption | string)[];
+    /** 值修改时的回调方法 */
+    onChange?: (val: (string | number)[]) => void;
 }
-declare global {
-    export namespace JSX {
-        interface IntrinsicElements extends CustomElementTags, CustomElementTags {
-        }
-    }
+/** 复选框选项
+ * @since 1.0.0
+ */
+export interface CheckboxOption extends BaseOption {
+    /** 不确定状态 */
+    indeterminate?: boolean;
 }
+declare function Checkbox(props: CheckboxBoolProps | CheckboxGroupProps): import("solid-js").JSX.Element;
+export type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;
+export type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;
 export default Checkbox;

package/lib/checkbox/style.d.ts

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

package/lib/code/index.d.ts

@@ -1,35 +1,23 @@
-import { type JSXElement } from 'solid-js';
-export interface CodeProps {
+import { type JSX } from 'solid-js';
+import type { CustomElement } from '..';
+export interface CodeProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
+    css?: string;
+    /** 内容 */
     code?: string;
+    /** 语言 */
     lang?: string;
-    css?: string;
+    /** 显示代码行号 */
     lineNumber?: boolean;
-    children?: JSXElement;
-    edit?: boolean | 'true' | 'false';
+    /** 支持编辑 */
+    edit?: boolean;
+    /** 开启代码块工具条 */
     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 {
-        }
-    }
+    /** 编辑修改时的回调 */
+    onChange?: (code: string) => void;
 }
+export type CodeElement = CustomElement<CodeProps>;
+declare function Code(props: CodeProps): JSX.Element;
 export default Code;

package/lib/code/style.d.ts

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

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

@@ -1,37 +1,24 @@
+import { type JSX } from 'solid-js';
 import '../dropdown';
-import { type CSSProperties } from '../index';
 import '../input';
 import '../input-number';
-export interface ColorPaletteProps {
-    style?: CSSProperties;
+import type { CustomElement } from '../index';
+export interface ColorPaletteProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** 自定义类名 */
     class?: string;
+    /** 自定义样式表 */
     css?: string;
+    /** 颜色值 */
     value?: string;
+    /** 默认值
+     * @default '#5794ff'
+     */
     defaultValue?: string;
+    /** 变更时触发的方法 */
     onChange?: (color: string) => void;
 }
-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 type ColorPaletteElement = CustomElement<ColorPaletteProps>;
+declare function ColorPalette(_: ColorPaletteProps): JSX.Element;
 export declare const defaultColorPaletteProps: {
     class: undefined;
     style: undefined;