naive-ui 2.24.4 → 2.25.0

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

@@ -71,57 +71,24 @@ exports.default = (0, cssr_1.cB)('carousel', `
  width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
  `)])])]), (0, cssr_1.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;
- `, [(0, cssr_1.cM)('right', `
- transform: translateY(-50%);
- top: 50%;
- right: -2px;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), (0, cssr_1.cM)('left', `
- transform: translateY(-50%);
- top: 50%;
- left: -2px;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), (0, cssr_1.cM)('top', `
- transform: translateX(-50%) rotate(90deg);
- top: -2px;
- left: 50%;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), (0, cssr_1.cM)('bottom', `
- transform: translateX(-50%) rotate(90deg);
- bottom: -2px;
- left: 50%
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), (0, cssr_1.cM)('disabled', `
- opacity: 0.6;
- cursor: auto;
- pointer-events: none;
- `), (0, cssr_1.c)('svg', {
-  height: '100%',
-  width: '100%'
-})]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('slides', `
+ font-size: 18px;
+ `, [(0, cssr_1.c)('svg', `
+ height: 1em;
+ width: 1em;
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: rgba(255, 255, 255, .3);
+ `)]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('slides', `
  flex-direction: column;
  touch-action: pan-x;
  `), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
@@ -161,7 +128,35 @@ exports.default = (0, cssr_1.cB)('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), (0, cssr_1.cE)('dot', `
  margin: 4px 0;
+ `)]), (0, cssr_1.cE)('arrow-group', `
+ position: absolute;
+ display: flex;
+ flex-wrap: nowrap;
+ `), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('arrow', `
+ transform: rotate(90deg);
+ `)]), (0, cssr_1.cM)('show-arrow', [(0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ bottom: 18px;
+ left: 18px;
+ `)]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
+ `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
  `)]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ right: 18px;
