@sdata/web-vue 1.7.0 → 1.8.0

package/es/color-picker/index.d.ts

@@ -3,40 +3,55 @@ import type { SDOptions } from '../_utils/types';
 import _ColorPicker from './color-picker';
 declare const ColorPicker: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        borderless: BooleanConstructor;
+        clearable: BooleanConstructor;
+        colorModes: {
+            type: import("vue").PropType<import("./interface").ColorModes>;
+            default: () => string[];
+        };
+        enableMultipleGradient: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        value: StringConstructor;
         modelValue: StringConstructor;
         defaultValue: {
             type: StringConstructor;
+            default: string;
         };
         format: {
-            type: import("vue").PropType<"hex" | "rgb">;
+            type: import("vue").PropType<import("./interface").ColorFormat | import("./interface").LegacyFormat>;
+            default: string;
         };
         size: {
-            type: import("vue").PropType<import("..").Size>;
+            type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
             default: string;
         };
-        showText: {
+        enableAlpha: BooleanConstructor;
+        showPrimaryColorPreview: {
             type: BooleanConstructor;
             default: boolean;
         };
-        showHistory: {
-            type: BooleanConstructor;
-            default: boolean;
+        inputProps: {
+            type: import("vue").PropType<Record<string, unknown>>;
         };
-        showPreset: {
-            type: BooleanConstructor;
-            default: boolean;
+        recentColors: {
+            type: import("vue").PropType<import("./interface").RecentColorsValue>;
+            default: undefined;
         };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
+        defaultRecentColors: {
+            type: import("vue").PropType<import("./interface").RecentColorsValue>;
+            default: () => never[];
         };
-        disabledAlpha: {
-            type: BooleanConstructor;
-            default: boolean;
+        swatchColors: {
+            type: import("vue").PropType<string[] | null>;
+            default: undefined;
         };
-        hideTrigger: {
+        disabled: {
             type: BooleanConstructor;
+            default: boolean;
         };
+        hideTrigger: BooleanConstructor;
         triggerProps: {
             type: import("vue").PropType<Partial<import("..").TriggerProps>>;
         };
@@ -45,25 +60,63 @@ declare const ColorPicker: {
         };
         presetColors: {
             type: import("vue").PropType<string[]>;
-            default: () => string[];
+        };
+        showText: BooleanConstructor;
+        showHistory: BooleanConstructor;
+        showPreset: BooleanConstructor;
+        disabledAlpha: BooleanConstructor;
+        selectInputProps: {
+            type: import("vue").PropType<Record<string, unknown>>;
         };
     }>> & Readonly<{
-        onChange?: ((_value: string) => any) | undefined;
+        onChange?: ((_value: string, _context: {
+            color: import("./interface").ColorObject;
+            trigger: import("./interface").ColorPickerChangeTrigger;
+        }) => any) | undefined;
+        onClear?: ((_context: {
+            e: MouseEvent;
+        }) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+        "onUpdate:value"?: ((_value: string) => any) | undefined;
         "onPopup-visible-change"?: ((_visible: boolean, _value: string) => any) | undefined;
+        "onPalette-bar-change"?: ((_context: {
+            color: import("./interface").ColorObject;
+        }) => any) | undefined;
+        "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:modelValue': (_value: string) => true;
-        change: (_value: string) => true;
+        'update:value': (_value: string) => true;
+        change: (_value: string, _context: {
+            color: import("./interface").ColorObject;
+            trigger: import("./interface").ColorPickerChangeTrigger;
+        }) => true;
         'popup-visible-change': (_visible: boolean, _value: string) => true;
+        clear: (_context: {
+            e: MouseEvent;
+        }) => true;
+        'palette-bar-change': (_context: {
+            color: import("./interface").ColorObject;
+        }) => true;
+        'recent-colors-change': (_value: string[]) => true;
     }, import("vue").PublicProps, {
         size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        disabledAlpha: boolean;
+        defaultValue: string;
+        enableAlpha: boolean;
+        colorModes: import("./interface").ColorModes;
+        enableMultipleGradient: boolean;
+        showPrimaryColorPreview: boolean;
+        format: import("./interface").ColorFormat | import("./interface").LegacyFormat;
+        recentColors: import("./interface").RecentColorsValue;
+        swatchColors: string[] | null;
+        borderless: boolean;
+        clearable: boolean;
+        hideTrigger: boolean;
+        showText: boolean;
         showHistory: boolean;
         showPreset: boolean;
-        presetColors: string[];
-        showText: boolean;
-        hideTrigger: boolean;
+        disabledAlpha: boolean;
+        defaultRecentColors: import("./interface").RecentColorsValue;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -72,40 +125,55 @@ declare const ColorPicker: {
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
+        borderless: BooleanConstructor;
+        clearable: BooleanConstructor;
+        colorModes: {
+            type: import("vue").PropType<import("./interface").ColorModes>;
+            default: () => string[];
+        };
+        enableMultipleGradient: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        value: StringConstructor;
         modelValue: StringConstructor;
         defaultValue: {
             type: StringConstructor;
+            default: string;
         };
         format: {
-            type: import("vue").PropType<"hex" | "rgb">;
+            type: import("vue").PropType<import("./interface").ColorFormat | import("./interface").LegacyFormat>;
+            default: string;
         };
         size: {
-            type: import("vue").PropType<import("..").Size>;
+            type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
             default: string;
         };
-        showText: {
+        enableAlpha: BooleanConstructor;
+        showPrimaryColorPreview: {
             type: BooleanConstructor;
             default: boolean;
         };
-        showHistory: {
-            type: BooleanConstructor;
-            default: boolean;
+        inputProps: {
+            type: import("vue").PropType<Record<string, unknown>>;
         };
-        showPreset: {
-            type: BooleanConstructor;
-            default: boolean;
+        recentColors: {
+            type: import("vue").PropType<import("./interface").RecentColorsValue>;
+            default: undefined;
         };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
+        defaultRecentColors: {
+            type: import("vue").PropType<import("./interface").RecentColorsValue>;
+            default: () => never[];
         };
-        disabledAlpha: {
-            type: BooleanConstructor;
-            default: boolean;
+        swatchColors: {
+            type: import("vue").PropType<string[] | null>;
+            default: undefined;
         };
-        hideTrigger: {
+        disabled: {
             type: BooleanConstructor;
+            default: boolean;
         };
+        hideTrigger: BooleanConstructor;
         triggerProps: {
             type: import("vue").PropType<Partial<import("..").TriggerProps>>;
         };
@@ -114,60 +182,102 @@ declare const ColorPicker: {
         };
         presetColors: {
             type: import("vue").PropType<string[]>;
-            default: () => string[];
+        };
+        showText: BooleanConstructor;
+        showHistory: BooleanConstructor;
+        showPreset: BooleanConstructor;
+        disabledAlpha: BooleanConstructor;
+        selectInputProps: {
+            type: import("vue").PropType<Record<string, unknown>>;
         };
     }>> & Readonly<{
-        onChange?: ((_value: string) => any) | undefined;
+        onChange?: ((_value: string, _context: {
+            color: import("./interface").ColorObject;
+            trigger: import("./interface").ColorPickerChangeTrigger;
+        }) => any) | undefined;
+        onClear?: ((_context: {
+            e: MouseEvent;
+        }) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+        "onUpdate:value"?: ((_value: string) => any) | undefined;
         "onPopup-visible-change"?: ((_visible: boolean, _value: string) => any) | undefined;
+        "onPalette-bar-change"?: ((_context: {
+            color: import("./interface").ColorObject;
+        }) => any) | undefined;
+        "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        disabledAlpha: boolean;
+        defaultValue: string;
+        enableAlpha: boolean;
+        colorModes: import("./interface").ColorModes;
+        enableMultipleGradient: boolean;
+        showPrimaryColorPreview: boolean;
+        format: import("./interface").ColorFormat | import("./interface").LegacyFormat;
+        recentColors: import("./interface").RecentColorsValue;
+        swatchColors: string[] | null;
+        borderless: boolean;
+        clearable: boolean;
+        hideTrigger: boolean;
+        showText: boolean;
         showHistory: boolean;
         showPreset: boolean;
-        presetColors: string[];
-        showText: boolean;
-        hideTrigger: boolean;
+        disabledAlpha: boolean;
+        defaultRecentColors: import("./interface").RecentColorsValue;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    borderless: BooleanConstructor;
+    clearable: BooleanConstructor;
+    colorModes: {
+        type: import("vue").PropType<import("./interface").ColorModes>;
+        default: () => string[];
+    };
+    enableMultipleGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: StringConstructor;
     modelValue: StringConstructor;
     defaultValue: {
         type: StringConstructor;
+        default: string;
     };
     format: {
-        type: import("vue").PropType<"hex" | "rgb">;
+        type: import("vue").PropType<import("./interface").ColorFormat | import("./interface").LegacyFormat>;
+        default: string;
     };
     size: {
-        type: import("vue").PropType<import("..").Size>;
+        type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
         default: string;
     };
-    showText: {
+    enableAlpha: BooleanConstructor;
+    showPrimaryColorPreview: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showHistory: {
-        type: BooleanConstructor;
-        default: boolean;
+    inputProps: {
+        type: import("vue").PropType<Record<string, unknown>>;
     };
-    showPreset: {
-        type: BooleanConstructor;
-        default: boolean;
+    recentColors: {
+        type: import("vue").PropType<import("./interface").RecentColorsValue>;
+        default: undefined;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
+    defaultRecentColors: {
+        type: import("vue").PropType<import("./interface").RecentColorsValue>;
+        default: () => never[];
     };
-    disabledAlpha: {
-        type: BooleanConstructor;
-        default: boolean;
+    swatchColors: {
+        type: import("vue").PropType<string[] | null>;
+        default: undefined;
     };
-    hideTrigger: {
+    disabled: {
         type: BooleanConstructor;
+        default: boolean;
     };
+    hideTrigger: BooleanConstructor;
     triggerProps: {
         type: import("vue").PropType<Partial<import("..").TriggerProps>>;
     };
@@ -176,28 +286,66 @@ declare const ColorPicker: {
     };
     presetColors: {
         type: import("vue").PropType<string[]>;
-        default: () => string[];
+    };
+    showText: BooleanConstructor;
+    showHistory: BooleanConstructor;
+    showPreset: BooleanConstructor;
+    disabledAlpha: BooleanConstructor;
+    selectInputProps: {
+        type: import("vue").PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    onChange?: ((_value: string) => any) | undefined;
+    onChange?: ((_value: string, _context: {
+        color: import("./interface").ColorObject;
+        trigger: import("./interface").ColorPickerChangeTrigger;
+    }) => any) | undefined;
+    onClear?: ((_context: {
+        e: MouseEvent;
+    }) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
     "onPopup-visible-change"?: ((_visible: boolean, _value: string) => any) | undefined;
+    "onPalette-bar-change"?: ((_context: {
+        color: import("./interface").ColorObject;
+    }) => any) | undefined;
+    "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (_value: string) => true;
-    change: (_value: string) => true;
+    'update:value': (_value: string) => true;
+    change: (_value: string, _context: {
+        color: import("./interface").ColorObject;
+        trigger: import("./interface").ColorPickerChangeTrigger;
+    }) => true;
     'popup-visible-change': (_visible: boolean, _value: string) => true;
+    clear: (_context: {
+        e: MouseEvent;
+    }) => true;
+    'palette-bar-change': (_context: {
+        color: import("./interface").ColorObject;
+    }) => true;
+    'recent-colors-change': (_value: string[]) => true;
 }, string, {
     size: "mini" | "small" | "medium" | "large";
     disabled: boolean;
-    disabledAlpha: boolean;
+    defaultValue: string;
+    enableAlpha: boolean;
+    colorModes: import("./interface").ColorModes;
+    enableMultipleGradient: boolean;
+    showPrimaryColorPreview: boolean;
+    format: import("./interface").ColorFormat | import("./interface").LegacyFormat;
+    recentColors: import("./interface").RecentColorsValue;
+    swatchColors: string[] | null;
+    borderless: boolean;
+    clearable: boolean;
+    hideTrigger: boolean;
+    showText: boolean;
     showHistory: boolean;
     showPreset: boolean;
-    presetColors: string[];
-    showText: boolean;
-    hideTrigger: boolean;
+    disabledAlpha: boolean;
+    defaultRecentColors: import("./interface").RecentColorsValue;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
 };
-export type { RGB, HSV, Color } from './interface';
+export type { RGB, HSV, HSVA, Color, ColorMode, ColorModes, ColorFormat, ColorObject, ColorValueState, ColorPickerChangeTrigger, GradientColorPoint, RecentColorsValue, } from './interface';
 export type ColorPickerInstance = InstanceType<typeof _ColorPicker>;
 export default ColorPicker;

package/es/color-picker/interface.d.ts

@@ -8,8 +8,49 @@ export interface HSV {
     s: number;
     v: number;
 }
+export interface HSVA extends HSV {
+    a: number;
+}
+export interface GradientColorPoint {
+    id: string;
+    left: number;
+    color: string;
+    hsva: HSVA;
+}
+export type ColorMode = 'monochrome' | 'linear-gradient';
+export interface ColorValueState {
+    mode: ColorMode;
+    hsva: HSVA;
+    gradientDegree: number;
+    gradientSelectedId: string;
+    gradientColors: GradientColorPoint[];
+}
 export interface Color {
     hsv: HSV;
     rgb: RGB;
     hex: string;
 }
+export type LegacyFormat = 'hex' | 'rgb';
+export type ColorFormat = 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS';
+export type RecentColorsValue = string[] | boolean | null;
+export type ColorModes = ColorMode[];
+export type ColorPickerChangeTrigger = 'palette-saturation-brightness' | 'palette-saturation' | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' | 'input' | 'preset' | 'recent' | 'clear';
+export interface ColorObject {
+    alpha: number;
+    css: string;
+    hex: string;
+    hex8: string;
+    hsl: string;
+    hsla: string;
+    hsv: string;
+    hsva: string;
+    rgb: string;
+    rgba: string;
+    saturation: number;
+    value: number;
+    isGradient: boolean;
+    linearGradient?: string;
+    red: number;
+    green: number;
+    blue: number;
+}

package/es/color-picker/palette.js

@@ -1,6 +1,6 @@
 import { getPrefixCls } from "../_utils/global-config.js";
-import { hsvToRgb } from "../_utils/color.js";
 import { useControlBlock } from "./hooks/use-control-block.js";
+import { hsvToRgb } from "../_utils/color.js";
 import { computed, createVNode, defineComponent } from "vue";
 //#region components/color-picker/palette.tsx
 var palette_default = /* @__PURE__ */ defineComponent({

package/es/color-picker/panel.d.ts

@@ -1,47 +1,86 @@
 import { PropType } from 'vue';
-import { Color, HSV } from './interface';
+import { ColorFormat, ColorModes, ColorObject, ColorPickerChangeTrigger, RecentColorsValue } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    color: {
-        type: PropType<Color>;
-        required: true;
+    value: {
+        type: StringConstructor;
+        default: string;
     };
-    alpha: {
-        type: NumberConstructor;
-        required: true;
+    colorModes: {
+        type: PropType<ColorModes>;
+        default: () => string[];
+    };
+    enableMultipleGradient: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    colorString: StringConstructor;
     disabled: BooleanConstructor;
-    disabledAlpha: BooleanConstructor;
-    showHistory: BooleanConstructor;
-    showPreset: BooleanConstructor;
-    format: PropType<"hex" | "rgb">;
-    historyColors: PropType<string[]>;
-    presetColors: PropType<string[]>;
-    onAlphaChange: PropType<(alpha: number) => void>;
-    onHsvChange: PropType<(hsv: HSV) => void>;
+    enableAlpha: BooleanConstructor;
+    showPrimaryColorPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    format: {
+        type: PropType<ColorFormat>;
+        default: string;
+    };
+    recentColors: {
+        type: PropType<RecentColorsValue>;
+        default: () => never[];
+    };
+    swatchColors: {
+        type: PropType<string[] | null>;
+        default: () => string[];
+    };
+    onChange: PropType<(value: string, trigger: ColorPickerChangeTrigger) => void>;
+    onRecentColorsChange: PropType<(value: string[]) => void>;
+    onPaletteBarChange: PropType<(context: {
+        color: ColorObject;
+    }) => void>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    color: {
-        type: PropType<Color>;
-        required: true;
+    value: {
+        type: StringConstructor;
+        default: string;
     };
-    alpha: {
-        type: NumberConstructor;
-        required: true;
+    colorModes: {
+        type: PropType<ColorModes>;
+        default: () => string[];
+    };
+    enableMultipleGradient: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    colorString: StringConstructor;
     disabled: BooleanConstructor;
-    disabledAlpha: BooleanConstructor;
-    showHistory: BooleanConstructor;
-    showPreset: BooleanConstructor;
-    format: PropType<"hex" | "rgb">;
-    historyColors: PropType<string[]>;
-    presetColors: PropType<string[]>;
-    onAlphaChange: PropType<(alpha: number) => void>;
-    onHsvChange: PropType<(hsv: HSV) => void>;
+    enableAlpha: BooleanConstructor;
+    showPrimaryColorPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    format: {
+        type: PropType<ColorFormat>;
+        default: string;
+    };
+    recentColors: {
+        type: PropType<RecentColorsValue>;
+        default: () => never[];
+    };
+    swatchColors: {
+        type: PropType<string[] | null>;
+        default: () => string[];
+    };
+    onChange: PropType<(value: string, trigger: ColorPickerChangeTrigger) => void>;
+    onRecentColorsChange: PropType<(value: string[]) => void>;
+    onPaletteBarChange: PropType<(context: {
+        color: ColorObject;
+    }) => void>;
 }>> & Readonly<{}>, {
     disabled: boolean;
-    disabledAlpha: boolean;
-    showHistory: boolean;
-    showPreset: boolean;
+    value: string;
+    enableAlpha: boolean;
+    colorModes: ColorModes;
+    enableMultipleGradient: boolean;
+    showPrimaryColorPreview: boolean;
+    format: ColorFormat;
+    recentColors: RecentColorsValue;
+    swatchColors: string[] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;