naive-ui 2.23.2 → 2.24.0

package/lib/carousel/src/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextIndex = exports.getPrevIndex = exports.getRealIndex = exports.getDisplayIndex = exports.resolveSpeed = exports.clampValue = exports.calculateSize = exports.isTouchEvent = void 0;
+function isTouchEvent(e) {
+    return window.TouchEvent && e instanceof window.TouchEvent;
+}
+exports.isTouchEvent = isTouchEvent;
+function calculateSize(element, innerOnly) {
+    let width = element.clientWidth;
+    let height = element.clientHeight;
+    if (innerOnly) {
+        const style = getComputedStyle(element);
+        width =
+            width -
+                parseFloat(style.getPropertyValue('padding-left')) -
+                parseFloat(style.getPropertyValue('padding-right'));
+        height =
+            height -
+                parseFloat(style.getPropertyValue('padding-top')) -
+                parseFloat(style.getPropertyValue('padding-bottom'));
+        return { width, height };
+    }
+    return { width, height };
+}
+exports.calculateSize = calculateSize;
+function clampValue(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+exports.clampValue = clampValue;
+function resolveSpeed(value) {
+    if (value === undefined)
+        return 0;
+    if (typeof value === 'number')
+        return value;
+    const timeRE = /^((\d+)?\.?\d+?)(ms|s)?$/;
+    const match = value.match(timeRE);
+    if (match) {
+        const [, number, , unit = 'ms'] = match;
+        return Number(number) * (unit === 'ms' ? 1 : 1000);
+    }
+    return 0;
+}
+exports.resolveSpeed = resolveSpeed;
+function getDisplayIndex(current, length, duplicatedable) {
+    return !duplicatedable
+        ? current
+        : current === 0
+            ? length - 3
+            : current === length - 1
+                ? 0
+                : current - 1;
+}
+exports.getDisplayIndex = getDisplayIndex;
+function getRealIndex(current, duplicatedable) {
+    return !duplicatedable ? current : current + 1;
+}
+exports.getRealIndex = getRealIndex;
+function getPrevIndex(current, length, duplicatedable) {
+    if (current < 0)
+        return null;
+    return current === 0 ? (duplicatedable ? length - 1 : null) : current - 1;
+}
+exports.getPrevIndex = getPrevIndex;
+function getNextIndex(current, length, duplicatedable) {
+    if (current > length - 1)
+        return null;
+    return current === length - 1 ? (duplicatedable ? 0 : null) : current + 1;
+}
+exports.getNextIndex = getNextIndex;

package/lib/carousel/styles/light.d.ts

@@ -4,6 +4,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     dotSize: string;
     dotColor: string;
     dotColorActive: string;
+    dotColorFocus: string;
+    dotLineWidth: string;
+    dotLineWidthActive: string;
     arrowColor: string;
 };
 export declare type CarouselThemeVars = ReturnType<typeof self>;

package/lib/carousel/styles/light.js

@@ -5,9 +5,12 @@ const common_1 = require("../../_styles/common");
 const self = (vars) => {
     return {
         dotSize: '8px',
-        dotColor: 'rgba(255, 255, 255, .3)',
+        dotColor: 'rgba(255, 255, 255, .25)',
         dotColorActive: 'rgba(255, 255, 255, 1)',
-        arrowColor: 'rgba(255, 255, 255, .6)'
+        dotColorFocus: 'rgba(255, 255, 255, .5)',
+        dotLineWidth: '16px',
+        dotLineWidthActive: '24px',
+        arrowColor: 'rgba(255, 255, 255, .5)'
     };
 };
 exports.self = self;

package/lib/cascader/src/Cascader.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeChild } from 'vue';
 import { CheckStrategy } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { SelectBaseOption } from '../../select/src/interface';
@@ -80,6 +80,7 @@ declare const cascaderProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly renderLabel: PropType<(option: CascaderOption, checked: boolean) => VNodeChild>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
@@ -714,6 +715,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly renderLabel: PropType<(option: CascaderOption, checked: boolean) => VNodeChild>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
@@ -1312,7 +1314,7 @@ declare const _default: import("vue").DefineComponent<{
         value: import("treemate").Key;
     }[]>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
