@havue/components 1.0.0

package/dist/types/color-picker/src/hooks/useOperateEvent.d.ts

@@ -0,0 +1,8 @@
+export declare function useOperateEvent(): {
+    colorAreaRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    circlePickerCoordinate: {
+        x: number;
+        y: number;
+    };
+    setCirclePickerCoordinate: (x: number, y: number, width: number, height: number) => void;
+};

package/dist/types/color-picker/src/index.d.ts

@@ -0,0 +1,4 @@
+import type { SFCWithInstall } from '@havue/utils';
+import ColorPicker from './ColorPicker.vue';
+export declare const HvColorPicker: SFCWithInstall<typeof ColorPicker>;
+export default HvColorPicker;

package/dist/types/color-picker/src/utils/color.d.ts

@@ -0,0 +1,47 @@
+import type ColorConstruct from 'color';
+export type RgbColorType = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type HsvColorType = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function hexToColor(hex: string): ColorConstruct;
+/**
+ * 输入rgb，返回16进制颜色
+ * @param {ColorConstruct} color
+ * @returns {string}
+ */
+export declare function colorToHex(color: ColorConstruct): string;
+/**
+ * 根据颜色值，计算得到hsv深度100的颜色和当前深度值
+ * @param { ColorConstruct } color
+ * @returns {
+ *   color: ColorConstruct
+ *   value: number [0-100]
+ * }
+ *
+ */
+export declare function getLightColorAndDepth(color: ColorConstruct): {
+    color: ColorConstruct;
+    value: number;
+};
+/**
+ * 根据高亮区域的颜色和缩放比例，计算得到原始rgb颜色值
+ * @param { ColorConstruct } color
+ * @param { number } value 深度 [0-100]
+ * @returns ColorConstruct
+ *
+ */
+export declare function getOriginColorByLightAndDepth(color: ColorConstruct, value: number): ColorConstruct;
+/**
+ * 根据canvas高亮区域的颜色和深度值，计算得到原始hex颜色值
+ * @param { ColorConstruct } color
+ * @param { number } value 深度 [0-100]
+ * @returns string
+ *
+ */
+export declare function getOriginHexByLightAndDepth(color: ColorConstruct, value: number): string;

package/dist/types/color-picker/src/utils/tools.d.ts

@@ -0,0 +1 @@
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, time?: number): (this: any, ...args: Parameters<T>) => void;

package/dist/types/drag-and-drop/src/Draggable.vue.d.ts

@@ -0,0 +1,47 @@
+import type { DragAndDropDragType } from './manager';
+declare const ImmediateEnumType: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+    readonly ALL: "all";
+};
+type ImmediateType = (typeof ImmediateEnumType)[keyof typeof ImmediateEnumType];
+type __VLS_Props = {
+    type: DragAndDropDragType;
+    immediate?: ImmediateType | Array<ImmediateType> | undefined;
+    disabled?: boolean;
+    data?: any;
+};
+declare const dragItemRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+/** 是否开始拖动 */
+declare const isDragThis: import("vue").Ref<boolean, boolean>;
+declare const cloneNodeStyle: import("vue").ComputedRef<{
+    transform: string;
+}>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    'drag-item'?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    dragItemRef: typeof dragItemRef;
+    isDragThis: typeof isDragThis;
+    cloneNodeStyle: typeof cloneNodeStyle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/drag-and-drop/src/Droppable.vue.d.ts

