Merge pull request #32 from wu-component/feature/ui-component-marvin

feat:add colorpicker component

packages/web-plus-ui/build/build-dev-color-picker.js

@@ -0,0 +1,73 @@
+import { resolve } from "path";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import postcss from "rollup-plugin-postcss";
+import typescript from "rollup-plugin-typescript2";
+import json from "@rollup/plugin-json";
+import replace from "@rollup/plugin-replace";
+import scss from 'rollup-plugin-scss'
+import autoprefixer from 'autoprefixer'
+import url from '@rollup/plugin-url';
+
+const input = resolve(__dirname, "../src/packages");
+const output = resolve(__dirname, "../dist-lib");
+const getPath = _path => resolve(__dirname, _path)
+const extensions = [
+    '.js',
+    '.ts',
+    '.tsx'
+]
+let defaults = { compilerOptions: { declaration: true } };
+const config = []
+// 整合打;包
+config.push({
+    input: resolve(__dirname, "../src/packages/wu-color-picker/index.tsx"),
+    plugins: [
+        url({
+            include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
+            // setting infinite limit will ensure that the files
+            // are always bundled with the code, not copied to /dist
+            limit: Infinity,
+        }),
+        nodeResolve(),
+        commonjs(),
+        postcss({
+            extensions: [ '.css', 'scss' ],
+            name: 'index',
+            to: `${output}/index.css`,
+            plugins: [
+                autoprefixer()
+            ],
+            extract: false
+        }),
+        typescript({
+            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
+            tsconfigDefaults: defaults,
+            tsconfigOverride: {
+                compilerOptions: {
+                    declaration: true
+                }
+            },
+            extensions
+        }),
+        json(),
+        replace({
+            preventAssignment: true
+        })
+    ],
+    output: [
+        {
+            name: 'webUIPlusColorPicker',
+            file: `${output}/web-plus-color-picker.umd.js`,
+            format: 'umd',
+            globals: {
+                '@canyuegongzi/web-core-plus': 'webCorePlus'
+            }
+        },
+        // { file: `${output}/web-plus.cjs.js`, format: 'cjs' },
+        // { file: `${output}/web-plus.esm.js`, format: 'es' }
+
+    ],
+    external: [/web-core-plus$/],
+})
+export default config;

packages/web-plus-ui/dist-lib/packages/wu-color-picker/color-pane/index.d.ts

@@ -0,0 +1,63 @@
+import { OnConnected, WuComponent, OnDisConnected } from '@canyuegongzi/web-core-plus';
+export declare class WuColorPane extends WuComponent implements OnConnected, OnDisConnected {
+    private type;
+    private typeindex;
+    private palette;
+    private colors;
+    private pane;
+    private rangeHue;
+    private rangeOpacity;
+    private copyBtn;
+    private copyinfo;
+    private switch;
+    private colorHexa;
+    private colorRgba;
+    private colorHlsa;
+    private $value;
+    private nativeclick;
+    private start;
+    val: any;
+    private timeout;
+    constructor();
+    defaultvalue: string;
+    choose(ev: any): void;
+    connected(shadowRoot: ShadowRoot): void;
+    mousemove: (ev: any) => void;
+    mouseup: () => any;
+    disConnected(): void;
+    get value(): any;
+    get color(): {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+        toHSVA(): number[];
+        toHSLA(): any[];
+        toRGBA(): number[];
+        toCMYK(): number[];
+        toHEXA(): string[];
+        clone: () => any;
+    };
+    valueChange(val: string, old?: string): void;
+    valueChangeEvent(): {
+        value: any;
+        color: {
+            h: number;
+            s: number;
+            v: number;
+            a: number;
+            toHSVA(): number[];
+            toHSLA(): any[];
+            toRGBA(): number[];
+            toCMYK(): number[];
+            toHEXA(): string[];
+            clone: () => any;
+        };
+    };
+    init(color: string): void;
+    /**
+     * 更新
+     */
+    updatePicker(): void;
+    render(_renderProps?: {}, _store?: {}): any;
+}

packages/web-plus-ui/dist-lib/packages/wu-color-picker/index.d.ts

