x-next 0.0.0-alpha.1 → 0.0.0-alpha.10

package/README.md

@@ -1,4 +1,26 @@
-# x-next
-xiaocaiyun.com 前端组件库。
+# 简介
 
+X-Next是Ringing Tech的基础UI库。
 
+# 安装
+
+### 运行
+
+```
+pnpm i x-next
+```
+
+### 引入
+
+```
+// main.ts
+import { createApp } from 'vue'
+import XNext from 'x-next'
+import "x-next/dist/style.css"; //引入组件样式
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(XNext)
+app.mount('#app')
+```

package/dist/_hooks/use-overflow.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+export declare const useOverflow: (containerRef: Ref<HTMLElement | undefined>, targetRef?: Ref<HTMLElement | undefined>) => {
+    setOverflowHidden: () => void;
+    resetOverflow: () => void;
+};

package/dist/_hooks/use-popup-manager.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export type PopupType = 'popup' | 'dialog' | 'message';
+export default function usePopupManager(type: PopupType, { visible, runOnMounted, }?: {
+    visible?: Ref<boolean>;
+    runOnMounted?: boolean;
+}): {
+    zIndex: Readonly<Ref<number, number>>;
+    open: () => void;
+    close: () => void;
+    isLastDialog: () => boolean;
+};

package/dist/_props/css.d.ts

@@ -0,0 +1,13 @@
+type NamedColor = 'aliceblue' | 'antiquewhite' | 'aqua' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'black' | 'blanchedalmond' | 'blue' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'fuchsia' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'gray' | 'green' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'lime' | 'limegreen' | 'linen' | 'magenta' | 'maroon' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'navy' | 'oldlace' | 'olive' | 'olivedrab' | 'orange' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'purple' | 'red' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'silver' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'teal' | 'thistle' | 'tomato' | 'turquoise' | 'violet' | 'wheat' | 'white' | 'whitesmoke' | 'yellow' | 'yellowgreen';
+type HexColor = `#${string}`;
+type RgbColor = `rgb(${number}, ${number}, ${number})`;
+type RgbaColor = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HslColor = `hsl(${number}, ${number}%, ${number}%)`;
+type HslaColor = `hsla(${number}, ${number}%, ${number}%, ${number})`;
+export type CSSColor = NamedColor | HexColor | RgbColor | RgbaColor | HslColor | HslaColor;
+type CSSUnit = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%' | 'pt' | 'cm' | 'mm' | 'in' | 'pc' | 'ex' | 'ch';
+export type LengthValue = `${number}${CSSUnit}`;
+type GlobalValues = 'auto' | 'inherit' | 'initial' | 'unset';
+type PaddingMarginValue = LengthValue | `${number}` | GlobalValues;
+export type PaddingMargin = PaddingMarginValue | [PaddingMarginValue, PaddingMarginValue] | [PaddingMarginValue, PaddingMarginValue, PaddingMarginValue] | [PaddingMarginValue, PaddingMarginValue, PaddingMarginValue, PaddingMarginValue];
+export {};

package/dist/_props/global.d.ts

@@ -0,0 +1 @@
+export type ComponentSize = 'mini' | 'small' | 'medium' | 'large';

package/dist/_utils/config.d.ts

@@ -0,0 +1,9 @@
+export declare const COMPONENT_INSTALLED_KEY: unique symbol;
+export declare const getClassPrefix: (name?: string) => string;
+export declare const getComponentPrefix: (name: string) => string;
+export declare const getClassNameMixin: (name: string) => {
+    block: string;
+    element: (className: string) => string;
+    modifier: (className: string) => string;
+    is: (className: string) => string;
+};

package/dist/_utils/convert-case.d.ts

@@ -0,0 +1,3 @@
+export declare const toKebabCase: (string: string) => string;
+export declare const toPascalCase: (string: string) => string;
+export declare const toCamelCase: (string: string) => string;