@@ -0,0 +1,41 @@
+import type { DragAndDropDragType, DragAndDropPoint } from './manager';
+type __VLS_Props = {
+    acceptDragType: DragAndDropDragType | Array<DragAndDropDragType>;
+};
+declare const dropAreaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    dropAreaRef: typeof dropAreaRef;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    drop: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    move: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    enter: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    leave: (type: DragAndDropDragType, data: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onMove?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onEnter?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onLeave?: ((type: DragAndDropDragType, data: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    drop: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    move: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    enter: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    leave: (type: DragAndDropDragType, data: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onMove?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onEnter?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onLeave?: ((type: DragAndDropDragType, data: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/drag-and-drop/src/index.d.ts

@@ -0,0 +1,6 @@
+import type { SFCWithInstall } from '@havue/utils';
+import Draggable from './Draggable.vue';
+import Droppable from './Droppable.vue';
+export declare const HvDraggable: SFCWithInstall<typeof Draggable>;
+export declare const HvDroppable: SFCWithInstall<typeof Droppable>;
+export type { DragAndDropPoint, DragAndDropDragType, DnDManager } from './manager';

package/dist/types/drag-and-drop/src/manager/index.d.ts

@@ -0,0 +1,81 @@
+import { EventBus } from '@havue/shared';
+export type DragAndDropPoint = {
+    x: number;
+    y: number;
+};
+export type DragAndDropDragType = string | number | symbol;
+type Events = {
+    down: (p: DragAndDropPoint) => void;
+    'first-move': (p: DragAndDropPoint, e: MouseEvent | TouchEvent) => void;
+    start: (p: DragAndDropPoint) => void;
+    move: (params: {
+        type: DragAndDropDragType;
+        data: any;
+        point: DragAndDropPoint;
+    }) => void;
+    end: (params: {
+        type: DragAndDropDragType;
+        data: any;
+        point: DragAndDropPoint;
+    }) => void;
+};
+export declare class DnDManager extends EventBus<Events> {
+    /** 是否开始拖动 */
+    isDragStart: boolean;
+    /** 拖动元素类型 */
+    dragType: DragAndDropDragType | undefined;
+    /** Draggable传递的数据，
+     * 供Droppable使用
+     */
+    dragData: any;
+    private isSendFirstMovePos;
+    /** 移动端长按一定时间才触发 onStart */
+    private touchStartPressTime;
+    /** touchstart事件触发的时的时间 */
+    private touchStartTime;
+    /** touchstart时间触发的位置 */
+    private touchStartPosition;
+    /** onMove最后位置 */
+    private lastMovePoint;
+    private emitTouchStartTimer;
+    private destroy;
+    constructor();
+    updateDargInfo(type: Exclude<DragAndDropDragType, undefined>, data: any): void;
+    /**
+     * 通知 Draggable 开始点击
+     * @param point
+     */
+    private onDown;
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    private onFirstMove;
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    private onStart;
+    /**
+     * 通知 Draggable 移动
+     * @param point
+     * @returns
+     */
+    private onMove;
+    /**
+     * 结束拖拽
+     * @returns
+     */
+    private onEnd;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private bindEventListener;
+    private removeEventListener;
+    destroyed(): void;
+}
+export declare const DnDManagerInstance: DnDManager;
+export {};

package/dist/types/drag-and-scale/src/DragAndScale.vue.d.ts

@@ -0,0 +1,29 @@
+export type { DragAndScaleChangeResultType } from './hooks/useDragAndScale';
+import type { DragAndScaleChangeResultType, DragAndScaleOptions } from './hooks/useDragAndScale';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    container: DragAndScaleOptions["container"];
+    containerRealSize?: DragAndScaleOptions["containerRealSize"];
+    keepRatio?: DragAndScaleOptions["keepRatio"];
+    limit?: DragAndScaleOptions["limit"];
+    disabled?: DragAndScaleOptions["disabled"];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (params: DragAndScaleChangeResultType) => any;
+    finish: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    container: DragAndScaleOptions["container"];
+    containerRealSize?: DragAndScaleOptions["containerRealSize"];
+    keepRatio?: DragAndScaleOptions["keepRatio"];
+    limit?: DragAndScaleOptions["limit"];
+    disabled?: DragAndScaleOptions["disabled"];
+}> & Readonly<{
+    onChange?: ((params: DragAndScaleChangeResultType) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/drag-and-scale/src/hooks/useDragAndScale.d.ts

@@ -0,0 +1,45 @@
+import type { MaybeRef } from 'vue';
+export type DragAndScaleOptions = {
+    container: HTMLElement | undefined | null;
+    containerRealSize?: {
+        width: number;
+        height: number;
+    };
+    scaleAreaWidth?: number;
+    keepRatio?: boolean | Partial<KeepRatioType>;
+    limit?: {
+        inContainer?: boolean;
+        minWidth?: number;
+        minHeight?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    };
+    disabled?: boolean;
+    onChange?: (p: DragAndScaleChangeResultType) => void;
+    onFinish?: () => void;
+};
+type KeepRatioType = {
+    enable: boolean;
+    scaleCase: 'min' | 'max';
+};
+export type DragAndScalePoint = {
+    x: number;
+    y: number;
+};
+type TargetAreaType = {
+    elX: number;
+    elY: number;
+    elWidth: number;
+    elHeight: number;
+};
+export type DragAndScaleChangeResultType = TargetAreaType & {
+    type: 'move' | 'scale';
+    deltaX: number;
+    deltaY: number;
+    realX: number;
+    realY: number;
+    realWidth: number;
+    realHeight: number;
+};
+export declare function useDragAndScale(target: MaybeRef<HTMLElement>, operateTarget: MaybeRef<HTMLElement>, options: MaybeRef<DragAndScaleOptions>): void;
+export {};

package/dist/types/drag-and-scale/src/index.d.ts

@@ -0,0 +1,5 @@
+import type { SFCWithInstall } from '@havue/utils';
+import DragAndScale from './DragAndScale.vue';
+export declare const HvDragAndScale: SFCWithInstall<typeof DragAndScale>;
+export default HvDragAndScale;
+export type { DragAndScaleOptions, DragAndScalePoint, DragAndScaleChangeResultType, useDragAndScale } from './hooks/useDragAndScale';

package/dist/types/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@havue/color-picker';
+export * from '@havue/drag-and-drop';
+export * from '@havue/drag-and-scale';

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@havue/components",
+  "version": "1.0.0",
+  "description": "Some components for Vue3",
+  "keywords": [
+    "havue",
+    "components",
+    "vue3"
+  ],
+  "license": "MIT",
+  "homepage": "https://happypedestrian.github.io/havue/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HappyPedestrian/havue.git"
+  },
+  "dependencies": {
+    "@havue/shared": "^1.0.0",
+    "@havue/drag-and-drop": "^1.0.0",
+    "@havue/color-picker": "^1.0.0",
+    "@havue/drag-and-scale": "^1.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/components.umd.js",
+  "module": "./dist/components.mjs",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/components.umd.js",
+      "import": "./dist/components.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build:package": "vite build --mode package",
+    "build:full": "vite build --mode full",
+    "build:full-min": "vite build --mode full-min",
+    "build": "pnpm run build:package && pnpm run build:full && pnpm run build:full-min"
+  }
+}