x-next 0.0.0-alpha.2 → 0.0.0-alpha.3

package/README.md

@@ -1,95 +1,26 @@
-# Vue 3 Datepicker
+# 简介
 
-Documentation: https://icehaunter.github.io/vue3-datepicker/
+X-Next是Ringing Tech的基础UI库。
 
-This is a basic (at least for now) reimplementation of https://github.com/icehaunter/vuejs-datepicker in Vue 3 and with greatly cleaned up code.
+# 安装
 
-All date manipulation and formatting are done via the amazing [`date-fns`](https://date-fns.org/) library, so it's a direct dependency of this picker.
+### 运行
 
-## Installation
-
-Package is available on NPM: https://www.npmjs.com/package/vue3-datepicker
-
-```sh
-npm i vue3-datepicker
 ```
-
-The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.
-
-## Usage
-
-For more examples see https://icehaunter.github.io/vue3-datepicker/examples.html
-
-```vue
-<template>
-  <datepicker
-    v-model="selected"
-    :locale="locale"
-    :upperLimit="to"
-    :lowerLimit="from"
-    :clearable="true"
-  />
-</template>
+pnpm i x-next
 ```
 
-## Props and attributes
-
-Attribute fallthrough is enabled, so any attribute you apply to the component will be passed down to the input.
-
-All props which accept formatting strings for dates use [`date-fns` formatting function](https://date-fns.org/docs/format) under the hood, so see that function's documentation for patterns.
+### 引入
 
-Main interaction to date selection is done via `v-model` with `Date` as expected type of the value passed.
-
-Full props documentation is available at https://icehaunter.github.io/vue3-datepicker/config.html#props
-
-| ID                       | Type                                                     | Default              | Description                                                                                                                                |
-| ------------------------ | -------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `upperLimit`             | `Date`                                                   |                      | Upper limit for available dates for picking                                                                                                |
-| `lowerLimit`             | `Date`                                                   |                      | Lower limit for available dates for picking                                                                                                |
-| `startingViewDate`       | `Date`                                                   | `() => new Date()`   | Date on which to focus when empty datepicker is opened. Default is "right now"                                                             |
-| `disabledDates`          | `{ dates: Date[] }`                                      |                      | Dates not available for picking                                                                                                            |
-| `disabledTime`           | `{ dates: Date[] }`                                      |                      | Dates not available for time picking                                                                                                       |
-| `startingView`           | `'time' \| 'day' \| 'month' \| 'year'`                   | `'day'`              | View on which the date picker should open. Can be either `year`, `month`, or `day`                                                         |
-| `minimumView`            | `'time' \| 'day' \| 'month' \| 'year'`                   | `'day'`              | If set, lower-level views won't show                                                                                                       |
-| `dayPickerHeadingFormat` | `String`                                                 | `LLLL yyyy`          | `date-fns`-type formatting for a day view heading                                                                                          |
-| `dayFormat`              | `String`                                                 | `dd`                 | `date-fns`-type formatting for each day on the day view                                                                                    |
-| `weekdayFormat`          | `String`                                                 | `EE`                 | `date-fns`-type formatting for a line of weekdays on day view                                                                              |
-| `inputFormat`            | `String`                                                 | `yyyy-MM-dd`         | `date-fns`-type format in which the string in the input should be both parsed and displayed                                                |
-| `locale`                 | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |
-| `disabled`               | `Boolean`                                                | `false`              | Disables datepicker and prevents it's opening                                                                                              |
-| `typeable`               | `Boolean`                                                | `false`              | Allows user to input date manually                                                                                                         |
-| `weekStartsOn`           | `Number`                                                 | 1                    | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default      |
-| `clearable`              | `Boolean`                                                | `false`              | Allows clearing the selected date and setting the value to `null`                                                                          |
-| `allowOutsideInterval`   | `Boolean`                                                | `false`              | Allows user to click dates outside of current interval                                                                                     |
-
-### Events
-
-- `opened`: Emitted every time the popup opens, including on field focus
-- `closed`: Emitted every time the popup closes, including on field blur
-- `decadePageChanged`: Emitted when a page is changed on the year picker view, displaying a different decade. Has a date that is included in the shown decade as an argument.
-- `yearPageChanged`: Emitted when a page is changed on the month picker view, displaying a different year. Has a date that is included in the shown year as an argument.
-- `monthPageChanged`: Emitted when a page is changed on the day picker view, displaying a different month. Has a date that is included in the shown month as an argument.
-
-## Compatibility
-
-Package is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.
-
-## Example
+```
+// main.ts
+import { createApp } from 'vue'
+import XNext from 'x-next'
+import "x-next/packages/style.css"; //引入组件样式
+import App from './App.vue'
 
-```vue
-<template>
-  <datepicker v-model="picked" />
-</template>
+const app = createApp(App)
 
-<script>
-import Datepicker from '../src/datepicker/Datepicker.vue'
-components: {
-  Datepicker
-},
-data(): {
-  return {
-    picked: new Date();
-  }
-}
-</script>
+app.use(XNext)
+app.mount('#app')
 ```

package/package.json

@@ -1,66 +1,52 @@
 {
-  "author": {
-    "email": "xy@ztes.com",
-    "name": "XuYu"
-  },
-  "license": "MIT",
-  "engines": {
-    "node": ">=10.16.0"
+  "name": "x-next",
+  "private": false,
+  "version": "0.0.0-alpha.3",
+  "description": "An amazing Vue3 UI library.",
+  "type": "module",
+  "main": "x-next/ui.umd.js",
+  "module": "x-next/ui.js",
+  "types": "x-next/types/ui.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "publish": "npm publish --access=public"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ztes/x-next.git"
+    "url": "git+https://github.com/ztes/x-next.git"
   },
   "bugs": {
     "url": "https://github.com/ztes/x-next/issues"
   },
-  "private": false,
-  "name": "x-next",
-  "version": "0.0.0-alpha.2",
+  "dependencies": {
+    "dayjs": "^1.11.11",
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.80.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.0.6"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "description": "A simple Vue 3 UI component. ",
   "keywords": [
     "vue",
     "vue 3",
     "component"
   ],
-  "main": "dist/ui.umd.js",
-  "module": "dist/ui.es.js",
-  "types": "./dist/types/ui.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "dev:docs": "vitepress dev docs",
-    "build:component": "vite build",
-    "build:docs": "vitepress build docs",
-    "preview:docs": "vitepress preview docs",
-    "format": "prettier -w ."
-  },
-  "devDependencies": {
-    "@babel/types": "^7.22.4",
-    "@types/node": "^20.2.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/compiler-sfc": "^3.5.12",
-    "prettier": "^2.8.8",
-    "sass": "^1.80.3",
-    "sass-loader": "^16.0.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13",
-    "vite-plugin-css-injected-by-js": "^3.1.1",
-    "vite-plugin-dts": "^2.3.0",
-    "vitepress": "^1.4.1",
-    "vue": "^3.5.12"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
+  "author": {
+    "email": "xy@ztes.com",
+    "name": "XuYu"
   },
-  "dependencies": {
-    "date-fns": "^2.22.1",
-    "dayjs": "^1.11.13"
-  }
+  "license": "MIT",
+  "files": [
+    "x-next"
+  ]
 }

package/{dist/types → x-next}/_hooks/use-overflow.d.ts

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

package/{dist/types → x-next}/_hooks/use-popup-manager.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import { Ref } from 'vue';
 export type PopupType = 'popup' | 'dialog' | 'message';
 export default function usePopupManager(type: PopupType, { visible, runOnMounted, }?: {
     visible?: Ref<boolean>;

package/{dist/types → x-next}/_utils/dom.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'vue';
+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;

package/{dist/types → x-next}/_utils/icon.d.ts

@@ -3,7 +3,7 @@
  * @param str
  */
 export declare const toPascalCase: (str: string) => string;
-export declare function createIconComponent(name: string): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare function createIconComponent(name: string): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     size: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
@@ -25,11 +25,11 @@ export declare function createIconComponent(name: string): import("vue").DefineC
         default: undefined;
     };
 }>, {
-    cls: import("vue").ComputedRef<(string | {
-        [x: string]: boolean;
+    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<{
+    styles: import('vue').ComputedRef<import('vue').CSSProperties>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     size: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
@@ -51,9 +51,9 @@ export declare function createIconComponent(name: string): import("vue").DefineC
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    size: string | number;
     color: string;
     rotate: number;
-    size: string | number;
     spin: boolean;
     fillColor: unknown[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/{dist/types → x-next}/_utils/is.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentPublicInstance, VNodeNormalizedChildren } from 'vue';
+import { ComponentPublicInstance, VNodeNormalizedChildren, VNode } from 'vue';
 import { Dayjs } from 'dayjs';
-import { VNode } from 'vue';
 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;
@@ -16,10 +15,8 @@ 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<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions>, {}, {}, "", {}, any>;
-export declare const isArrayChildren: (children: VNodeNormalizedChildren) => children is VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[];
+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/types → x-next}/_utils/keyboard.d.ts

@@ -21,4 +21,4 @@ export interface CodeKey {
     /** meta ⌘ / ⊞ */
     meta?: boolean;
 }
-export declare const getKeyDownHandler: (codeKeyMap: Map<string | CodeKey, (e: Event) => void>) => (event: KeyboardEvent) => void;
+export declare const getKeyDownHandler: (codeKeyMap: Map<CodeKey | string, (e: Event) => void>) => (event: KeyboardEvent) => void;

package/{dist/types → x-next}/_utils/vue-eco.d.ts

@@ -1,4 +1,4 @@
-import type { VNodeTypes, VNode, PropType, Component, Plugin } from 'vue';
+import { VNodeTypes, VNode, PropType, Component, Slots, Plugin } from 'vue';
 export type SFCWithInstall<T> = T & Plugin;
 /**
  * @description Vue生态操作封装
@@ -18,15 +18,11 @@ export declare enum ShapeFlags {
     COMPONENT_KEPT_ALIVE = 512
 }
 export declare const isElement: (vn: VNode) => boolean;
-export declare const isComponent: (vn: VNode, type?: VNodeTypes) => type is Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>;
-export declare const isTextChildren: (child: VNode, children: VNode['children']) => children is string;
-export declare const isArrayChildren: (vn: VNode, children: VNode['children']) => children is VNode<import("vue").RendererNode, import("vue").RendererElement, {
+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 isSlotsChildren: (vn: VNode, children: VNode['children']) => children is Readonly<{
-    [name: string]: import("vue").Slot<any> | undefined;
-}>;
-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 | undefined) => SFCWithInstall<T> & E;
+export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;

package/x-next/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;
+    border: boolean;
+    link: boolean;
+    block: boolean;
+    disabled: boolean;
+    type: import('./props').ButtonType;
+    loading: boolean;
+    loadingFill: boolean;
+    debounce: number;
+    shape: import('./props').ButtonShape;
+    status: import('./props').ButtonStatus;
+    plain: boolean;
+}, {}, {
+    AnimationLoading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            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: (StringConstructor | NumberConstructor)[];
+            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;
+        color: string;
+        rotate: number;
+        spin: boolean;
+        fillColor: unknown[];
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/{dist/types → x-next}/componets/button/props.d.ts

@@ -15,7 +15,7 @@ export declare const buttonProps: {
         default: number;
     };
     shape: {
-        type: import("vue").PropType<ButtonShape>;
+        type: import('vue').PropType<ButtonShape>;
         default: undefined;
     };
     link: {
@@ -23,11 +23,11 @@ export declare const buttonProps: {
         default: boolean;
     };
     type: {
-        type: import("vue").PropType<ButtonType>;
+        type: import('vue').PropType<ButtonType>;
         default: undefined;
     };
     status: {
-        type: import("vue").PropType<ButtonStatus>;
+        type: import('vue').PropType<ButtonStatus>;
         default: undefined;
     };
     plain: {
@@ -35,7 +35,7 @@ export declare const buttonProps: {
         default: boolean;
     };
     size: {
-        type: import("vue").PropType<ButtonSize>;
+        type: import('vue').PropType<ButtonSize>;
         default: string;
     };
     border: {