naive-ui 2.19.7 → 2.19.11

package/es/_internal/icons/Add.js

@@ -2,8 +2,7 @@ import { h, defineComponent } from 'vue';
 export default defineComponent({
     name: 'Add',
     render() {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
-            h("line", { x1: "256", y1: "112", x2: "256", y2: "400", style: "fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; " }),
-            h("line", { x1: "400", y1: "256", x2: "112", y2: "256", style: "fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;" })));
+        return (h("svg", { width: "512", height: "512", viewBox: "0 0 512 512", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M256 112V400M400 256H112", stroke: "currentColor", "stroke-width": "32", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
 });

package/es/_internal/selection/src/Selection.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InputHTMLAttributes } from 'vue';
 import type { SelectBaseOption } from '../../../select/src/interface';
 import { RenderTag } from './interface';
 import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface';
@@ -44,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    inputProps: PropType<InputHTMLAttributes>;
     focused: BooleanConstructor;
     renderTag: PropType<RenderTag>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -545,6 +546,7 @@ declare const _default: import("vue").DefineComponent<{
     loading?: unknown;
     autofocus?: unknown;
     showArrow?: unknown;
+    inputProps?: unknown;
     focused?: unknown;
     renderTag?: unknown;
     onKeyup?: unknown;
@@ -789,6 +791,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered?: boolean | undefined;
     renderLabel?: RenderLabel | undefined;
     onClear?: ((e: MouseEvent) => void) | undefined;
+    inputProps?: InputHTMLAttributes | undefined;
     renderTag?: RenderTag | undefined;
     onDeleteOption?: ((option: SelectBaseOption) => void) | undefined;
     maxTagCount?: number | "responsive" | undefined;

package/es/_internal/selection/src/Selection.js

@@ -31,7 +31,7 @@ export default defineComponent({
         }, loading: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, renderLabel: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, renderLabel: Function }),
     setup(props) {
         const patternInputMirrorRef = ref(null);
         const patternInputRef = ref(null);
@@ -408,7 +408,7 @@ export default defineComponent({
                 ? this.selectedOptions.slice(0, maxTagCount)
                 : this.selectedOptions).map(createTag);
             const input = filterable ? (h("div", { class: `${clsPrefix}-base-selection-input-tag`, ref: "inputTagElRef", key: "__input-tag__" },
-                h("input", { ref: "patternInputRef", tabindex: -1, disabled: disabled, value: this.pattern, autofocus: this.autofocus, class: `${clsPrefix}-base-selection-input-tag__input`, onBlur: this.handlePatternInputBlur, onFocus: this.handlePatternInputFocus, onKeydown: this.handlePatternKeyDown, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd }),
+                h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", tabindex: -1, disabled: disabled, value: this.pattern, autofocus: this.autofocus, class: `${clsPrefix}-base-selection-input-tag__input`, onBlur: this.handlePatternInputBlur, onFocus: this.handlePatternInputFocus, onKeydown: this.handlePatternKeyDown, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                 h("span", { ref: "patternInputMirrorRef", class: `${clsPrefix}-base-selection-input-tag__mirror` }, this.pattern ? this.pattern : ''))) : null;
             // May Overflow
             const renderCounter = maxTagCountResponsive
@@ -489,7 +489,7 @@ export default defineComponent({
                     (this.active || !this.selected) &&
                     !this.isCompositing;
                 body = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
-                    h("input", { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd }),
+                    h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                     showPlaceholder ? null : this.patternInputFocused &&
                         this.active ? null : (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" }, renderTag
                         ? renderTag({

package/es/anchor/src/AnchorAdapter.d.ts

@@ -19,6 +19,7 @@ declare const anchorProps: {
         readonly type: NumberConstructor;
         readonly default: 12;
     };
+    readonly internalScrollable: BooleanConstructor;
     readonly ignoreGap: BooleanConstructor;
     readonly offsetTarget: import("vue").PropType<string | import("./utils").OffsetTarget | (() => HTMLElement)>;
     readonly listenTo: import("vue").PropType<string | import("../../affix/src/utils").ScrollTarget | (() => HTMLElement) | undefined>;
@@ -104,6 +105,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 12;
     };
+    readonly internalScrollable: BooleanConstructor;
     readonly ignoreGap: BooleanConstructor;
     readonly offsetTarget: import("vue").PropType<string | import("./utils").OffsetTarget | (() => HTMLElement)>;
     readonly listenTo: import("vue").PropType<string | import("../../affix/src/utils").ScrollTarget | (() => HTMLElement) | undefined>;
@@ -178,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly showRail?: unknown;
     readonly showBackground?: unknown;
     readonly bound?: unknown;
+    readonly internalScrollable?: unknown;
     readonly ignoreGap?: unknown;
     readonly offsetTarget?: unknown;
     readonly listenTo?: unknown;
@@ -200,6 +203,7 @@ declare const _default: import("vue").DefineComponent<{
     affix: boolean;
     showRail: boolean;
     showBackground: boolean;
+    internalScrollable: boolean;
     ignoreGap: boolean;
 } & {
     bottom?: number | undefined;
@@ -260,6 +264,7 @@ declare const _default: import("vue").DefineComponent<{
     offsetBottom: number | undefined;
     showRail: boolean;
     showBackground: boolean;
+    internalScrollable: boolean;
     ignoreGap: boolean;
 }>;
 export default _default;

package/es/anchor/src/BaseAnchor.d.ts

@@ -20,10 +20,11 @@ export declare const baseAnchorProps: {
         readonly type: NumberConstructor;
         readonly default: 12;
     };
+    readonly internalScrollable: BooleanConstructor;
     readonly ignoreGap: BooleanConstructor;
     readonly offsetTarget: PropType<string | OffsetTarget | (() => HTMLElement)>;
 };
-export declare const baseAnchorPropKeys: ("type" | "bound" | "showRail" | "showBackground" | "ignoreGap" | "offsetTarget")[];
+export declare const baseAnchorPropKeys: ("type" | "bound" | "showRail" | "showBackground" | "internalScrollable" | "ignoreGap" | "offsetTarget")[];
 declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: {
         type: StringConstructor;
@@ -45,6 +46,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 12;
     };
+    internalScrollable: BooleanConstructor;
     ignoreGap: BooleanConstructor;
     offsetTarget: PropType<string | OffsetTarget | (() => HTMLElement)>;
 }, {
@@ -61,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     showRail?: unknown;
     showBackground?: unknown;
     bound?: unknown;
+    internalScrollable?: unknown;
     ignoreGap?: unknown;
     offsetTarget?: unknown;
 } & {
@@ -69,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: string;
     showRail: boolean;
     showBackground: boolean;
+    internalScrollable: boolean;
     ignoreGap: boolean;
 } & {
     offsetTarget?: string | OffsetTarget | (() => HTMLElement) | undefined;
@@ -77,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{
     bound: number;
     showRail: boolean;
     showBackground: boolean;
+    internalScrollable: boolean;
     ignoreGap: boolean;
 }>;
 export default _default;

package/es/anchor/src/BaseAnchor.js

@@ -1,9 +1,10 @@
-import { h, nextTick, ref, provide, defineComponent, watch, onBeforeUnmount, onMounted, toRef, computed } from 'vue';
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue';
+import { throttle } from 'lodash-es';
 import { unwrapElement } from 'seemly';
 import { onFontsReady } from 'vooks';
+import { NScrollbar } from '../../_internal';
 import { keysOf } from '../../_utils';
 import { anchorInjectionKey } from './Link';
-import { throttle } from 'lodash-es';
 import { getOffset } from './utils';
 export const baseAnchorProps = {
     type: {
@@ -22,6 +23,7 @@ export const baseAnchorProps = {
         type: Number,
         default: 12
     },
+    internalScrollable: Boolean,
     ignoreGap: Boolean,
     offsetTarget: [String, Object, Function]
 };
@@ -235,7 +237,7 @@ export default defineComponent({
     render() {
         var _a;
         const { mergedClsPrefix, mergedShowRail, isBlockType, $slots } = this;
-        return (h("div", { class: [
+        const Anchor = (h("div", { class: [
                 `${mergedClsPrefix}-anchor`,
                 isBlockType && `${mergedClsPrefix}-anchor--block`,
                 mergedShowRail && `${mergedClsPrefix}-anchor--show-rail`
@@ -248,5 +250,8 @@ export default defineComponent({
                             `${mergedClsPrefix}-anchor-rail__bar--active`
                     ] }))) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
             _a.call($slots)));
+        return this.internalScrollable ? (h(NScrollbar, null, {
+            default: () => Anchor
+        })) : (Anchor);
     }
 });

package/es/auto-complete/src/AutoComplete.d.ts

@@ -33,6 +33,7 @@ declare const autoCompleteProps: {
     readonly value: StringConstructor;
     readonly blurAfterSelect: BooleanConstructor;
     readonly clearAfterSelect: BooleanConstructor;
+    readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -428,6 +429,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly blurAfterSelect: BooleanConstructor;
     readonly clearAfterSelect: BooleanConstructor;
+    readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -1081,6 +1083,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly value?: unknown;
     readonly blurAfterSelect?: unknown;
     readonly clearAfterSelect?: unknown;
+    readonly getShow?: unknown;
     readonly size?: unknown;
     readonly options?: unknown;
     readonly zIndex?: unknown;
@@ -1462,6 +1465,7 @@ declare const _default: import("vue").DefineComponent<{
     clearable?: boolean | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
+    getShow?: ((inputValue: string) => boolean) | undefined;
 }>, {
     disabled: boolean | undefined;
     onInput: MaybeArray<OnUpdateValue> | undefined;

package/es/auto-complete/src/AutoComplete.js

@@ -26,7 +26,7 @@ const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to:
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, size: String, options: {
+    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, size: String, options: {
         type: Array,
         default: () => []
     }, zIndex: Number, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
@@ -59,8 +59,15 @@ export default defineComponent({
         const selectOptionsRef = computed(() => {
             return mapAutoCompleteOptionsToSelectOptions(props.options);
         });
+        const mergedShowOptionsRef = computed(() => {
+            const { getShow } = props;
+            if (getShow) {
+                return getShow(mergedValueRef.value || '');
+            }
+            return !!mergedValueRef.value;
+        });
         const activeRef = computed(() => {
-            return (!!mergedValueRef.value &&
+            return (mergedShowOptionsRef.value &&
                 canBeActivatedRef.value &&
                 !!selectOptionsRef.value.length);
         });

package/es/calendar/src/Calendar.d.ts

@@ -1342,6 +1342,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/cascader/src/Cascader.js

@@ -730,7 +730,7 @@ export default defineComponent({
                         }))
                     }),
                     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 }, {
-                        default: () => (h(CascaderSelectMenu, { ref: "selectMenuInstRef", value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, style: this.cssVars }))
+                        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/cascader/src/CascaderSelectMenu.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { TreeNode } from 'treemate';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
-import { TmNode, Value, Filter, CascaderOption } from './interface';
+import { TmNode, Value, Filter } from './interface';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: PropType<Value | null>;
@@ -17,9 +17,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TmNode[]>;
         default: () => never[];
     };
-    filter: {
-        type: PropType<Filter>;
-        default: (pattern: string, _: CascaderOption, path: CascaderOption[]) => boolean;
+    filter: PropType<Filter>;
+    labelField: {
+        type: StringConstructor;
+        required: true;
+    };
+    separator: {
+        type: StringConstructor;
+        required: true;
     };
 }, {
     prev: () => void;
@@ -366,17 +371,21 @@ declare const _default: import("vue").DefineComponent<{
     multiple?: unknown;
     tmNodes?: unknown;
     filter?: unknown;
+    labelField?: unknown;
+    separator?: unknown;
 } & {
     value: Value | null;
     pattern: string;
-    filter: Filter;
     show: boolean;
+    separator: string;
     multiple: boolean;
+    labelField: string;
     tmNodes: TmNode[];
-} & {}>, {
+} & {
+    filter?: Filter | undefined;
+}>, {
     value: Value | null;
     pattern: string;
-    filter: Filter;
     show: boolean;
     multiple: boolean;
     tmNodes: TmNode[];

package/es/cascader/src/CascaderSelectMenu.js

@@ -22,9 +22,14 @@ export default defineComponent({
             type: Array,
             default: () => []
         },
-        filter: {
-            type: Function,
-            default: (pattern, _, path) => path.some((option) => option.label && ~option.label.indexOf(pattern))
+        filter: Function,
+        labelField: {
+            type: String,
+            required: true
+        },
+        separator: {
+            type: String,
+            required: true
         }
     },
     setup(props) {
@@ -33,15 +38,23 @@ export default defineComponent({
          } = inject(cascaderInjectionKey);
         const menuInstRef = ref(null);
         const selectOptionsRef = computed(() => {
-            return createSelectOptions(props.tmNodes, mergedCheckStrategyRef.value === 'child');
+            return createSelectOptions(props.tmNodes, mergedCheckStrategyRef.value === 'child', props.labelField, props.separator);
+        });
+        const mergedFilterRef = computed(() => {
+            const { filter } = props;
+            if (filter)
+                return filter;
+            const { labelField } = props;
+            return (pattern, _, path) => path.some((option) => option[labelField] && ~option[labelField].indexOf(pattern));
         });
         const filteredSelectOptionsRef = computed(() => {
-            const { filter, pattern } = props;
-            return selectOptionsRef.value
-                .filter((option) => {
-                return filter(pattern, { label: option.label, value: option.value }, option.path);
-            })
-                .map((option) => ({
+            const { pattern } = props;
+            const { value: mergedFilter } = mergedFilterRef;
+            return (pattern
+                ? selectOptionsRef.value.filter((option) => {
+                    return mergedFilter(pattern, option.rawNode, option.path);
+                })
+                : selectOptionsRef.value).map((option) => ({
                 value: option.value,
                 label: option.label
             }));

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

@@ -6,7 +6,8 @@ declare function traverseWithCallback<T extends {
     children?: T[];
 }>(options: T[], beforeCallback: (node: T) => void, afterCallback: (node: T) => void): void;
 export { getRawNodePath };
-declare function createSelectOptions(tmNodes: TmNode[], checkStrategyIsChild: boolean): Array<SelectBaseOption & {
+declare function createSelectOptions(tmNodes: TmNode[], checkStrategyIsChild: boolean, labelField: string, separator: string): Array<SelectBaseOption & {
+    rawNode: CascaderOption;
     path: CascaderOption[];
 }>;
 declare function getPathLabel(node: TmNode | null, separator: string, labelField: string): string;

package/es/cascader/src/utils.js

@@ -17,7 +17,7 @@ function traverseWithCallback(options, beforeCallback, afterCallback) {
     }
 }
 export { getRawNodePath };
-function createSelectOptions(tmNodes, checkStrategyIsChild) {
+function createSelectOptions(tmNodes, checkStrategyIsChild, labelField, separator) {
     const selectOptions = [];
     const path = [];
     traverseWithCallback(tmNodes, (tmNode) => {
@@ -27,8 +27,11 @@ function createSelectOptions(tmNodes, checkStrategyIsChild) {
             const { rawNode } = tmNode;
             path.push(rawNode);
             selectOptions.push({
-                label: path.map((rawNodeInPath) => rawNodeInPath.label).join('/'),
+                label: path
+                    .map((rawNodeInPath) => rawNodeInPath[labelField])
+                    .join(separator),
                 value: tmNode.key,
+                rawNode: tmNode.rawNode,
                 path: Array.from(path)
             });
         }

package/es/collapse/src/Collapse.d.ts

@@ -61,7 +61,6 @@ export interface NCollapseInjection {
     props: ExtractPropTypes<typeof collapseProps>;
     expandedNamesRef: Ref<string | number | Array<string | number> | null>;
     mergedClsPrefixRef: Ref<string>;
-    collectedItemNames: Array<string | number>;
     slots: Slots;
     toggleItem: (collapse: boolean, name: string | number, event: MouseEvent) => void;
 }

package/es/collapse/src/Collapse.js

@@ -1,10 +1,9 @@
 import { computed, h, defineComponent, provide, ref } from 'vue';
-import { intersection } from 'lodash-es';
+import { useMergedState } from 'vooks';
 import { useConfig, useTheme } from '../../_mixins';
 import { call, warn } from '../../_utils';
 import { collapseLight } from '../styles';
 import style from './styles/index.cssr';
-import { useMergedState } from 'vooks';
 const collapseProps = Object.assign(Object.assign({}, useTheme.props), { defaultExpandedNames: {
         type: [Array, String],
         default: null
@@ -38,7 +37,6 @@ export default defineComponent({
         const uncontrolledExpandedNamesRef = ref(props.defaultExpandedNames);
         const controlledExpandedNamesRef = computed(() => props.expandedNames);
         const mergedExpandedNamesRef = useMergedState(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
-        const collectedItemNames = [];
         const themeRef = useTheme('Collapse', 'Collapse', style, collapseLight, props, mergedClsPrefixRef);
         function doUpdateExpandedNames(names) {
             const { 'onUpdate:expandedNames': _onUpdateExpandedNames, onUpdateExpandedNames, onExpandedNamesChange } = props;
@@ -78,7 +76,7 @@ export default defineComponent({
                     doItemHeaderClick({ name, expanded: true, event });
                 }
                 else {
-                    const activeNames = intersection(expandedNames, collectedItemNames);
+                    const activeNames = expandedNames.slice();
                     const index = activeNames.findIndex((activeName) => name === activeName);
                     if (~index) {
                         activeNames.splice(index, 1);
@@ -97,7 +95,6 @@ export default defineComponent({
             props,
             mergedClsPrefixRef,
             expandedNamesRef: mergedExpandedNamesRef,
-            collectedItemNames,
             slots,
             toggleItem
         });

package/es/collapse/src/CollapseItem.js

@@ -2,7 +2,6 @@ import { h, defineComponent, inject, computed, renderSlot } from 'vue';
 import { createId } from 'seemly';
 import { useMemo } from 'vooks';
 import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons';
-import { useInjectionCollection } from '../../_utils/composable';
 import { NBaseIcon } from '../../_internal';
 import { throwError } from '../../_utils';
 import { collapseInjectionKey } from './Collapse';
@@ -26,7 +25,6 @@ export default defineComponent({
             throwError('collapse-item', '`n-collapse-item` must be placed inside `n-collapse`.');
         }
         const { expandedNamesRef, props: collapseProps, mergedClsPrefixRef, slots: collapseSlots } = NCollapse;
-        useInjectionCollection(collapseInjectionKey, 'collectedItemNames', mergedNameRef);
         const collapsedRef = computed(() => {
             const { value: expandedNames } = expandedNamesRef;
             if (Array.isArray(expandedNames)) {

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

@@ -28,6 +28,7 @@ export declare const colorPickerPanelProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly swatches: PropType<string[]>;
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -878,6 +879,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly swatches: PropType<string[]>;
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1735,6 +1737,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly modes?: unknown;
     readonly to?: unknown;
     readonly showAlpha?: unknown;
+    readonly swatches?: unknown;
     readonly actions?: unknown;
     readonly internalActions?: unknown;
     readonly size?: unknown;
@@ -2575,6 +2578,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     onComplete?: OnUpdateValue | undefined;
+    swatches?: string[] | undefined;
     internalActions?: readonly ("undo" | "redo")[] | undefined;
 }>, {
     show: boolean | undefined;

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

@@ -14,6 +14,7 @@ import ColorPickerTrigger from './ColorPickerTrigger';
 import { deriveDefaultValue, getModeFromValue } from './utils';
 import style from './styles/index.cssr';
 import { NButton } from '../../button';
+import ColorPickerSwatches from './ColorPickerSwatches';
 export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
@@ -27,7 +28,7 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
     }, to: useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, actions: {
+    }, 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] });
@@ -340,6 +341,7 @@ export default defineComponent({
             };
         });
         function renderPanel() {
+            var _a;
             const { value: rgba } = rgbaRef;
             const { value: displayedHue } = displayedHueRef;
             const { internalActions, modes, actions } = props;
@@ -352,7 +354,8 @@ export default defineComponent({
                     h(Pallete, { clsPrefix: mergedClsPrefix, rgba: rgba, displayedHue: displayedHue, displayedSv: displayedSvRef.value, onUpdateSV: handleUpdateSv, onComplete: handleComplete }),
                     h(HueSlider, { clsPrefix: mergedClsPrefix, hue: displayedHue, onUpdateHue: handleUpdateHue, onComplete: handleComplete }),
                     props.showAlpha ? (h(AlphaSlider, { clsPrefix: mergedClsPrefix, rgba: rgba, alpha: displayedAlphaRef.value, onUpdateAlpha: handleUpdateAlpha, onComplete: handleComplete })) : null,
-                    h(ColorInput, { clsPrefix: mergedClsPrefix, showAlpha: props.showAlpha, mode: displayedModeRef.value, modes: modes, onUpdateMode: handleUpdateDisplayedMode, value: mergedValueRef.value, valueArr: mergedValueArrRef.value, onUpdateValue: handleInputUpdateValue })),
+                    h(ColorInput, { clsPrefix: mergedClsPrefix, showAlpha: props.showAlpha, mode: displayedModeRef.value, modes: modes, onUpdateMode: handleUpdateDisplayedMode, value: mergedValueRef.value, valueArr: mergedValueArrRef.value, onUpdateValue: handleInputUpdateValue }),
+                    ((_a = props.swatches) === null || _a === void 0 ? void 0 : _a.length) && (h(ColorPickerSwatches, { clsPrefix: mergedClsPrefix, mode: displayedModeRef.value, swatches: props.swatches, onUpdateColor: (color) => doUpdateValue(color, 'input') }))),
                 (actions === null || actions === void 0 ? void 0 : actions.length) ? (h("div", { class: `${mergedClsPrefix}-color-picker-action` }, actions.includes('confirm') && (h(NButton, { size: "small", onClick: handleConfirm, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.confirm })))) : null,
                 slots.action ? (h("div", { class: `${mergedClsPrefix}-color-picker-action` }, { default: slots.action })) : internalActions ? (h("div", { class: `${mergedClsPrefix}-color-picker-action` },
                     internalActions.includes('undo') && (h(NButton, { size: "small", onClick: undo, disabled: !undoableRef.value, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.undo })),

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

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { ColorPickerMode } from './utils';
+interface ParsedColor {
+    value: string;
+    mode: ColorPickerMode | null;
+    legalValue: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: PropType<ColorPickerMode>;
+        required: true;
+    };
+    swatches: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    onUpdateColor: {
+        type: PropType<(value: string) => void>;
+        required: true;
+    };
+}, {
+    parsedSwatchesRef: import("vue").ComputedRef<ParsedColor[]>;
+    handleSwatchSelect: (parsed: ParsedColor) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    clsPrefix?: unknown;
+    mode?: unknown;
+    swatches?: unknown;
+    onUpdateColor?: unknown;
+} & {
+    mode: ColorPickerMode;
+    clsPrefix: string;
+    swatches: string[];
+    onUpdateColor: (value: string) => void;
+} & {}>, {}>;
+export default _default;