@@ -0,0 +1,62 @@
+import { UISize } from "@/interface";
+import { OnConnected, WuComponent } from '@canyuegongzi/web-core-plus';
+import '../wu-popover';
+import '../wu-button';
+import { WuColorPane } from "./color-pane";
+import './color-pane';
+export declare class WuColorPicker extends WuComponent implements OnConnected {
+    popover: any;
+    popoverRef: any;
+    popcon: any;
+    colorPane: WuColorPane;
+    nativeclick: boolean;
+    constructor();
+    size: UISize;
+    defaultvalue: string;
+    disabled: boolean;
+    val: string;
+    $value: any;
+    connected(shadowRoot: ShadowRoot): void;
+    /**
+     * 确认颜色
+     */
+    okCallback(): void;
+    /**
+     * 确认颜色
+     */
+    cancleCallback(): void;
+    /**
+     * 打开选择器
+     */
+    openPicker(): void;
+    valueChange(value: string, old: string): void;
+    changeEvent(): {
+        value: any;
+        color: {
+            h: number;
+            s: number;
+            v: number;
+            a: number;
+            toHSVA(): number[];
+            toHSLA(): any[];
+            toRGBA(): number[];
+            toCMYK(): number[];
+            toHEXA(): string[];
+            clone: () => any;
+        };
+    };
+    get color(): {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+        toHSVA(): number[];
+        toHSLA(): any[];
+        toRGBA(): number[];
+        toCMYK(): number[];
+        toHEXA(): string[];
+        clone: () => any;
+    };
+    get value(): any;
+    render(_renderProps?: {}, _store?: {}): any;
+}

packages/web-plus-ui/dist-lib/packages/wu-color-picker/utils/color.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Convert HSV spectrum to RGB.
+ * @param h Hue
+ * @param s Saturation
+ * @param v Value
+ * @returns {number[]} Array with rgb values.
+ */
+export declare function hsvToRgb(h: any, s: any, v: any): number[];
+/**
+ * Convert HSV spectrum to Hex.
+ * @param h Hue
+ * @param s Saturation
+ * @param v Value
+ * @returns {string[]} Hex values
+ */
+export declare function hsvToHex(h: any, s: any, v: any): string[];
+/**
+ * Convert HSV spectrum to CMYK.
+ * @param h Hue
+ * @param s Saturation
+ * @param v Value
+ * @returns {number[]} CMYK values
+ */
+export declare function hsvToCmyk(h: any, s: any, v: any): number[];
+/**
+ * Convert HSV spectrum to HSL.
+ * @param h Hue
+ * @param s Saturation
+ * @param v Value
+ * @returns {number[]} HSL values
+ */
+export declare function hsvToHsl(h: any, s: any, v: any): any[];
+/**
+ * Convert RGB to HSV.
+ * @param r Red
+ * @param g Green
+ * @param b Blue
+ * @return {number[]} HSV values.
+ */
+export declare function rgbToHsv(r: any, g: any, b: any): number[];
+/**
+ * Convert CMYK to HSV.
+ * @param c Cyan
+ * @param m Magenta
+ * @param y Yellow
+ * @param k Key (Black)
+ * @return {number[]} HSV values.
+ */
+export declare function cmykToHsv(c: any, m: any, y: any, k: any): number[];
+/**
+ * Convert HSL to HSV.
+ * @param h Hue
+ * @param s Saturation
+ * @param l Lightness
+ * @return {number[]} HSV values.
+ */
+export declare function hslToHsv(h: any, s: any, l: any): any[];
+/**
+ * Convert HEX to HSV.
+ * @param hex Hexadecimal string of rgb colors, can have length 3 or 6.
+ * @return {number[]} HSV values.
+ */
+export declare function hexToHsv(hex: any): number[];
+/**
+ * Try's to parse a string which represents a color to a HSV array.
+ * Current supported types are cmyk, rgba, hsla and hexadecimal.
+ * @param str
+ * @return {*}
+ */
+export declare function parseToHSVA(str: any): {
+    values: number[];
+    type: "cmyk";
+    a?: undefined;
+} | {
+    values: any[];
+    a: any;
+    type: "rgba";
+} | {
+    values: any[];
+    a: any;
+    type: "hexa";
+} | {
+    values: any[];
+    a: any;
+    type: "hsla";
+} | {
+    values: any[];
+    a: any;
+    type: "hsva";
+};

packages/web-plus-ui/dist-lib/packages/wu-color-picker/utils/hsvacolor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Simple class which holds the properties
+ * of the color represention model hsla (hue saturation lightness alpha)
+ */
+export declare function HSVaColor(h?: number, s?: number, v?: number, a?: number): {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+    toHSVA(): number[];
+    toHSLA(): any[];
+    toRGBA(): number[];
+    toCMYK(): number[];
+    toHEXA(): string[];
+    clone: () => any;
+};

packages/web-plus-ui/dist-lib/packages/wu-popover/index.d.ts

@@ -15,6 +15,9 @@ export declare class WuPopover extends WuComponent implements OnConnected {
     disappear: boolean;
     disabled: boolean;
     private popper;
+    closeEmit(): {
+        value: boolean;
+    };
     onEnter: (evt: any) => void;
     onEnterPopover: (evt: any) => void;
     updatePosition(): void;