-    menuModel: import("vue").ComputedRef<import("treemate").TreeNode<CascaderOption, CascaderOption, CascaderOption>[][]>;
+    menuModel: import("vue").ComputedRef<any>;
     handleMenuTabout: () => void;
     handleMenuFocus: (e: FocusEvent) => void;
     handleMenuBlur: (e: FocusEvent) => void;
@@ -1720,6 +1722,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly valueField?: unknown;
     readonly labelField?: unknown;
     readonly childrenField?: unknown;
+    readonly renderLabel?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
     readonly 'onUpdate:show'?: unknown;
@@ -2310,6 +2313,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     bordered?: boolean | undefined;
+    renderLabel?: ((option: CascaderOption, checked: boolean) => VNodeChild) | undefined;
     "onUpdate:show"?: MaybeArray<(show: Boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(show: Boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;

package/lib/cascader/src/Cascader.js

@@ -62,7 +62,7 @@ const cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, childrenField: {
         type: String,
         default: 'children'
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
+    }, renderLabel: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
     // deprecated
     onChange: [Function, Array] });
 // TODO refactor cascader menu keyboard scroll (use virtual list)
@@ -658,6 +658,7 @@ exports.default = (0, vue_1.defineComponent)({
             optionHeightRef,
             localeRef,
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
+            renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             syncCascaderMenuPosition,
             syncSelectMenuPosition,
             updateKeyboardKey,

package/lib/cascader/src/CascaderOption.d.ts

@@ -368,6 +368,7 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateValue: () => void;
     mergedHandleMouseEnter: import("vue").ComputedRef<(() => void) | undefined>;
     mergedHandleMouseMove: import("vue").ComputedRef<(() => void) | undefined>;
+    renderLabel: import("vue").Ref<((option: import("./interface").CascaderOption, checked: boolean) => import("vue").VNodeChild) | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     tmNode?: unknown;
 } & {

package/lib/cascader/src/CascaderOption.js

@@ -16,7 +16,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck
+        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck, renderLabelRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const valueRef = (0, vue_1.computed)(() => props.tmNode.key);
@@ -153,11 +153,12 @@ exports.default = (0, vue_1.defineComponent)({
             handleClick,
             handleCheckboxUpdateValue,
             mergedHandleMouseEnter: mergedHandleMouseEnterRef,
-            mergedHandleMouseMove: mergedHandleMouseMoveRef
+            mergedHandleMouseMove: mergedHandleMouseMoveRef,
+            renderLabel: renderLabelRef
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, renderLabel } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-cascader-option`,
                 {
@@ -168,7 +169,9 @@ exports.default = (0, vue_1.defineComponent)({
             ], onMouseenter: this.mergedHandleMouseEnter, onMousemove: this.mergedHandleMouseMove, onClick: this.handleClick },
             this.showCheckbox ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option__prefix` },
                 (0, vue_1.h)(checkbox_1.NCheckbox, { focusable: false, "data-checkbox": true, disabled: this.disabled, checked: this.checked, indeterminate: this.indeterminate, theme: this.mergedTheme.peers.Checkbox, themeOverrides: this.mergedTheme.peerOverrides.Checkbox, onUpdateChecked: this.handleCheckboxUpdateValue }))) : null,