package/dist/_utils/dom.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'vue';
+export declare const NOOP: () => void;
+export declare const querySelector: (selectors: string, container?: Document | HTMLElement) => HTMLElement | undefined;
+export declare const getScrollBarWidth: (element: HTMLElement) => number;
+export declare const isScroll: (element: HTMLElement) => boolean;
+export declare const getStyle: (element: HTMLElement, styleName: keyof CSSProperties) => string;
+export declare const setStyle: (element: HTMLElement, styleName: CSSProperties | keyof CSSProperties, value?: string | number) => void;
+export declare const getElement: (target: string | HTMLElement | undefined, container?: Document | HTMLElement) => HTMLElement | undefined;
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | Window, event: K, handler: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
+export declare const off: <K extends keyof HTMLElementEventMap>(element: HTMLElement | Window, type: K, handler: (ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void;

package/dist/_utils/helpers.d.ts

@@ -0,0 +1,12 @@
+export declare const getProp: (target: any, path: any, defVal?: any) => any;
+export declare const setProp: (target: any, path: any, value: any) => any;
+export declare const deepClone: (obj: any, set?: any) => any;
+export declare const NOOP: () => void;
+export declare const addUnit: (value: string | number | undefined, unit?: string) => string;
+export declare const upperFirstChar: (text: string) => string | undefined;
+export declare const compose: <T>(...fns: ((...v: T[]) => T)[]) => (...v: T[]) => T;
+export declare const pipe: <T>(...fns: ((...v: T[]) => T)[]) => (...v: T[]) => T;
+export declare const findLastIndex: (arr: never[] | undefined, callback: (item: any, i: number, origin: any[]) => boolean) => number;
+export declare const getUniqueId: (size?: number) => string;
+export declare const genMatrix: (list: any[], row: number) => any[];
+export declare const sleep: (delay?: number) => Promise<unknown>;

package/dist/_utils/icon.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 首字母大写及-符号仅跟的字母大写
+ * @param str
+ */
+export declare const toPascalCase: (str: string) => string;
+export declare function createIconComponent(name: string): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    rotate: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fillColor: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
+}>, {
+    cls: import('vue').ComputedRef<(string | {
+        "x-icon-loading": boolean;
+    })[]>;
+    styles: import('vue').ComputedRef<import('vue').CSSProperties>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    rotate: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fillColor: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: string | number;
+    rotate: number;
+    spin: boolean;
+    color: string;
+    fillColor: unknown[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/{framework/es/util.d.ts → dist/_utils/is.d.ts}

@@ -1,36 +1,22 @@
-export declare function isArray(obj: any): obj is any[];
-export declare function isNull(obj: any): obj is null;
-export declare function isBoolean(obj: unknown): obj is boolean;
-export declare function isObject(obj: any): obj is Record<string, unknown>;
-export declare const isPromise: <T>(obj: unknown) => obj is Promise<T>;
-export declare function isString(obj: any): obj is string;
-export declare function isNumber(obj: any): obj is number;
-export declare function isRegExp(obj: any): boolean;
-export declare function isDate(obj: any): boolean;
-export declare function isColor(color: any): boolean;
-export declare function isUndefined(obj: any): obj is undefined;
-export declare function isFunction(obj: any): obj is (...args: any[]) => any;
-export declare function isClass(value: unknown): boolean;
-export declare function isEmptyObject(obj: any): boolean;
-export declare function isEmpty(obj: any): boolean;
-export declare function isExist(obj: any): boolean;
-export declare function isWindow(el: any): el is Window;
-/**
- * 控制台消息打印
- * @param name
- * @param message
- * @param color
- * @param bgColor
- */
-export declare function consoleLog(name: string, message: string, color: string, bgColor: string): void;
-/**
- * 当前时间
- * @description 用于控制台打印使用
- */
-export declare function now(): string;
-/**
- * jsonStringify2Parse
- * @param value
- * @description 将JSON字符串转换为JSON对象
- */
-export declare function jsonStringify2Parse(value: unknown): any;
+import { ComponentPublicInstance, VNodeNormalizedChildren, VNode } from 'vue';
+import { Dayjs } from 'dayjs';
+export declare function isArray(obj: any): obj is any[];
+export declare function isNull(obj: any): obj is null;
+export declare function isBoolean(obj: unknown): obj is boolean;
+export declare function isObject<T>(obj: T): obj is Extract<T, Record<string, any>>;
+export declare const isPromise: <T>(obj: unknown) => obj is Promise<T>;
+export declare function isString(obj: any): obj is string;
+export declare function isNumber(obj: any): obj is number;
+export declare function isRegExp(obj: any): boolean;
+export declare function isDate(obj: any): boolean;
+export declare function isColor(color: any): boolean;
+export declare function isUndefined(obj: any): obj is undefined;
+export declare function isFunction(obj: any): obj is (...args: any[]) => any;
+export declare function isEmptyObject(obj: any): boolean;
+export declare function isExist(obj: any): boolean;
+export declare function isWindow(el: any): el is Window;
+export declare const isComponentInstance: (value: any) => value is ComponentPublicInstance;
+export declare const isArrayChildren: (children: VNodeNormalizedChildren) => children is VNode[];
+export declare const isQuarter: (fromat: string) => boolean;
+export declare function isDayjs(time: any): time is Dayjs;
+export declare function isClient(): boolean;

package/dist/_utils/keyboard.d.ts

@@ -0,0 +1,24 @@
+export declare const KEYBOARD_KEY: {
+    ENTER: string;
+    ESC: string;
+    BACKSPACE: string;
+    TAB: string;
+    SPACE: string;
+    ARROW_UP: string;
+    ARROW_DOWN: string;
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+};
+export interface CodeKey {
+    /** Keyboard key */
+    key: string;
+    /** Ctrl / ⌃ */
+    ctrl?: boolean;
+    /** Shift key */
+    shift?: boolean;
+    /** Alt / ⌥ */
+    alt?: boolean;
+    /** meta ⌘ / ⊞ */
+    meta?: boolean;
+}
+export declare const getKeyDownHandler: (codeKeyMap: Map<CodeKey | string, (e: Event) => void>) => (event: KeyboardEvent) => void;

package/dist/_utils/vue-eco.d.ts

@@ -0,0 +1,28 @@
+import { VNodeTypes, VNode, PropType, Component, Slots, Plugin } from 'vue';
+export type SFCWithInstall<T> = T & Plugin;
+/**
+ * @description Vue生态操作封装
+ */
+export declare const definePropType: <T>(val: unknown) => PropType<T>;
+export declare enum ShapeFlags {
+    ELEMENT = 1,
+    FUNCTIONAL_COMPONENT = 2,
+    STATEFUL_COMPONENT = 4,
+    COMPONENT = 6,
+    TEXT_CHILDREN = 8,
+    ARRAY_CHILDREN = 16,
+    SLOTS_CHILDREN = 32,
+    TELEPORT = 64,
+    SUSPENSE = 128,
+    COMPONENT_SHOULD_KEEP_ALIVE = 256,
+    COMPONENT_KEPT_ALIVE = 512
+}
+export declare const isElement: (vn: VNode) => boolean;
+export declare const isComponent: (vn: VNode, type?: VNodeTypes) => type is Component;
+export declare const isTextChildren: (child: VNode, children: VNode["children"]) => children is string;
+export declare const isArrayChildren: (vn: VNode, children: VNode["children"]) => children is VNode[];
+export declare const isSlotsChildren: (vn: VNode, children: VNode["children"]) => children is Slots;
+export declare const getAllElements: (children: VNode[] | undefined, includeText?: boolean) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[];
+export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;

package/dist/components.d.ts

@@ -0,0 +1 @@
+export { default as Button } from './componets/button/install';

package/dist/componets/button/index.vue.d.ts

@@ -0,0 +1,162 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    block: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingFill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shape: {
+        type: import('vue').PropType<import('./props').ButtonShape>;
+        default: undefined;
+    };
+    link: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: import('vue').PropType<import('./props').ButtonType>;
+        default: undefined;
+    };
+    status: {
+        type: import('vue').PropType<import('./props').ButtonStatus>;
+        default: undefined;
+    };
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').ButtonSize>;
+        default: string;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    cn: {
+        block: string;
+        element: (className: string) => string;
+        modifier: (className: string) => string;
+        is: (className: string) => string;
+    };
+    cls: import('vue').ComputedRef<(string | false | undefined)[]>;
+    handleClick: (event: MouseEvent) => Promise<void>;
+    isLoading: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], "click", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    block: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingFill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shape: {
+        type: import('vue').PropType<import('./props').ButtonShape>;
+        default: undefined;
+    };
+    link: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: import('vue').PropType<import('./props').ButtonType>;
+        default: undefined;
+    };
+    status: {
+        type: import('vue').PropType<import('./props').ButtonStatus>;
+        default: undefined;
+    };
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<import('./props').ButtonSize>;
+        default: string;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: import('./props').ButtonSize;
+    type: import('./props').ButtonType;
+    link: boolean;
+    disabled: boolean;
+    block: boolean;
+    loading: boolean;
+    loadingFill: boolean;
+    debounce: number;
+    shape: import('./props').ButtonShape;
+    status: import('./props').ButtonStatus;
+    plain: boolean;
+    border: boolean;
+}, {}, {
+    AnimationLoading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        size: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+    }>, {
+        cls: import('vue').ComputedRef<(string | {
+            "x-icon-loading": boolean;
+        })[]>;
+        styles: import('vue').ComputedRef<import('vue').CSSProperties>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        size: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        spin: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        fillColor: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        size: string | number;
+        rotate: number;
+        spin: boolean;
+        color: string;
+        fillColor: unknown[];
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/componets/button/install.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'vue';
+import { default as Button } from './index.vue';
+declare const _default: typeof Button & Plugin;
+export default _default;

package/dist/componets/button/props.d.ts

@@ -0,0 +1,45 @@
+export type ButtonSize = 'mini' | 'small' | 'medium' | 'large' | 'huge';
+export type ButtonStatus = 'success' | 'warning' | 'strong' | 'danger' | 'info';
+export type ButtonType = 'primary' | 'secondary' | 'dashed' | 'outline' | 'text';
+export type ButtonShape = 'round' | 'circle' | 'square';
+export declare const buttonProps: {
+    disabled: BooleanConstructor;
+    block: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingFill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shape: {
+        type: import('vue').PropType<ButtonShape>;
+        default: undefined;
+    };
+    link: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: import('vue').PropType<ButtonType>;
+        default: undefined;
+    };
+    status: {
+        type: import('vue').PropType<ButtonStatus>;
+        default: undefined;
+    };
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<ButtonSize>;
+        default: string;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};