@gaozhenqi/v-element 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+## 进阶必学！最新 Vue3.3 + TS4 高仿 ElementPlus 打造自己的组件库
+
+**v-element** 是为慕课网打造的一套教学组件库，使用最新的 Vue3.3 和 TS， 意在让大家从零到一，由浅入深的提高自己的 Vue 和 typescript 水平，地址： [https://coding.imooc.com/class/693.html](https://coding.imooc.com/class/693.html)
+
+### 安装
+
+
+```bash
+npm i @vikingmute/v-element --save
+```
+
+### 开始使用
+
+**全局使用**
+
+
+```js
+// 引入所有组件
+import VElement from '@vikingmute/v-element'
+// 引入样式
+import '@vikingmute/v-element/dist/style.css'
+
+import App from './App.vue'
+// 全局使用
+createApp(App).use(VElement).mount('#app')
+```
+
+```vue
+<template>
+  <vk-button>我是 VkButton</vk-button>
+</template>
+```
+
+**单个导入**
+
+V Element 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。
+
+
+```vue
+<template>
+  <Button>我是 VkButton</Button>
+</template>
+<script>
+  import { Button } from ' @vikingmute/v-element'
+  export default {
+    components: { Button },
+  }
+</script>
+```
+
+### 课程亮点
+
+* 亮点1 🔥：“稀有”，目前上市面没有类似的高级课程，由浅入深的高仿 Element-Plus 完成组件库开发的全流程。
+* 亮点2 💧: “专业”，传授大厂前端项目架构设计思想/开发模式/代码规范/流程，不搞小作坊式代码。
+* 亮点3 ⛑️: “全”，精选十几个组件，可以涵盖大部分的主流组件的设计思想以及原理，知识覆盖面全。
+* 亮点4 📚：“新”，使用目前2023年 Vue3 周边最新 ，最全技术：Vue3.2 + Typescript4， Vite，Vitest， Vitepress，Vue-test-utils2，Rollup, Postcss 一网打尽。
+* 亮点5 🎉：“难”，难度逐渐上升，高薪必备敲门砖，包括：Message - Select - Form 这种高难度高复杂组件。
+* 亮点6 🌹：单元测试，被常年忽略但是非常重要的内容，简历加分项，使用最新的 Vitest，Vue-test-utils2 完成单元测试。
+* 亮点7 📚:  文档生成工具，组件库打包和发布以及其他周边流程应有尽有，提供一揽子解决方案。
+* 亮点8 📦: 长期维护以及更新，会根据同学的反馈每年更新几个高频组件。

package/dist/VNode.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<{
+    msg: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    msg: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/components/Button/types.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+export declare type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export declare type ButtonSize = 'large' | 'small';
+export declare type NativeType = 'button' | 'submit' | 'reset';
+export interface ButtonProps {
+    type?: ButtonType;
+    size?: ButtonSize;
+    plain?: boolean;
+    round?: boolean;
+    circle?: boolean;
+    disabled?: boolean;
+    nativeType?: NativeType;
+    autofocus?: boolean;
+    icon?: string;
+    loading?: boolean;
+}
+export interface ButtonInstance {
+    ref: HTMLButtonElement;
+}
+export declare const buttonProps: {
+    type: {
+        type: PropType<ButtonType>;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+    };
+    plain: {
+        type: BooleanConstructor;
+    };
+    round: {
+        type: BooleanConstructor;
+    };
+    circle: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+};

package/dist/components/Collapse/types.d.ts

@@ -0,0 +1,20 @@
+import { Ref, InjectionKey } from 'vue';
+export declare type NameType = string | number;
+export interface CollapseProps {
+    modelValue: NameType[];
+    accordion?: boolean;
+}
+export interface CollapseItemProps {
+    name: NameType;
+    title?: string;
+    disabled?: boolean;
+}
+export interface CollapseContext {
+    activeNames: Ref<NameType[]>;
+    handleItemClick: (name: NameType) => void;
+}
+export interface CollapseEmits {
+    (e: 'update:modelValue', values: NameType[]): void;
+    (e: 'change', values: NameType[]): void;
+}
+export declare const collapseContextKey: InjectionKey<CollapseContext>;

package/dist/components/Common/RenderVnode.d.ts

@@ -0,0 +1,12 @@
+declare const RenderVnode: import('vue').DefineComponent<{
+    vNode: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+}, () => string | Record<string, any>, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    vNode: {
+        type: (StringConstructor | ObjectConstructor)[];
+        required: true;
+    };
+}>>, {}>;
+export default RenderVnode;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,86 @@
+import { PropType } from 'vue';
+import { Placement, Options } from '@popperjs/core';
+import { MenuOption } from './types';
+declare const _default: import('vue').DefineComponent<{
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    trigger: {
+        type: PropType<"hover" | "click">;
+        default: string;
+    };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popperOptions: {
+        type: PropType<Options>;
+    };
+    menuOptions: {
+        type: PropType<MenuOption[]>;
+        required: true;
+    };
+    hideAfterClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("select" | "visible-change")[], "select" | "visible-change", import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    trigger: {
+        type: PropType<"hover" | "click">;
+        default: string;
+    };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popperOptions: {
+        type: PropType<Options>;
+    };
+    menuOptions: {
+        type: PropType<MenuOption[]>;
+        required: true;
+    };
+    hideAfterClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+    "onVisible-change"?: ((...args: any[]) => any) | undefined;
+}, {
+    hideAfterClick: boolean;
+    placement: Placement;
+    trigger: "hover" | "click";
+    transition: string;
+    openDelay: number;
+    closeDelay: number;
+    manual: boolean;
+}>;
+export default _default;

package/dist/components/Dropdown/types.d.ts

@@ -0,0 +1,20 @@
+import { VNode } from 'vue';
+import { TooltipProps } from '../Tooltip/types';
+export interface DropdownProps extends TooltipProps {
+    menuOptions: MenuOption[];
+    hideAfterClick?: boolean;
+}
+export interface MenuOption {
+    label: string | VNode;
+    key: string | number;
+    disabled?: boolean;
+    divided?: boolean;
+}
+export interface DropdownEmits {
+    (e: 'visible-change', value: boolean): void;
+    (e: 'select', value: MenuOption): void;
+}
+export interface DropdownInstance {
+    show: () => void;
+    hide: () => void;
+}

package/dist/components/Form/types.d.ts

@@ -0,0 +1,45 @@
+import { InjectionKey } from 'vue';
+export declare type FormRuleValidator = (value: any, model: Record<string, any>) => boolean | string | Promise<boolean | string>;
+export interface FormRule {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    message?: string;
+    validator?: FormRuleValidator;
+}
+export declare type FormRules = Record<string, FormRule | FormRule[]>;
+export interface FormItemContext {
+    prop?: string;
+    validate: () => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+}
+export interface FormItemValidateContext {
+    validate: () => Promise<boolean>;
+    prop?: string;
+}
+export interface FormContext {
+    model: Record<string, any>;
+    rules?: FormRules;
+    labelWidth?: string | number;
+    addField: (field: FormItemContext) => void;
+    removeField: (field: FormItemContext) => void;
+}
+export interface FormProps {
+    model: Record<string, any>;
+    rules?: FormRules;
+    labelWidth?: string | number;
+    inline?: boolean;
+}
+export interface FormEmits {
+    (e: 'validate', prop: string | undefined, valid: boolean, message: string): void;
+}
+export interface FormInstance {
+    validate: (callback?: (valid: boolean) => void) => Promise<boolean>;
+    validateField: (prop: string) => Promise<boolean>;
+    resetFields: () => void;
+    clearValidate: (props?: string | string[]) => void;
+}
+export declare const FORM_CONTEXT_KEY: InjectionKey<FormContext>;
+export declare const FORM_ITEM_CONTEXT_KEY: InjectionKey<FormItemValidateContext>;

package/dist/components/Icon/types.d.ts

@@ -0,0 +1,28 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export interface IconProps {
+    border?: boolean;
+    fixedWidth?: boolean;
+    flip?: 'horizontal' | 'vertical' | 'both';
+    icon: object | Array<string> | string | IconDefinition;
+    mask?: object | Array<string> | string;
+    listItem?: boolean;
+    pull?: 'right' | 'left';
+    pulse?: boolean;
+    rotation?: 90 | 180 | 270 | '90' | '180' | '270';
+    swapOpacity?: boolean;
+    size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+    spin?: boolean;
+    transform?: object | string;
+    symbol?: boolean | string;
+    title?: string;
+    inverse?: boolean;
+    bounce?: boolean;
+    shake?: boolean;
+    beat?: boolean;
+    fade?: boolean;
+    beatFade?: boolean;
+    spinPulse?: boolean;
+    spinReverse?: boolean;
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    color?: string;
+}

package/dist/components/Input/types.d.ts

@@ -0,0 +1,24 @@
+export interface InputProps {
+    type?: string;
+    modelValue: string;
+    size?: 'large' | 'small';
+    disabled?: boolean;
+    clearable?: boolean;
+    showPassword?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    form?: string;
+}
+export interface InputEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'input', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'focus', value: FocusEvent): void;
+    (e: 'blur', value: FocusEvent): void;
+    (e: 'clear'): void;
+}
+export interface InputInstance {
+    ref: HTMLInputElement | HTMLTextAreaElement;
+}

