naive-ui 2.23.2 → 2.24.0

package/es/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/es/carousel/styles/light.js

@@ -2,9 +2,12 @@ import { commonLight } from '../../_styles/common';
 export 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)'
     };
 };
 const carouselLight = {

package/es/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/es/cascader/src/Cascader.js

@@ -57,7 +57,7 @@ const cascaderProps = Object.assign(Object.assign({}, useTheme.props), { to: use
     }, 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)
@@ -653,6 +653,7 @@ export default defineComponent({
             optionHeightRef,
             localeRef,
             labelFieldRef: toRef(props, 'labelField'),
+            renderLabelRef: toRef(props, 'renderLabel'),
             syncCascaderMenuPosition,
             syncSelectMenuPosition,
             updateKeyboardKey,

package/es/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/es/cascader/src/CascaderOption.js

@@ -14,7 +14,7 @@ export default 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
          } = inject(cascaderInjectionKey);
         const valueRef = computed(() => props.tmNode.key);
@@ -151,11 +151,12 @@ export default defineComponent({
             handleClick,
             handleCheckboxUpdateValue,
             mergedHandleMouseEnter: mergedHandleMouseEnterRef,
-            mergedHandleMouseMove: mergedHandleMouseMoveRef
+            mergedHandleMouseMove: mergedHandleMouseMoveRef,
+            renderLabel: renderLabelRef
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, renderLabel } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-cascader-option`,
                 {
@@ -166,7 +167,9 @@ export default defineComponent({
             ], onMouseenter: this.mergedHandleMouseEnter, onMousemove: this.mergedHandleMouseMove, onClick: this.handleClick },
             this.showCheckbox ? (h("div", { class: `${mergedClsPrefix}-cascader-option__prefix` },
                 h(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,
-            h("span", { class: `${mergedClsPrefix}-cascader-option__label` }, this.label),
+            h("span", { class: `${mergedClsPrefix}-cascader-option__label` }, renderLabel
+                ? renderLabel(this.tmNode.rawNode, this.checked)
+                : this.label),
             h("div", { class: `${mergedClsPrefix}-cascader-option__suffix` },
                 h("div", { class: `${mergedClsPrefix}-cascader-option-icon-placeholder` }, !this.isLeaf ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, scale: 0.85, strokeWidth: 24, show: this.isLoading, class: `${mergedClsPrefix}-cascader-option-icon` }, {
                     default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix, key: "arrow", class: `${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow` }, {

package/es/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/es/checkbox/src/styles/index.cssr.js

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

package/es/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/es/code/src/Code.js

@@ -8,7 +8,7 @@ const codeProps = Object.assign(Object.assign({}, useTheme.props), { language: S
     }, 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 });
 export default defineComponent({
@@ -99,7 +99,10 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
-        return (h("code", { class: `${mergedClsPrefix}-code`, style: this.cssVars, ref: "codeRef" }, this.$slots));
+        const { mergedClsPrefix, wordWrap } = this;
+        return (h("code", { class: [
+                `${mergedClsPrefix}-code`,
+                wordWrap && `${mergedClsPrefix}-code--word-wrap`
+            ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }
 });

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

@@ -1,4 +1,4 @@
-import { c, cB } from '../../../_utils/cssr'; // vars:
+import { c, cB, cM } from '../../../_utils/cssr'; // vars:
 // --n-font-size
 // --n-font-family
 // --n-font-weight-strong
@@ -17,7 +17,7 @@ import { c, cB } from '../../../_utils/cssr'; // vars:
 export default c([cB('code', `
  font-size: var(--n-font-size);
  font-family: var(--n-font-family);
- `, [c('pre', `
+ `, [cM('word-wrap', [c('pre', 'white-space: pre-wrap;')]), c('pre', `
  margin: 0;
  font-family: inherit;
  `), c('[class^=hljs]', `

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

@@ -1,6 +1,6 @@
 import { defineComponent, h, inject, ref, watchEffect } from 'vue';
 import { NInput } from '../../input';
-import { colorPickerThemeInjectionKey } from './ColorPicker';
+import { colorPickerInjectionKey } from './ColorPicker';
 // 0 - 255
 function normalizeRgbUnit(value) {
     if (/^\d{1,3}\.?\d*$/.test(value.trim())) {
@@ -59,7 +59,7 @@ export default defineComponent({
     setup(props) {
         const inputValueRef = ref('');
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const themeRef = inject(colorPickerThemeInjectionKey, null);
+        const { themeRef } = inject(colorPickerInjectionKey, null);
         watchEffect(() => {
             inputValueRef.value = getInputString();
         });

package/es/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/es/color-picker/src/ColorPicker.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, toRef, watchEffect, withDirectives, Transition, provide, watch, nextTick } from 'vue';
+import { h, defineComponent, ref, computed, toRef, watchEffect, withDirectives, Transition, provide, watch, nextTick, renderSlot } from 'vue';
 import { hsv2rgb, rgb2hsv, rgba, hsva, hsla, hsl2hsv, hsv2hsl, rgb2hsl, hsl2rgb, toRgbaString, toHsvaString, toHslaString, toHexaString, toHsvString, toRgbString, toHexString, toHslString } from 'seemly';
 import { useIsMounted, useMergedState } from 'vooks';
 import { VBinder, VFollower, VTarget } from 'vueuc';
@@ -6,16 +6,16 @@ import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
 import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
 import { call, createKey, useAdjustedTo } from '../../_utils';
+import { NButton } from '../../button';
 import HueSlider from './HueSlider';
 import AlphaSlider from './AlphaSlider';
 import Pallete from './Pallete';
 import ColorInput from './ColorInput';
 import ColorPickerTrigger from './ColorPickerTrigger';
 import { deriveDefaultValue, getModeFromValue } from './utils';
-import style from './styles/index.cssr';
-import { NButton } from '../../button';
 import ColorPickerSwatches from './ColorPickerSwatches';
 import ColorPreview from './ColorPreview';
+import style from './styles/index.cssr';
 export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
@@ -25,15 +25,15 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
     }, defaultValue: String, modes: {
         type: Array,
         // no hsva by default since browser doesn't support it
-        default: ['rgb', 'hex', 'hsl']
+        default: () => ['rgb', 'hex', 'hsl']
     }, to: 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] });
-export const 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] });
+export const colorPickerInjectionKey = Symbol('colorPickerThemeInjection');
 export default defineComponent({
     name: 'ColorPicker',
     props: colorPickerPanelProps,
@@ -45,7 +45,11 @@ export default defineComponent({
         const { localeRef } = useLocale('global');
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('ColorPicker', 'ColorPicker', style, colorPickerLight, props, mergedClsPrefixRef);
-        provide(colorPickerThemeInjectionKey, themeRef);
+        provide(colorPickerInjectionKey, {
+            themeRef,
+            renderLabelRef: toRef(props, 'renderLabel'),
+            colorPickerSlots: slots
+        });
         const uncontrolledShowRef = ref(props.defaultShow);
         const mergedShowRef = useMergedState(toRef(props, 'show'), uncontrolledShowRef);
         function doUpdateShow(value) {
@@ -64,7 +68,8 @@ export default defineComponent({
         const undoStackRef = ref([mergedValueRef.value]);
         const valueIndexRef = ref(0);
         const valueModeRef = computed(() => getModeFromValue(mergedValueRef.value));
-        const displayedModeRef = ref(getModeFromValue(mergedValueRef.value) || 'rgb');
+        const { modes } = props;
+        const displayedModeRef = ref(getModeFromValue(mergedValueRef.value) || modes[0] || 'rgb');
         function handleUpdateDisplayedMode() {
             const { modes } = props;
             const { value: displayedMode } = displayedModeRef;
@@ -389,12 +394,16 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-color-picker`, ref: "selfRef", style: this.cssVars },
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }))
+                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                            label: $slots.label
+                                ? () => renderSlot($slots, 'label')
+                                : undefined
+                        }))
                     }),
                     h(VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {

package/es/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/es/color-picker/src/ColorPickerTrigger.js

@@ -1,5 +1,6 @@
 import { toHslaString } from 'seemly';
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, inject } from 'vue';
+import { colorPickerInjectionKey } from './ColorPicker';
 export default defineComponent({
     name: 'ColorPickerTrigger',
     props: {
@@ -17,21 +18,26 @@ export default defineComponent({
         },
         onClick: Function
     },
-    render() {
-        const { hsla, value, clsPrefix } = this;
-        return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: this.onClick },
-            h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
-                h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
-                h("div", { style: {
-                        position: 'absolute',
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        backgroundColor: hsla ? toHslaString(hsla) : ''
-                    } }),
-                value && hsla ? (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 } = inject(colorPickerInjectionKey, null);
+        return () => {
+            const { hsla, value, clsPrefix, onClick } = props;
+            const renderLabel = colorPickerSlots.label || renderLabelRef.value;
+            return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+                h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
+                    h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
+                    h("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            backgroundColor: hsla ? toHslaString(hsla) : ''
+                        } }),
+                    value && hsla ? (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/es/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/es/color-picker/src/styles/index.cssr.js

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

package/es/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;

package/es/data-table/src/DataTable.d.ts

@@ -82,31 +82,11 @@ export declare const dataTableProps: {
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -1990,31 +1970,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -6731,7 +6691,6 @@ declare const _default: import("vue").DefineComponent<{
     virtualScroll: boolean;
     remote: boolean;
     pagination: false | PaginationProps;
-    onPageSizeChange: MaybeArray<(pageSize: number) => void> | undefined;
     bottomBordered: boolean | undefined;
     striped: boolean;
     defaultCheckedRowKeys: RowKey[];
@@ -6742,9 +6701,5 @@ declare const _default: import("vue").DefineComponent<{
     childrenKey: string;
     indent: number;
     flexHeight: boolean;
-    onPageChange: MaybeArray<(page: number) => void> | undefined;
-    onSorterChange: MaybeArray<OnUpdateSorter> | undefined;
-    onFiltersChange: MaybeArray<OnUpdateFilters> | undefined;
-    onCheckedRowKeysChange: MaybeArray<OnUpdateCheckedRowKeys> | undefined;
 }>;
 export default _default;