+ `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ left: 12px;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('dots', `
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
@@ -179,7 +174,13 @@ exports.default = (0, cssr_1.cB)('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), (0, cssr_1.cE)('dot', `
  margin: 4px 0;
- `)]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
  transform: translateX(-50%);
  top: 12px;
  left: 50%;
@@ -187,7 +188,12 @@ exports.default = (0, cssr_1.cB)('carousel', `
  margin: 0 4px;
  `)])]), (0, cssr_1.cE)('dot', `
  margin: 0 4px;
- `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ top: 12px;
+ right: 12px;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-right: 12px;
+ `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
  transform: translateX(-50%);
  bottom: 12px;
  left: 50%;
@@ -195,7 +201,12 @@ exports.default = (0, cssr_1.cB)('carousel', `
  margin: 0 4px;
  `)])]), (0, cssr_1.cE)('dot', `
  margin: 0 4px;
- `)]), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-right: 12px;
+ `)])]), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
  position: absolute;
  left: 50%;
  opacity: 0;

package/lib/carousel/styles/light.js

@@ -5,12 +5,12 @@ const common_1 = require("../../_styles/common");
 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'
     };
 };
 exports.self = self;

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

@@ -81,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Cascader', 'Cascader', index_cssr_1.default, styles_1.cascaderLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Cascader', '-cascader', index_cssr_1.default, styles_1.cascaderLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Cascader');
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.computed)(() => props.value);
@@ -91,7 +91,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const patternRef = (0, vue_1.ref)('');
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const cascaderMenuInstRef = (0, vue_1.ref)(null);
         const selectMenuInstRef = (0, vue_1.ref)(null);
         const triggerInstRef = (0, vue_1.ref)(null);
@@ -681,7 +681,7 @@ exports.default = (0, vue_1.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,
@@ -726,12 +726,12 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.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: () => ((0, vue_1.h)(_internal_1.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 }))
                     }),
-                    (0, vue_1.h)(vueuc_1.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 === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
+                    (0, vue_1.h)(vueuc_1.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 === _utils_1.useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => ((0, vue_1.h)(CascaderMenu_1.default, { 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))
                     }),
-                    (0, vue_1.h)(vueuc_1.VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: "bottom-start", to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey }, {
+                    (0, vue_1.h)(vueuc_1.VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: this.placement, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey }, {
                         default: () => ((0, vue_1.h)(CascaderSelectMenu_1.default, { 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/lib/checkbox/src/Checkbox.js

@@ -112,7 +112,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return mergedCheckedRef.value === props.checkedValue;
             }
         });
-        const themeRef = (0, _mixins_1.useTheme)('Checkbox', 'Checkbox', index_cssr_1.default, styles_1.checkboxLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Checkbox', '-checkbox', index_cssr_1.default, styles_1.checkboxLight, props, mergedClsPrefixRef);
         function toggle(e) {
             if (NCheckboxGroup && props.value !== undefined) {
                 NCheckboxGroup.toggleCheckbox(!renderedCheckedRef.value, props.value);

package/lib/code/src/Code.js

@@ -73,7 +73,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'code'), setCode);
         if (!internalNoHighlight)
             (0, vue_1.watch)(hljsRef, setCode);
-        const themeRef = (0, _mixins_1.useTheme)('Code', 'Code', index_cssr_1.default, styles_1.codeLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Code', '-code', index_cssr_1.default, styles_1.codeLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,

package/lib/collapse/src/Collapse.js

@@ -43,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledExpandedNamesRef = (0, vue_1.ref)(props.defaultExpandedNames);
         const controlledExpandedNamesRef = (0, vue_1.computed)(() => props.expandedNames);
         const mergedExpandedNamesRef = (0, vooks_1.useMergedState)(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
-        const themeRef = (0, _mixins_1.useTheme)('Collapse', 'Collapse', index_cssr_1.default, styles_1.collapseLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Collapse', '-collapse', index_cssr_1.default, styles_1.collapseLight, props, mergedClsPrefixRef);
         function doUpdateExpandedNames(names) {
             const { 'onUpdate:expandedNames': _onUpdateExpandedNames, onUpdateExpandedNames, onExpandedNamesChange } = props;
             if (onUpdateExpandedNames) {

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

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

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const input_1 = require("../../input");
-const ColorPicker_1 = require("./ColorPicker");
+const context_1 = require("./context");
 // 0 - 255
 function normalizeRgbUnit(value) {
     if (/^\d{1,3}\.?\d*$/.test(value.trim())) {
@@ -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.colorPickerInjectionKey, null);
+        const { themeRef } = (0, vue_1.inject)(context_1.colorPickerInjectionKey, null);
         (0, vue_1.watchEffect)(() => {
             inputValueRef.value = getInputString();
         });

package/lib/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/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.colorPickerInjectionKey = exports.colorPickerPanelProps = void 0;
+exports.colorPickerPanelProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -21,6 +21,7 @@ const ColorPickerTrigger_1 = __importDefault(require("./ColorPickerTrigger"));
 const utils_1 = require("./utils");
 const ColorPickerSwatches_1 = __importDefault(require("./ColorPickerSwatches"));
 const ColorPreview_1 = __importDefault(require("./ColorPreview"));
+const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
         type: Boolean,
@@ -32,14 +33,19 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
         type: Array,
         // no hsva by default since browser doesn't support it
         default: () => ['rgb', 'hex', 'hsl']
+    }, placement: {
+        type: String,
+        default: 'bottom-start'
     }, to: _utils_1.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] });
-exports.colorPickerInjectionKey = (0, _utils_1.createInjectionKey)('n-color-picker');
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPicker',
     props: exports.colorPickerPanelProps,
@@ -47,11 +53,11 @@ exports.default = (0, vue_1.defineComponent)({
         const selfRef = (0, vue_1.ref)(null);
         let upcomingValue = null;
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef } = formItem;
         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.colorPickerInjectionKey, {
+        const themeRef = (0, _mixins_1.useTheme)('ColorPicker', '-color-picker', index_cssr_1.default, styles_1.colorPickerLight, props, mergedClsPrefixRef);
+        (0, vue_1.provide)(context_1.colorPickerInjectionKey, {
             themeRef,
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             colorPickerSlots: slots
@@ -383,6 +389,7 @@ exports.default = (0, vue_1.defineComponent)({
             hsla: hslaRef,
             rgba: rgbaRef,
             mergedShow: mergedShowRef,
+            mergedDisabled: mergedDisabledRef,
             isMounted: (0, vooks_1.useIsMounted)(),
             adjustedTo: (0, _utils_1.useAdjustedTo)(props),
             mergedValue: mergedValueRef,
@@ -405,11 +412,11 @@ exports.default = (0, vue_1.defineComponent)({
             (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, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
                             label: $slots.label
                         }))
                     }),
-                    (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 }, {
+                    (0, vue_1.h)(vueuc_1.VFollower, { placement: this.placement, 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 }, {
                             default: () => this.mergedShow
                                 ? (0, vue_1.withDirectives)(this.renderPanel(), [

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const seemly_1 = require("seemly");
 const vue_1 = require("vue");
-const ColorPicker_1 = require("./ColorPicker");
+const context_1 = require("./context");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPickerTrigger',
     props: {
@@ -18,15 +18,19 @@ exports.default = (0, vue_1.defineComponent)({
             type: Array,
             default: null
         },
+        disabled: Boolean,
         onClick: Function
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
+        const { colorPickerSlots, renderLabelRef } = (0, vue_1.inject)(context_1.colorPickerInjectionKey, null);
         return () => {
-            const { hsla, value, clsPrefix, onClick } = props;
+            const { hsla, value, clsPrefix, onClick, disabled } = props;
             const renderLabel = colorPickerSlots.label || renderLabelRef.value;
-            return ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+            return ((0, vue_1.h)("div", { class: [
+                    `${clsPrefix}-color-picker-trigger`,
+                    disabled && `${clsPrefix}-color-picker-trigger--disabled`
+                ], onClick: disabled ? undefined : 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: {

package/lib/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/lib/color-picker/src/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorPickerInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.colorPickerInjectionKey = (0, _utils_1.createInjectionKey)('n-color-picker');

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

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

package/lib/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';

package/lib/components.js

@@ -48,10 +48,12 @@ __exportStar(require("./global-style"), exports);
 __exportStar(require("./gradient-text"), exports);
 __exportStar(require("./grid"), exports);
 __exportStar(require("./icon"), exports);
+__exportStar(require("./icon-wrapper"), exports);
 __exportStar(require("./image"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./input-number"), exports);
 __exportStar(require("./layout"), exports);
+__exportStar(require("./legacy-grid"), exports);
 __exportStar(require("./list"), exports);
 __exportStar(require("./loading-bar"), exports);
 __exportStar(require("./log"), exports);
@@ -91,4 +93,3 @@ __exportStar(require("./tree"), exports);
 __exportStar(require("./tree-select"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./upload"), exports);
-__exportStar(require("./legacy-grid"), exports);