package/dist/components/Message/method.d.ts

@@ -0,0 +1,25 @@
+import { CreateMessageProps, MessageContext } from './types';
+export declare const createMessage: (props: CreateMessageProps) => {
+    id: string;
+    vnode: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>;
+    vm: import('vue').ComponentInternalInstance;
+    props: {
+        id: string;
+        zIndex: number;
+        onDestory: () => void;
+        type?: "success" | "warning" | "danger" | "info" | undefined;
+        message?: string | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+            [key: string]: any;
+        }> | undefined;
+        duration?: number | undefined;
+        showClose?: boolean | undefined;
+        offset?: number | undefined;
+        transitionName?: string | undefined;
+    };
+    destory: () => void;
+};
+export declare const getLastInstance: () => MessageContext | undefined;
+export declare const getLastBottomOffset: (id: string) => any;
+export declare const closeAll: () => void;

package/dist/components/Message/types.d.ts

@@ -0,0 +1,20 @@
+import { VNode, ComponentInternalInstance } from 'vue';
+export interface MessageProps {
+    message?: string | VNode;
+    duration?: number;
+    showClose?: boolean;
+    type?: 'success' | 'info' | 'warning' | 'danger';
+    onDestory: () => void;
+    id: string;
+    zIndex: number;
+    offset?: number;
+    transitionName?: string;
+}
+export interface MessageContext {
+    id: string;
+    vnode: VNode;
+    vm: ComponentInternalInstance;
+    props: MessageProps;
+    destory: () => void;
+}
+export declare type CreateMessageProps = Omit<MessageProps, 'onDestory' | 'id' | 'zIndex'>;

