naive-ui 2.24.4 → 2.25.0

package/es/carousel/src/CarouselArrow.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, inject, Fragment } from 'vue';
+import { h, defineComponent, inject } from 'vue';
 import { useConfig } from '../../_mixins';
 import { carouselMethodsInjectionKey } from './interface';
 const backwardIcon = (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
@@ -25,19 +25,16 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix } = this;
-        const isVertical = this.isVertical();
-        return (h(Fragment, null,
+        return (h("div", { class: `${mergedClsPrefix}-carousel__arrow-group` },
             h("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'bottom' : 'right'}`,
-                    this.isNextDisabled() &&
+                    this.isPrevDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.next }, forwardIcon),
+                ], role: "button", onClick: this.prev }, backwardIcon),
             h("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'top' : 'left'}`,
-                    this.isPrevDisabled() &&
+                    this.isNextDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.prev }, backwardIcon)));
+                ], role: "button", onClick: this.next }, forwardIcon)));
     }
 });

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

@@ -64,57 +64,24 @@ export default cB('carousel', `
  width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
  `)])])]), cE('arrow', `
- position: absolute;
- transition: transform .3s var(--n-bezier);
- transform: scale(1);
+ transition: background-color .3s var(--n-bezier);
  cursor: pointer;
- height: 36px;
- width: 36px;
+ height: 28px;
+ width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
+ background-color: rgba(255, 255, 255, .2);
  color: var(--n-arrow-color);
+ border-radius: 8px;
  user-select: none;
- `, [cM('right', `
- transform: translateY(-50%);
- top: 50%;
- right: -2px;
- `, [c('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), c('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), cM('left', `
- transform: translateY(-50%);
- top: 50%;
- left: -2px;
- `, [c('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), c('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), cM('top', `
- transform: translateX(-50%) rotate(90deg);
- top: -2px;
- left: 50%;
- `, [c('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), c('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), cM('bottom', `
- transform: translateX(-50%) rotate(90deg);
- bottom: -2px;
- left: 50%
- `, [c('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), c('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), cM('disabled', `
- opacity: 0.6;
- cursor: auto;
- pointer-events: none;
- `), c('svg', {
-  height: '100%',
-  width: '100%'
-})]), cM('vertical', [cE('slides', `
+ font-size: 18px;
+ `, [c('svg', `
+ height: 1em;
+ width: 1em;
+ `), c('&:hover', `
+ background-color: rgba(255, 255, 255, .3);
+ `)]), cM('vertical', [cE('slides', `
  flex-direction: column;
  touch-action: pan-x;
  `), cM('fade', [cE('slide', `
@@ -154,7 +121,35 @@ export default cB('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), cE('dot', `
  margin: 4px 0;
+ `)]), cE('arrow-group', `
+ position: absolute;
+ display: flex;
+ flex-wrap: nowrap;
+ `), cM('vertical', [cE('arrow', `
+ transform: rotate(90deg);
+ `)]), cM('show-arrow', [cM('bottom', [cE('dots', `
+ transform: translateX(0);
+ bottom: 18px;
+ left: 18px;
+ `)]), cM('top', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
+ `)]), cM('left', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
  `)]), cM('right', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ right: 18px;
+ `)])]), cM('left', [cE('arrow-group', `
+ bottom: 12px;
+ left: 12px;
+ flex-direction: column;
+ `, [c('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), cM('right', [cE('dots', `
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
@@ -172,7 +167,13 @@ export default cB('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), cE('dot', `
  margin: 4px 0;
- `)]), cM('top', [cE('dots', `
+ `), cE('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ flex-direction: column;
+ `, [c('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), cM('top', [cE('dots', `
  transform: translateX(-50%);
  top: 12px;
  left: 50%;
@@ -180,7 +181,12 @@ export default cB('carousel', `
  margin: 0 4px;
  `)])]), cE('dot', `
  margin: 0 4px;
- `)]), cM('bottom', [cE('dots', `
+ `), cE('arrow-group', `
+ top: 12px;
+ right: 12px;
+ `, [c('> *:first-child', `
+ margin-right: 12px;
+ `)])]), cM('bottom', [cE('dots', `
  transform: translateX(-50%);
  bottom: 12px;
  left: 50%;
@@ -188,7 +194,12 @@ export default cB('carousel', `
  margin: 0 4px;
  `)])]), cE('dot', `
  margin: 0 4px;
- `)]), cM('fade', [cE('slide', `
+ `), cE('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ `, [c('> *:first-child', `
+ margin-right: 12px;
+ `)])]), cM('fade', [cE('slide', `
  position: absolute;
  left: 50%;
  opacity: 0;

package/es/carousel/styles/light.js

@@ -2,12 +2,12 @@ import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     return {
         dotSize: '8px',
-        dotColor: 'rgba(255, 255, 255, .25)',
+        dotColor: 'rgba(255, 255, 255, .3)',
         dotColorActive: 'rgba(255, 255, 255, 1)',
         dotColorFocus: 'rgba(255, 255, 255, .5)',
         dotLineWidth: '16px',
         dotLineWidthActive: '24px',
-        arrowColor: 'rgba(255, 255, 255, .5)'
+        arrowColor: '#eee'
     };
 };
 const carouselLight = {

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

@@ -1,7 +1,7 @@
 import { PropType, VNodeChild } from 'vue';
 import { CheckStrategy } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
-import { SelectBaseOption } from '../../select/src/interface';
+import type { SelectBaseOption } from '../../select/src/interface';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { CascaderOption, ExpandTrigger, Filter, OnLoad, OnUpdateValue, Value } from './interface';
 declare const cascaderProps: {
@@ -1279,6 +1279,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     selectMenuFollowerRef: import("vue").Ref<{
         syncPosition: () => void;
     } | null>;
@@ -1286,6 +1287,7 @@ declare const _default: import("vue").DefineComponent<{
         syncPosition: () => void;
     } | null>;
     triggerInstRef: import("vue").Ref<{
+        isCompositing: boolean;
         focus: () => void;
         focusInput: () => void;
         blur: () => void;
@@ -1321,7 +1323,7 @@ declare const _default: import("vue").DefineComponent<{
         value: import("treemate").Key;
     }[]>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
-    menuModel: import("vue").ComputedRef<any>;
+    menuModel: import("vue").ComputedRef<import("treemate").TreeNode<CascaderOption, CascaderOption, CascaderOption>[][]>;
     handleMenuTabout: () => void;
     handleMenuFocus: (e: FocusEvent) => void;
     handleMenuBlur: (e: FocusEvent) => void;
@@ -2346,12 +2348,12 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
-    placement: FollowerPlacement;
+    options: CascaderOption[];
     bordered: boolean | undefined;
+    placement: FollowerPlacement;
     virtualScroll: boolean;
     filterable: boolean;
     clearable: boolean;
-    options: CascaderOption[];
     defaultValue: Value | null;
     remote: boolean;
     expandTrigger: ExpandTrigger;

package/es/cascader/src/Cascader.js

@@ -76,7 +76,7 @@ export default defineComponent({
             });
         }
         const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('Cascader', 'Cascader', style, cascaderLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Cascader', '-cascader', style, cascaderLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Cascader');
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = computed(() => props.value);
@@ -86,7 +86,7 @@ export default defineComponent({
         });
         const patternRef = ref('');
         const formItem = useFormItem(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const cascaderMenuInstRef = ref(null);
         const selectMenuInstRef = ref(null);
         const triggerInstRef = ref(null);
@@ -676,7 +676,7 @@ export default defineComponent({
                 (_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { selectMenuFollowerRef,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, selectMenuFollowerRef,
             cascaderMenuFollowerRef,
             triggerInstRef,
             selectMenuInstRef,
@@ -721,12 +721,12 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
+                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", status: this.mergedStatus, clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
-                    h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: "bottom-start", width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: this.placement, width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, $slots))
                     }),
-                    h(VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: "bottom-start", to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
+                    h(VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: this.placement, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
                         default: () => (h(CascaderSelectMenu, { ref: "selectMenuInstRef", value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, filter: this.filter, labelField: this.labelField, separator: this.separator, style: this.cssVars }))
                     })
                 ]

package/es/checkbox/src/Checkbox.js

@@ -107,7 +107,7 @@ export default defineComponent({
                 return mergedCheckedRef.value === props.checkedValue;
             }
         });
-        const themeRef = useTheme('Checkbox', 'Checkbox', style, checkboxLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Checkbox', '-checkbox', style, checkboxLight, props, mergedClsPrefixRef);
         function toggle(e) {
             if (NCheckboxGroup && props.value !== undefined) {
                 NCheckboxGroup.toggleCheckbox(!renderedCheckedRef.value, props.value);

package/es/code/src/Code.js

@@ -68,7 +68,7 @@ export default defineComponent({
         watch(toRef(props, 'code'), setCode);
         if (!internalNoHighlight)
             watch(hljsRef, setCode);
-        const themeRef = useTheme('Code', 'Code', style, codeLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Code', '-code', style, codeLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,

package/es/collapse/src/Collapse.js

@@ -37,7 +37,7 @@ export default defineComponent({
         const uncontrolledExpandedNamesRef = ref(props.defaultExpandedNames);
         const controlledExpandedNamesRef = computed(() => props.expandedNames);
         const mergedExpandedNamesRef = useMergedState(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
-        const themeRef = useTheme('Collapse', 'Collapse', style, collapseLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Collapse', '-collapse', style, collapseLight, props, mergedClsPrefixRef);
         function doUpdateExpandedNames(names) {
             const { 'onUpdate:expandedNames': _onUpdateExpandedNames, onUpdateExpandedNames, onExpandedNamesChange } = props;
             if (onUpdateExpandedNames) {

package/es/collapse-transition/src/CollapseTransition.js

@@ -29,7 +29,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef } = useConfig(props);
-        const mergedThemeRef = useTheme('CollapseTransition', 'CollapseTransition', style, collapseTransitionLight, props);
+        const mergedThemeRef = useTheme('CollapseTransition', '-collapse-transition', style, collapseTransitionLight, props, mergedClsPrefixRef);
         const mergedShowRef = computed(() => {
             if (props.collapsed !== undefined) {
                 // No mistake, it's implemented with error at first, just keep it here

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

@@ -1,6 +1,6 @@
 import { defineComponent, h, inject, ref, watchEffect } from 'vue';
 import { NInput } from '../../input';
-import { colorPickerInjectionKey } from './ColorPicker';
+import { colorPickerInjectionKey } from './context';
 // 0 - 255
 function normalizeRgbUnit(value) {
     if (/^\d{1,3}\.?\d*$/.test(value.trim())) {

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

@@ -1,7 +1,6 @@
-import { PropType, VNode, ComputedRef, Ref, Slots } from 'vue';
+import { PropType, VNode, Ref } from 'vue';
 import { RGBA, HSLA } from 'seemly';
-import type { ColorPickerTheme } from '../styles';
-import { MergedTheme } from '../../_mixins';
+import { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ColorPickerMode } from './utils';
 import { OnUpdateValue, RenderLabel } from './interface';
@@ -20,6 +19,10 @@ export declare const colorPickerPanelProps: {
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -30,6 +33,10 @@ export declare const colorPickerPanelProps: {
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -884,11 +891,6 @@ export declare const colorPickerPanelProps: {
     }>>>;
 };
 export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
-export declare const colorPickerInjectionKey: import("vue").InjectionKey<{
-    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
-    colorPickerSlots: Slots;
-    renderLabelRef: Ref<RenderLabel | undefined>;
-}>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly show: {
@@ -904,6 +906,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -914,6 +920,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1767,19 +1777,20 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    mergedClsPrefix: ComputedRef<string>;
-    namespace: ComputedRef<string | undefined>;
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    namespace: import("vue").ComputedRef<string | undefined>;
     selfRef: Ref<HTMLElement | null>;
-    hsla: ComputedRef<HSLA | null>;
-    rgba: ComputedRef<RGBA | null>;
-    mergedShow: ComputedRef<boolean>;
+    hsla: import("vue").ComputedRef<HSLA | null>;
+    rgba: import("vue").ComputedRef<RGBA | null>;
+    mergedShow: import("vue").ComputedRef<boolean>;
+    mergedDisabled: import("vue").ComputedRef<boolean>;
     isMounted: Readonly<Ref<boolean>>;
-    adjustedTo: ComputedRef<string | HTMLElement>;
-    mergedValue: ComputedRef<string | null>;
+    adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
+    mergedValue: import("vue").ComputedRef<string | null>;
     handleTriggerClick(): void;
     handleClickOutside(e: MouseEvent): void;
     renderPanel: () => VNode;
-    cssVars: ComputedRef<{
+    cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-text-color': string;
         '--n-color': string;
@@ -1806,6 +1817,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ColorPickerMode[]>;
         readonly default: () => string[];
     };
+    readonly placement: {
+        readonly type: PropType<FollowerPlacement>;
+        readonly default: "bottom-start";
+    };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
@@ -1816,6 +1831,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly showPreview: BooleanConstructor;
     readonly swatches: PropType<string[]>;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -2670,7 +2689,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     show: boolean | undefined;
+    disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
+    placement: FollowerPlacement;
     defaultShow: boolean;
     showAlpha: boolean;
     modes: ColorPickerMode[];

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

@@ -5,7 +5,7 @@ import { VBinder, VFollower, VTarget } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
 import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
-import { call, createInjectionKey, createKey, useAdjustedTo } from '../../_utils';
+import { call, createKey, useAdjustedTo } from '../../_utils';
 import { NButton } from '../../button';
 import HueSlider from './HueSlider';
 import AlphaSlider from './AlphaSlider';
@@ -15,6 +15,7 @@ import ColorPickerTrigger from './ColorPickerTrigger';
 import { deriveDefaultValue, getModeFromValue } from './utils';
 import ColorPickerSwatches from './ColorPickerSwatches';
 import ColorPreview from './ColorPreview';
+import { colorPickerInjectionKey } from './context';
 import style from './styles/index.cssr';
 export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.props), { value: String, show: {
         type: Boolean,
@@ -26,14 +27,19 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
         type: Array,
         // no hsva by default since browser doesn't support it
         default: () => ['rgb', 'hex', 'hsl']
+    }, placement: {
+        type: String,
+        default: 'bottom-start'
     }, to: useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, showPreview: Boolean, swatches: Array, actions: {
+    }, showPreview: Boolean, swatches: Array, disabled: {
+        type: Boolean,
+        default: undefined
+    }, actions: {
         type: Array,
         default: null
     }, 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 = createInjectionKey('n-color-picker');
 export default defineComponent({
     name: 'ColorPicker',
     props: colorPickerPanelProps,
@@ -41,10 +47,10 @@ export default defineComponent({
         const selfRef = ref(null);
         let upcomingValue = null;
         const formItem = useFormItem(props);
-        const { mergedSizeRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = useLocale('global');
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('ColorPicker', 'ColorPicker', style, colorPickerLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('ColorPicker', '-color-picker', style, colorPickerLight, props, mergedClsPrefixRef);
         provide(colorPickerInjectionKey, {
             themeRef,
             renderLabelRef: toRef(props, 'renderLabel'),
@@ -377,6 +383,7 @@ export default defineComponent({
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
+            mergedDisabled: mergedDisabledRef,
             isMounted: useIsMounted(),
             adjustedTo: useAdjustedTo(props),
             mergedValue: mergedValueRef,
@@ -399,11 +406,11 @@ export default defineComponent({
             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, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
                             label: $slots.label
                         }))
                     }),
-                    h(VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    h(VFollower, { placement: this.placement, 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 }, {
                             default: () => this.mergedShow
                                 ? withDirectives(this.renderPanel(), [

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

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
@@ -27,9 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<HSLA | null>;
         default: null;
     };
+    disabled: BooleanConstructor;
     onClick: PropType<() => void>;
 }>>, {
     value: string | null;
+    disabled: boolean;
     hsla: HSLA | null;
 }>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import { toHslaString } from 'seemly';
 import { defineComponent, h, inject } from 'vue';
-import { colorPickerInjectionKey } from './ColorPicker';
+import { colorPickerInjectionKey } from './context';
 export default defineComponent({
     name: 'ColorPickerTrigger',
     props: {
@@ -16,15 +16,19 @@ export default defineComponent({
             type: Array,
             default: null
         },
+        disabled: Boolean,
         onClick: Function
     },
     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 { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
-            return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+            return (h("div", { class: [
+                    `${clsPrefix}-color-picker-trigger`,
+                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                ], onClick: disabled ? undefined : onClick },
                 h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
                     h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
                     h("div", { style: {

package/es/color-picker/src/context.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, Ref, Slots } from 'vue';
+import type { MergedTheme } from '../../_mixins';
+import type { ColorPickerTheme } from '../styles';
+import type { RenderLabel } from './interface';
+export declare const colorPickerInjectionKey: import("vue").InjectionKey<{
+    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
+    colorPickerSlots: Slots;
+    renderLabelRef: Ref<RenderLabel | undefined>;
+}>;

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

@@ -0,0 +1,2 @@
+import { createInjectionKey } from '../../_utils';
+export const colorPickerInjectionKey = createInjectionKey('n-color-picker');

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

@@ -70,6 +70,7 @@ export default c([cB('color-picker', `
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
  pointer-events: none;
  `)]), cB('color-picker-handle', `
+ z-index: 1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
  position: absolute;
  background-color: white;
@@ -151,7 +152,7 @@ export default c([cB('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), cB('color-picker-checkboard', `
+ `), cM('disabled', 'cursor: not-allowed'), cB('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [c('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);

package/es/components.d.ts

@@ -36,10 +36,12 @@ export * from './global-style';
 export * from './gradient-text';
 export * from './grid';
 export * from './icon';
+export * from './icon-wrapper';
 export * from './image';
 export * from './input';
 export * from './input-number';
 export * from './layout';
+export * from './legacy-grid';
 export * from './list';
 export * from './loading-bar';
 export * from './log';
@@ -79,4 +81,3 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
-export * from './legacy-grid';