@magic-color/vue - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/index.d.ts

 import * as vue from 'vue';
 import { PropType as PropType$1, App } from 'vue';
 import * as magic_color from 'magic-color';
-import { HsbColor, ColorType } from 'magic-color';
+import { ColorType, HsbColor, ColorValue } from 'magic-color';
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<globalThis.ExtractPropTypes<{
     color: {
@@ -15,11 +15,15 @@ type: StringConstructor;
     };
-}, {
-    color: vue.ModelRef<string, PropertyKey>;
-    alpha: vue.ModelRef<number, PropertyKey>;
-    type: globalThis.Ref<keyof magic_color.Colors>;
-    mcHsbColor: globalThis.WritableComputedRef<HsbColor>;
-    hue: globalThis.WritableComputedRef<number>;
+    type: {
+        type: () => ColorType;
+        default: string;
+    };
+}>, {
+    color: vue.ModelRef<string, PropertyKey, string, string>;
+    alpha: vue.ModelRef<number, PropertyKey, number, number>;
+    type: vue.ModelRef<keyof magic_color.Colors, PropertyKey, keyof magic_color.Colors, keyof magic_color.Colors>;
+    mcHsbColor: globalThis.WritableComputedRef<HsbColor, HsbColor>;
+    hue: globalThis.WritableComputedRef<number, number>;
     controlColor: globalThis.ComputedRef<string>;
     displayBgColor: globalThis.ComputedRef<string>;
-    colorValue: globalThis.WritableComputedRef<string | HsbColor | magic_color.RgbColor | magic_color.HslColor | magic_color.LabColor>;
+    colorValue: globalThis.WritableComputedRef<string | magic_color.RgbColor | HsbColor | magic_color.HslColor | magic_color.LabColor, ColorValue>;
     handlePanelChange: ({ x, y }: {
@@ -29,3 +33,3 @@ x: number;
     }) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:color" | "update:alpha")[], "update:color" | "update:alpha", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:color" | "update:type" | "update:alpha")[], "update:color" | "update:type" | "update:alpha", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
     color: {
@@ -39,11 +43,17 @@ type: StringConstructor;
     };