package/dist/components/Select/types.d.ts

@@ -0,0 +1,50 @@
+import { PropType } from 'vue';
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare type SelectFilterMethod = (query: string, option: SelectOption) => boolean;
+export interface SelectProps {
+    modelValue: string;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    filterable?: boolean;
+    filterMethod?: SelectFilterMethod;
+}
+export interface SelectStates {
+    inputValue: string;
+    selectedOption: null | SelectOption;
+    query: string;
+}
+export interface SelectEmits {
+    (e: 'change', value: string): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'visible-change', value: boolean): void;
+}
+export declare const selectProps: {
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<SelectOption[]>;
+        default: () => never[];
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterMethod: {
+        type: PropType<SelectFilterMethod>;
+    };
+};

package/dist/components/Switch/types.d.ts

@@ -0,0 +1,16 @@
+export declare type SwitchValueType = boolean | string | number;
+export interface SwtichProps {
+    modelValue: SwitchValueType;
+    disabled?: boolean;
+    activeText?: string;
+    inactiveText?: string;
+    activeValue?: SwitchValueType;
+    inactiveValue?: SwitchValueType;
+    name?: string;
+    id?: string;
+    size?: 'small' | 'large';
+}
+export interface SwtichEmits {
+    (e: 'update:modelValue', value: SwitchValueType): void;
+    (e: 'change', value: SwitchValueType): void;
+}

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,19 @@
+import { Placement, Options } from '@popperjs/core';
+export interface TooltipProps {
+    content?: string;
+    trigger?: 'hover' | 'click';
+    placement?: Placement;
+    manual?: boolean;
+    popperOptions?: Partial<Options>;
+    transition?: string;
+    openDelay?: number;
+    closeDelay?: number;
+}
+export interface TooltipEmits {
+    (e: 'visible-change', value: boolean): void;
+    (e: 'click-outside', value: boolean): void;
+}
+export interface TooltipInstance {
+    show: () => void;
+    hide: () => void;
+}

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const useClickOutside: (elementRef: Ref<undefined | HTMLElement>, callback: (e: MouseEvent) => void) => void;
+export default useClickOutside;

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export default function useEventListener(target: Ref<EventTarget | null> | EventTarget, event: string, handler: (e: Event) => any): void;

package/dist/hooks/useZIndex.d.ts

@@ -0,0 +1,6 @@
+declare const useZIndex: (initialValue?: number) => {
+    currentZIndex: import('vue').ComputedRef<number>;
+    nextZIndex: () => number;
+    initialZIndex: import('vue').Ref<number>;
+};
+export default useZIndex;