-            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-cascader-option__label` }, this.label),
+            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-cascader-option__label` }, renderLabel
+                ? renderLabel(this.tmNode.rawNode, this.checked)
+                : this.label),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option__suffix` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option-icon-placeholder` }, !this.isLeaf ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, scale: 0.85, strokeWidth: 24, show: this.isLoading, class: `${mergedClsPrefix}-cascader-option-icon` }, {
                     default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, key: "arrow", class: `${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow` }, {

package/lib/cascader/src/interface.d.ts

@@ -2,7 +2,7 @@ import { CheckStrategy, TreeNode } from 'treemate';
 import type { MergedTheme } from '../../_mixins';
 import type { NLocale } from '../../locales';
 import type { CascaderTheme } from '../styles';
-import { InjectionKey, Ref } from 'vue';
+import { InjectionKey, Ref, VNodeChild } from 'vue';
 export declare type ValueAtom = string | number;
 export declare type Value = ValueAtom | ValueAtom[];
 export declare type Key = ValueAtom;
@@ -52,6 +52,7 @@ export interface CascaderInjection {
     closeMenu: (returnFocus?: boolean) => void;
     handleSelectMenuClickOutside: (e: MouseEvent) => void;
     handleCascaderMenuClickOutside: (e: MouseEvent) => void;
+    renderLabelRef: Ref<((option: CascaderOption, checked: boolean) => VNodeChild) | undefined>;
 }
 export interface CascaderSubmenuInstance {
     scroll: (index: number, elSize: number) => void;

package/lib/checkbox/src/styles/index.cssr.js

@@ -58,7 +58,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
   backgroundColor: 'var(--n-color-checked)'
 }, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 (0, cssr_1.c)('.check-icon', `
- width: 100%;
  opacity: 1;
  transform: scale(1);
  `)])])]), (0, cssr_1.cM)('indeterminate', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon', `
@@ -123,6 +122,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  top: 1px;
  bottom: 1px;
  `, [(0, cssr_1.c)('.check-icon, .line-icon', `
+ width: 100%;
  fill: var(--n-check-mark-color);
  opacity: 0;
  transform: scale(0.5);

package/lib/code/src/Code.d.ts

@@ -14,6 +14,7 @@ declare const codeProps: {
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -143,6 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs?: unknown;
     uri?: unknown;
     inline?: unknown;
+    wordWrap?: unknown;
     internalFontSize?: unknown;
     internalNoHighlight?: unknown;
     theme?: unknown;
@@ -151,6 +154,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     inline: boolean;
     trim: boolean;
+    wordWrap: boolean;
     code: string;
     uri: boolean;
     internalNoHighlight: boolean;
@@ -203,6 +207,7 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     inline: boolean;
     trim: boolean;
+    wordWrap: boolean;
     code: string;
     uri: boolean;
     internalNoHighlight: boolean;

package/lib/code/src/Code.js

@@ -13,7 +13,7 @@ const codeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { l
     }, trim: {
         type: Boolean,
         default: true
-    }, hljs: Object, uri: Boolean, inline: Boolean, 
+    }, hljs: Object, uri: Boolean, inline: Boolean, wordWrap: Boolean, 
     // In n-log, we only need to mount code's style for highlight
     internalFontSize: Number, internalNoHighlight: Boolean });
 exports.default = (0, vue_1.defineComponent)({
@@ -104,7 +104,10 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("code", { class: `${mergedClsPrefix}-code`, style: this.cssVars, ref: "codeRef" }, this.$slots));
+        const { mergedClsPrefix, wordWrap } = this;
+        return ((0, vue_1.h)("code", { class: [
+                `${mergedClsPrefix}-code`,
+                wordWrap && `${mergedClsPrefix}-code--word-wrap`
+            ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }
 });

package/lib/code/src/styles/index.cssr.js

@@ -24,7 +24,7 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
  font-size: var(--n-font-size);
  font-family: var(--n-font-family);
- `, [(0, cssr_1.c)('pre', `
+ `, [(0, cssr_1.cM)('word-wrap', [(0, cssr_1.c)('pre', 'white-space: pre-wrap;')]), (0, cssr_1.c)('pre', `
  margin: 0;
  font-family: inherit;
  `), (0, cssr_1.c)('[class^=hljs]', `

package/lib/color-picker/src/ColorInputUnit.js

@@ -61,7 +61,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const inputValueRef = (0, vue_1.ref)('');
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const themeRef = (0, vue_1.inject)(ColorPicker_1.colorPickerThemeInjectionKey, null);
+        const { themeRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
         (0, vue_1.watchEffect)(() => {
             inputValueRef.value = getInputString();
         });

package/lib/color-picker/src/ColorPicker.d.ts

@@ -1,10 +1,10 @@
-import { PropType, VNode, InjectionKey, ComputedRef, Ref } from 'vue';
+import { PropType, VNode, InjectionKey, ComputedRef, Ref, Slots } from 'vue';
 import { RGBA, HSLA } from 'seemly';
 import type { ColorPickerTheme } from '../styles';
 import { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ColorPickerMode } from './utils';
-import { OnUpdateValue } from './interface';
+import { OnUpdateValue, RenderLabel } from './interface';
 export declare const colorPickerPanelProps: {
     readonly value: StringConstructor;
     readonly show: {
@@ -18,7 +18,7 @@ export declare const colorPickerPanelProps: {
     readonly defaultValue: PropType<string | null>;
     readonly modes: {
         readonly type: PropType<ColorPickerMode[]>;
-        readonly default: readonly ["rgb", "hex", "hsl"];
+        readonly default: () => string[];
     };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -36,6 +36,7 @@ export declare const colorPickerPanelProps: {
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
     readonly size: PropType<"small" | "medium" | "large">;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -883,7 +884,11 @@ export declare const colorPickerPanelProps: {
     }>>>;
 };
 export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
-export declare const colorPickerThemeInjectionKey: InjectionKey<ComputedRef<MergedTheme<ColorPickerTheme>>>;
+export declare const colorPickerInjectionKey: InjectionKey<{
+    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
+    colorPickerSlots: Slots;
+    renderLabelRef: Ref<RenderLabel | undefined>;
+}>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly show: {
@@ -897,7 +902,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue: PropType<string | null>;
     readonly modes: {
         readonly type: PropType<ColorPickerMode[]>;
-        readonly default: readonly ["rgb", "hex", "hsl"];
+        readonly default: () => string[];
     };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -915,6 +920,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
     readonly size: PropType<"small" | "medium" | "large">;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -1798,6 +1804,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly actions?: unknown;
     readonly internalActions?: unknown;
     readonly size?: unknown;
+    readonly renderLabel?: unknown;
     readonly onComplete?: unknown;
     readonly 'onUpdate:show'?: unknown;
     readonly onUpdateShow?: unknown;
@@ -2657,6 +2664,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
     }>> | undefined;
+    renderLabel?: RenderLabel | undefined;
     "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
     defaultValue?: string | null | undefined;

package/lib/color-picker/src/ColorPicker.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorPickerThemeInjectionKey = exports.colorPickerPanelProps = void 0;
+exports.colorPickerInjectionKey = exports.colorPickerPanelProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -12,16 +12,16 @@ const vdirs_1 = require("vdirs");
 const styles_1 = require("../styles");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const button_1 = require("../../button");
 const HueSlider_1 = __importDefault(require("./HueSlider"));
 const AlphaSlider_1 = __importDefault(require("./AlphaSlider"));
 const Pallete_1 = __importDefault(require("./Pallete"));
 const ColorInput_1 = __importDefault(require("./ColorInput"));
 const ColorPickerTrigger_1 = __importDefault(require("./ColorPickerTrigger"));
 const utils_1 = require("./utils");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const button_1 = require("../../button");
 const ColorPickerSwatches_1 = __importDefault(require("./ColorPickerSwatches"));
 const ColorPreview_1 = __importDefault(require("./ColorPreview"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
@@ -31,15 +31,15 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
     }, defaultValue: String, modes: {
         type: Array,
         // no hsva by default since browser doesn't support it
-        default: ['rgb', 'hex', 'hsl']
+        default: () => ['rgb', 'hex', 'hsl']
     }, to: _utils_1.useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
     }, showPreview: Boolean, swatches: Array, actions: {
         type: Array,
         default: null
-    }, internalActions: Array, size: String, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
-exports.colorPickerThemeInjectionKey = Symbol('colorPickerThemeInjection');
+    }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+exports.colorPickerInjectionKey = Symbol('colorPickerThemeInjection');
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPicker',
     props: exports.colorPickerPanelProps,
@@ -51,7 +51,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { localeRef } = (0, _mixins_1.useLocale)('global');
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('ColorPicker', 'ColorPicker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
-        (0, vue_1.provide)(exports.colorPickerThemeInjectionKey, themeRef);
+        (0, vue_1.provide)(exports.colorPickerInjectionKey, {
+            themeRef,
+            renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
+            colorPickerSlots: slots
+        });
         const uncontrolledShowRef = (0, vue_1.ref)(props.defaultShow);
         const mergedShowRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'show'), uncontrolledShowRef);
         function doUpdateShow(value) {
@@ -70,7 +74,8 @@ exports.default = (0, vue_1.defineComponent)({
         const undoStackRef = (0, vue_1.ref)([mergedValueRef.value]);
         const valueIndexRef = (0, vue_1.ref)(0);
         const valueModeRef = (0, vue_1.computed)(() => (0, utils_1.getModeFromValue)(mergedValueRef.value));
-        const displayedModeRef = (0, vue_1.ref)((0, utils_1.getModeFromValue)(mergedValueRef.value) || 'rgb');
+        const { modes } = props;
+        const displayedModeRef = (0, vue_1.ref)((0, utils_1.getModeFromValue)(mergedValueRef.value) || modes[0] || 'rgb');
         function handleUpdateDisplayedMode() {
             const { modes } = props;
             const { value: displayedMode } = displayedModeRef;
@@ -395,12 +400,16 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker`, ref: "selfRef", style: this.cssVars },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }))
+                        default: () => ((0, vue_1.h)(ColorPickerTrigger_1.default, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                            label: $slots.label
+                                ? () => (0, vue_1.renderSlot)($slots, 'label')
+                                : undefined
+                        }))
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {

package/lib/color-picker/src/ColorPickerTrigger.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     onClick: PropType<() => void>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
     value?: unknown;
     hsla?: unknown;

package/lib/color-picker/src/ColorPickerTrigger.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const seemly_1 = require("seemly");
 const vue_1 = require("vue");
+const ColorPicker_1 = require("./ColorPicker");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPickerTrigger',
     props: {
@@ -19,21 +20,26 @@ exports.default = (0, vue_1.defineComponent)({
         },
         onClick: Function
     },
-    render() {
-        const { hsla, value, clsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: this.onClick },
-            (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
-                (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-checkboard` }),
-                (0, vue_1.h)("div", { style: {
-                        position: 'absolute',
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        backgroundColor: hsla ? (0, seemly_1.toHslaString)(hsla) : ''
-                    } }),
-                value && hsla ? ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {
-                        color: hsla[2] > 50 || hsla[3] < 0.5 ? 'black' : 'white'
-                    } }, value)) : null)));
+    setup(props) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
+        return () => {
+            const { hsla, value, clsPrefix, onClick } = props;
+            const renderLabel = colorPickerSlots.label || renderLabelRef.value;
+            return ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
+                    (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-checkboard` }),
+                    (0, vue_1.h)("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            backgroundColor: hsla ? (0, seemly_1.toHslaString)(hsla) : ''
+                        } }),
+                    value && hsla ? ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {
+                            color: hsla[2] > 50 || hsla[3] < 0.5 ? 'black' : 'white'
+                        } }, renderLabel ? renderLabel(value) : value)) : null)));
+        };
     }
 });

package/lib/color-picker/src/interface.d.ts

@@ -1,2 +1,4 @@
+import { VNodeChild } from 'vue';
 export declare type OnUpdateValue = (value: string & null) => void;
 export declare type OnUpdateValueImpl = (value: string | null) => void;
+export declare type RenderLabel = (value: string | null) => VNodeChild;

package/lib/color-picker/src/styles/index.cssr.js

@@ -95,6 +95,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  height: 180px;
  position: relative;
  margin-bottom: 8px;
+ cursor: crosshair;
  `, [(0, cssr_1.cE)('layer', `
  position: absolute;
  left: 0;

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -110,6 +110,15 @@ export declare const configProviderProps: {
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null>;
     readonly dateLocale: PropType<NDateLocale | null>;
     readonly namespace: StringConstructor;
@@ -236,6 +245,15 @@ declare const _default: import("vue").DefineComponent<{
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null>;
     readonly dateLocale: PropType<NDateLocale | null>;
     readonly namespace: StringConstructor;
@@ -386,6 +404,15 @@ declare const _default: import("vue").DefineComponent<{
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null | undefined;
     dateLocale?: NDateLocale | null | undefined;
     hljs?: Hljs | undefined;