-}>> & {
+    type: {
+        type: () => ColorType;
+        default: string;
+    };
+}>> & Readonly<{
     "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:type"?: ((...args: any[]) => any) | undefined;
     "onUpdate:alpha"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
+    alpha: number;
+    type: keyof magic_color.Colors;
     color: string;
-    alpha: number;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<globalThis.ExtractPropTypes<{
     disable: {
@@ -84,5 +94,5 @@ type: BooleanConstructor;
     };
-}, {
-    canvasRef: globalThis.Ref<HTMLCanvasElement | null>;
-    barRef: globalThis.Ref<HTMLDivElement | null>;
+}>, {
+    canvasRef: globalThis.Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+    barRef: globalThis.Ref<HTMLDivElement | null, HTMLDivElement | null>;
     wrapperStyle: globalThis.ComputedRef<{
@@ -109,4 +119,4 @@ position: string;
     onMouseDown: (e: MouseEvent) => void;
-    model: vue.ModelRef<number, PropertyKey>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    model: vue.ModelRef<number, PropertyKey, number, number>;
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
     disable: {
@@ -147,17 +157,17 @@ type: BooleanConstructor;
     };
-}>> & {
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     disable: boolean;
+    type: "hue" | "alpha" | "normal";
     width: number;
     height: number;
     color: string;
-    type: "hue" | "normal" | "alpha";
     modelValue: number;
     barColor: string;
     wrapperColor: string;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 type ArrayValue = [number, number, number];
-declare const _default$2: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<globalThis.ExtractPropTypes<{
     color: {
@@ -172,11 +182,11 @@ type: (StringConstructor | (() => ArrayValue))[];
     };
-}, {
-    type: vue.ModelRef<keyof magic_color.Colors | undefined, PropertyKey>;
-    hexV: globalThis.WritableComputedRef<string>;
-    v0: globalThis.WritableComputedRef<number>;
-    v1: globalThis.WritableComputedRef<number>;
-    v2: globalThis.WritableComputedRef<number>;
-    alphaStringify: globalThis.WritableComputedRef<number>;
+}>, {
+    type: vue.ModelRef<keyof magic_color.Colors | undefined, PropertyKey, keyof magic_color.Colors | undefined, keyof magic_color.Colors | undefined>;
+    hexV: globalThis.WritableComputedRef<string, string>;
+    v0: globalThis.WritableComputedRef<number, number>;
+    v1: globalThis.WritableComputedRef<number, number>;
+    v2: globalThis.WritableComputedRef<number, number>;
+    alphaStringify: globalThis.WritableComputedRef<number, number>;
     handleAlphaBlur: (e: any) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:color" | "update:type" | "update:alpha")[], "update:color" | "update:type" | "update:alpha", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:color" | "update:type" | "update:alpha")[], "update:color" | "update:type" | "update:alpha", vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
     color: {
@@ -191,9 +201,9 @@ type: (StringConstructor | (() => ArrayValue))[];
     };
-}>> & {
+}>> & Readonly<{
     "onUpdate:color"?: ((...args: any[]) => any) | undefined;
     "onUpdate:type"?: ((...args: any[]) => any) | undefined;
     "onUpdate:alpha"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<globalThis.ExtractPropTypes<{
     width: {
@@ -215,5 +225,5 @@ type: NumberConstructor;
     };
-}, {
-    canvasRef: globalThis.Ref<HTMLCanvasElement | null>;
-    barRef: globalThis.Ref<HTMLDivElement | null>;
+}>, {
+    canvasRef: globalThis.Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+    barRef: globalThis.Ref<HTMLDivElement | null, HTMLDivElement | null>;
     wrapperStyle: globalThis.ComputedRef<{
@@ -238,3 +248,3 @@ position: string;
     onMouseDown: (e: MouseEvent) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
     width: {
@@ -256,9 +266,9 @@ type: NumberConstructor;
     };
-}>>, {
+}>> & Readonly<{}>, {
     width: number;
     height: number;
     barSize: number;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-declare const _default: vue.DefineComponent<{
+declare const _default: vue.DefineComponent<globalThis.ExtractPropTypes<{
     width: {
@@ -276,4 +286,4 @@ type: NumberConstructor;
     };
-}, {
-    canvas: globalThis.Ref<HTMLCanvasElement | null>;
+}>, {
+    canvas: globalThis.Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
     ctx: globalThis.Ref<{
@@ -360,2 +370,3 @@ readonly canvas: HTMLCanvasElement;
         shadowOffsetY: number;
+        isContextLost: () => boolean;
         reset: () => void;
@@ -391,4 +402,116 @@ restore: () => void;
         };
+    } | null, CanvasRenderingContext2D | {
+        readonly canvas: HTMLCanvasElement;
+        getContextAttributes: () => CanvasRenderingContext2DSettings;
+        globalAlpha: number;
+        globalCompositeOperation: GlobalCompositeOperation;
+        drawImage: {
+            (image: CanvasImageSource, dx: number, dy: number): void;
+            (image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
+            (image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
+        };
+        beginPath: () => void;
+        clip: {
+            (fillRule?: CanvasFillRule): void;
+            (path: Path2D, fillRule?: CanvasFillRule): void;
+        };
+        fill: {
+            (fillRule?: CanvasFillRule): void;
+            (path: Path2D, fillRule?: CanvasFillRule): void;
+        };
+        isPointInPath: {
+            (x: number, y: number, fillRule?: CanvasFillRule): boolean;
+            (path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
+        };
+        isPointInStroke: {
+            (x: number, y: number): boolean;
+            (path: Path2D, x: number, y: number): boolean;
+        };
+        stroke: {
+            (): void;
+            (path: Path2D): void;
+        };
+        fillStyle: string | {
+            addColorStop: (offset: number, color: string) => void;
+        } | {
+            setTransform: (transform?: DOMMatrix2DInit) => void;
+        };
+        strokeStyle: string | {
+            addColorStop: (offset: number, color: string) => void;
+        } | {
+            setTransform: (transform?: DOMMatrix2DInit) => void;
+        };
+        createConicGradient: (startAngle: number, x: number, y: number) => CanvasGradient;
+        createLinearGradient: (x0: number, y0: number, x1: number, y1: number) => CanvasGradient;
+        createPattern: (image: CanvasImageSource, repetition: string | null) => CanvasPattern | null;
+        createRadialGradient: (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number) => CanvasGradient;
+        filter: string;
+        createImageData: {
+            (sw: number, sh: number, settings?: ImageDataSettings): ImageData;
+            (imagedata: ImageData): ImageData;
+        };
+        getImageData: (sx: number, sy: number, sw: number, sh: number, settings?: ImageDataSettings) => ImageData;
+        putImageData: {
+            (imagedata: ImageData, dx: number, dy: number): void;
+            (imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;
+        };
+        imageSmoothingEnabled: boolean;
+        imageSmoothingQuality: ImageSmoothingQuality;
+        arc: (x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean) => void;
+        arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;
+        bezierCurveTo: (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;
+        closePath: () => void;
+        ellipse: (x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean) => void;
+        lineTo: (x: number, y: number) => void;
+        moveTo: (x: number, y: number) => void;
+        quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;
+        rect: (x: number, y: number, w: number, h: number) => void;
+        roundRect: (x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]) => void;
+        lineCap: CanvasLineCap;
+        lineDashOffset: number;
+        lineJoin: CanvasLineJoin;
+        lineWidth: number;
+        miterLimit: number;
+        getLineDash: () => number[];
+        setLineDash: (segments: number[]) => void;
+        clearRect: (x: number, y: number, w: number, h: number) => void;
+        fillRect: (x: number, y: number, w: number, h: number) => void;
+        strokeRect: (x: number, y: number, w: number, h: number) => void;
+        shadowBlur: number;
+        shadowColor: string;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        isContextLost: () => boolean;
+        reset: () => void;
+        restore: () => void;
+        save: () => void;
+        fillText: (text: string, x: number, y: number, maxWidth?: number) => void;
+        measureText: (text: string) => TextMetrics;
+        strokeText: (text: string, x: number, y: number, maxWidth?: number) => void;
+        direction: CanvasDirection;
+        font: string;
+        fontKerning: CanvasFontKerning;
+        fontStretch: CanvasFontStretch;
+        fontVariantCaps: CanvasFontVariantCaps;
+        letterSpacing: string;
+        textAlign: CanvasTextAlign;
+        textBaseline: CanvasTextBaseline;
+        textRendering: CanvasTextRendering;
+        wordSpacing: string;
+        getTransform: () => DOMMatrix;
+        resetTransform: () => void;
+        rotate: (angle: number) => void;
+        scale: (x: number, y: number) => void;
+        setTransform: {
+            (a: number, b: number, c: number, d: number, e: number, f: number): void;
+            (transform?: DOMMatrix2DInit): void;
+        };
+        transform: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+        translate: (x: number, y: number) => void;
+        drawFocusIfNeeded: {
+            (element: Element): void;
+            (path: Path2D, element: Element): void;
+        };
     } | null>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<globalThis.ExtractPropTypes<{
     width: {
@@ -406,6 +529,6 @@ type: NumberConstructor;
     };
-}>>, {
+}>> & Readonly<{}>, {
     width: number;
     height: number;
-}, {}>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
@@ -412,0 +535,0 @@ declare const PalettePlugin: {

package.json

 {
   "name": "@magic-color/vue",
   "type": "module",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Magic color vue component.",
@@ -41,6 +41,6 @@ "author": "Chris <[e-mail]>",
   "dependencies": {
-    "magic-color": "1.2.2"
+    "magic-color": "1.3.0"
   },
   "devDependencies": {
-    "vue": "^3.4.35"
+    "vue": "^3.5.11"
   },
@@ -47,0 +47,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64664

increased by26.39%

Lines of code

1244

increased by11.07%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@magic-color/core@1.3.0(transitive)

• + Addedmagic-color@1.3.0(transitive)

• - Removed@magic-color/core@1.2.2(transitive)

• - Removedchroma-js@2.6.0(transitive)

• - Removedmagic-color@1.2.2(transitive)

• Updatedmagic-color@1.3.0