Merge branch 'main' into docs

.github/workflows/node.js.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [22]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
       - uses: actions/checkout@v3
@@ -42,7 +42,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [22]
     steps:
       - uses: actions/checkout@v3
 

CHANGELOG.en-US.md

@@ -1,5 +1,28 @@
 # CHANGELOG
 
+## 2.41.0
+
+### Breaking Changes
+
+- (**Vue 3.3+ required**) Add slot type for all components.
+
+### i18n
+
+- Add kmKH locale.
+- Add ugCN locale.
+
+### Features
+
+- `n-modal` adds `draggable` prop, closes [#6525](https://github.com/tusen-ai/naive-ui/issues/6525), [#5792](https://github.com/tusen-ai/naive-ui/issues/5792), [#5711](https://github.com/tusen-ai/naive-ui/issues/5711), [#5501](https://github.com/tusen-ai/naive-ui/issues/5501) and [#2152](https://github.com/tusen-ai/naive-ui/issues/2152).
+- `useDialog` supports `draggable` option.
+- `useModal` supports `draggable` option.
+
+### Fixes
+
+- Fix `n-data-table` may have multiple expand trigger with tree data.
+- Fix `n-date-picker`'s `confirm`, `now`, `clear` slots doesn't work with `'month'`, `'monthrange'`, `'quarter'`, `'quarterrange'`, `'year'` and `'yearrange'` type.
+- Fix `n-input`'s `render-count` prop doesn't work when type is not `'textarea'`.
+
 ## 2.40.4
 
 `2024-12-20`

CHANGELOG.zh-CN.md

@@ -1,5 +1,30 @@
 # CHANGELOG
 
+## 2.41.0
+
+`2025-01-05`
+
+### Breaking Changes
+
+- （需要 Vue 3.3+）为所有的组件增加插槽的类型标注
+
+### i18n
+
+- 添加 kmKH 国际化
+- 添加 ugCN 国际化
+
+### Features
+
+- `n-modal` 新增 `draggable` 属性，关闭 [#6525](https://github.com/tusen-ai/naive-ui/issues/6525)、[#5792](https://github.com/tusen-ai/naive-ui/issues/5792)、[#5711](https://github.com/tusen-ai/naive-ui/issues/5711)、[#5501](https://github.com/tusen-ai/naive-ui/issues/5501)、[#2152](https://github.com/tusen-ai/naive-ui/issues/2152)
+- `useDialog` 支持 `draggable` 参数
+- `useModal` 支持 `draggable` 参数
+
+### Fixes
+
+- 修复 `n-data-table` 在使用树形数据的时候出现多个展开 icon
+- 修复 `n-date-picker` 的 `confirm`、`now`、`clear` 插槽对 `'month'`、`'monthrange'`、`'quarter'`、`'quarterrange'`、`'year'` 和 `'yearrange'` 类型不生效
+- 修复 `n-input` 的 `render-count` 属性在类型非 `'textarea'` 时不生效
+
 ## 2.40.4
 
 `2024-12-20`

demo/pages/docs/i18n/enUS/index.md

@@ -60,6 +60,7 @@ The following list is sorted by 'Config' column.
 | Bahasa Indonesia           | idID   | dateIdID    |         |
 | Italiano                   | itIT   | dateItIT    | 2.24.2  |
 | Japanese                   | jaJP   | dateJaJP    |         |
+| Khmer (Cambodia)           | kmKH   | dateKmKH    | 2.41.0  |
 | Korean (South Korea)       | koKR   | dateKoKR    | 2.28.1  |
 | Norwegian Bokmål (Norway)  | nbNO   | dateNbNO    |         |
 | Dutch (Netherlands)        | nlNL   | dateNlNL    | 2.29.0  |
@@ -70,6 +71,7 @@ The following list is sorted by 'Config' column.
 | Swedish                    | svSE   | dateSvSE    | 2.35.0  |
 | Thai (Thailand)            | thTH   | dateThTH    | 2.27.0  |
 | Turkish                    | trTR   | dateTrTR    | 2.34.0  |
+| Uyghur (China)             | ugCN   | dateUgCN    |         |
 | Ukrainian                  | ukUA   | dateUkUA    |         |
 | Uzbek (Uzbekistan)         | uzUZ   | dateUzUZ    | 2.39.0  |
 | Vietnamese (Vietnam)       | viVN   | dateViVN    | 2.30.7  |

demo/pages/docs/i18n/zhCN/index.md

@@ -60,6 +60,7 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 | 印度尼西亚语       | idID | dateIdID |        |
 | 意大利语           | itIT | dateItIT | 2.24.2 |
 | 日语               | jaJP | dateJaJP |        |
+| 高棉语（柬埔寨）   | kmKH | dateKmKH | 2.41.0 |
 | 韩语               | koKR | dateKoKR | 2.28.1 |
 | 书面挪威语         | nbNO | dateNbNO |        |
 | 荷兰语（荷兰）     | nlNL | dateNlNL | 2.29.0 |
@@ -70,6 +71,7 @@ Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有
 | 瑞典語             | svSE | dateSvSE | 2.35.0 |
 | 泰语（泰国）       | thTH | dateThTH | 2.27.0 |
 | 土耳其语           | trTR | dateTrTR | 2.34.0 |
+| 维吾尔语           | ugCN | dateUgCN | 2.41.0 |
 | 乌克兰语           | ukUA | dateUkUA |        |
 | 乌兹别克语         | uzUZ | dateUzUZ | 2.39.0 |
 | 越南语（越南）     | viVN | dateViVN | 2.30.7 |

package.json

@@ -1,6 +1,5 @@
 {
   "name": "naive-ui",
-  "version": "2.40.4",
   "packageManager": "pnpm@9.5.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": "07akioni",

src/_utils/index.ts

@@ -25,6 +25,7 @@ export {
   createRefSetter,
   flatten,
   getFirstSlotVNode,
+  getFirstSlotVNodeWithTypedProps,
   getSlot,
   getVNodeChildren,
   isNodeVShowFalse,
@@ -35,7 +36,7 @@ export {
   omit,
   render,
   resolveSlot,
-  resolveSlotWithProps,
+  resolveSlotWithTypedProps,
   resolveWrappedSlot,
   resolveWrappedSlotWithProps,
   Wrapper

src/_utils/vue/get-first-slot-vnode.ts

@@ -22,3 +22,22 @@ export function getFirstSlotVNode(
     return null
   }
 }
+
+export function getFirstSlotVNodeWithTypedProps<T>(
+  slotName: string,
+  slot: ((props: T) => VNode[]) | undefined,
+  props: T
+): VNode | null {
+  if (!slot) {
+    return null
+  }
+  const slotContent = flatten(slot(props))
+  // vue will normalize the slot, so slot must be an array
+  if (slotContent.length === 1) {
+    return slotContent[0]
+  }
+  else {
+    warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`)
+    return null
+  }
+}

src/_utils/vue/index.ts

@@ -4,7 +4,10 @@ export { createDataKey } from './create-data-key'
 export { createInjectionKey } from './create-injection-key'
 export { createRefSetter } from './create-ref-setter'
 export { flatten } from './flatten'
-export { getFirstSlotVNode } from './get-first-slot-vnode'
+export {
+  getFirstSlotVNode,
+  getFirstSlotVNodeWithTypedProps
+} from './get-first-slot-vnode'
 export { getSlot } from './get-slot'
 export { getVNodeChildren } from './get-v-node-children'
 export { isNodeVShowFalse } from './is-node-v-show-false'
@@ -16,7 +19,7 @@ export { render } from './render'
 export {
   isSlotEmpty,
   resolveSlot,
-  resolveSlotWithProps,
+  resolveSlotWithTypedProps,
   resolveWrappedSlot,
   resolveWrappedSlotWithProps
 } from './resolve-slot'

src/_utils/vue/resolve-slot.ts

@@ -39,8 +39,8 @@ export function resolveSlot(
   return (slot && ensureValidVNode(slot())) || fallback()
 }
 
-export function resolveSlotWithProps<T>(
-  slot: Slot | undefined,
+export function resolveSlotWithTypedProps<T>(
+  slot: Slot<T> | undefined,
   props: T,
   fallback: (props: T) => VNodeArrayChildren
 ): VNodeArrayChildren {

src/alert/index.ts

@@ -1,2 +1,2 @@
 export { alertProps, default as NAlert } from './src/Alert'
-export type { AlertProps } from './src/Alert'
+export type { AlertProps, AlertSlots } from './src/Alert'

src/alert/src/Alert.tsx

@@ -10,6 +10,8 @@ import {
   mergeProps,
   type PropType,
   ref,
+  type SlotsType,
+  type VNode,
   watchEffect
 } from 'vue'
 import { NBaseClose, NBaseIcon, NFadeInExpandTransition } from '../../_internal'
@@ -56,10 +58,17 @@ export const alertProps = {
 
 export type AlertProps = ExtractPublicPropTypes<typeof alertProps>
 
+export interface AlertSlots {
+  default?: () => VNode[]
+  icon?: () => VNode[]
+  header?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Alert',
   inheritAttrs: false,
   props: alertProps,
+  slots: Object as SlotsType<AlertSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/auto-complete/index.ts

@@ -1,6 +1,7 @@
 export { autoCompleteProps, default as NAutoComplete } from './src/AutoComplete'
-export type { AutoCompleteProps } from './src/AutoComplete'
+export type { AutoCompleteProps, AutoCompleteSlots } from './src/AutoComplete'
 export type {
+  AutoCompleteDefaultSlotProps,
   AutoCompleteGroupOption,
   AutoCompleteInst,
   AutoCompleteOption

src/auto-complete/src/AutoComplete.tsx

@@ -12,6 +12,7 @@ import type {
 } from '../../select/src/interface'
 import type { AutoCompleteTheme } from '../styles'
 import type {
+  AutoCompleteDefaultSlotProps,
   AutoCompleteInst,
   AutoCompleteOption,
   AutoCompleteOptions,
@@ -33,8 +34,10 @@ import {
   type InputHTMLAttributes,
   type PropType,
   ref,
+  type SlotsType,
   toRef,
   Transition,
+  type VNode,
   watchEffect,
   withDirectives
 } from 'vue'
@@ -47,7 +50,7 @@ import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins'
 import {
   call,
   type ExtractPublicPropTypes,
-  getFirstSlotVNode,
+  getFirstSlotVNodeWithTypedProps,
   type MaybeArray,
   useAdjustedTo,
   warnOnce
@@ -114,9 +117,17 @@ export const autoCompleteProps = {
 
 export type AutoCompleteProps = ExtractPublicPropTypes<typeof autoCompleteProps>
 
+export interface AutoCompleteSlots {
+  default?: (options: AutoCompleteDefaultSlotProps) => VNode[]
+  empty?: () => VNode[]
+  prefix?: () => VNode[]
+  suffix?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'AutoComplete',
   props: autoCompleteProps,
+  slots: Object as SlotsType<AutoCompleteSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {
@@ -363,12 +374,16 @@ export default defineComponent({
                   default: () => {
                     const defaultSlot = this.$slots.default
                     if (defaultSlot) {
-                      return getFirstSlotVNode(this.$slots, 'default', {
-                        handleInput: this.handleInput,
-                        handleFocus: this.handleFocus,
-                        handleBlur: this.handleBlur,
-                        value: this.mergedValue
-                      })
+                      return getFirstSlotVNodeWithTypedProps(
+                        'default',
+                        defaultSlot,
+                        {
+                          handleInput: this.handleInput,
+                          handleFocus: this.handleFocus,
+                          handleBlur: this.handleBlur,
+                          value: this.mergedValue
+                        }
+                      )
                     }
                     const { mergedTheme } = this
                     return (

src/auto-complete/src/interface.ts

@@ -22,3 +22,10 @@ export interface AutoCompleteInst {
   focus: () => void
   blur: () => void
 }
+
+export interface AutoCompleteDefaultSlotProps {
+  handleInput: (value: string) => void
+  handleFocus: (e: FocusEvent) => void
+  handleBlur: (e: FocusEvent) => void
+  value: string | null
+}

src/avatar-group/index.ts

@@ -1,2 +1,10 @@
 export { avatarGroupProps, default as NAvatarGroup } from './src/AvatarGroup'
-export type { AvatarGroupOption, AvatarGroupProps } from './src/AvatarGroup'
+export type {
+  AvatarGroupOption,
+  AvatarGroupProps,
+  AvatarGroupSlots
+} from './src/AvatarGroup'
+export type {
+  AvatarGroupAvatarSlotProps,
+  AvatarGroupRestSlotProps
+} from './src/interface'

src/avatar-group/src/AvatarGroup.tsx

@@ -2,13 +2,19 @@ import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import type { Size } from '../../avatar/src/interface'
 import type { AvatarGroupTheme } from '../styles'
+import type {
+  AvatarGroupAvatarSlotProps,
+  AvatarGroupRestSlotProps
+} from './interface'
 import {
   computed,
   type CSSProperties,
   defineComponent,
   h,
   type PropType,
-  provide
+  provide,
+  type SlotsType,
+  type VNode
 } from 'vue'
 import { useConfig, useTheme } from '../../_mixins'
 import { useRtl } from '../../_mixins/use-rtl'
@@ -40,9 +46,16 @@ export const avatarGroupProps = {
 
 export type AvatarGroupProps = ExtractPublicPropTypes<typeof avatarGroupProps>
 
+export interface AvatarGroupSlots {
+  avatar?: (props: AvatarGroupAvatarSlotProps) => VNode[]
+  rest?: (props: AvatarGroupRestSlotProps) => VNode[]
+  default?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'AvatarGroup',
   props: avatarGroupProps,
+  slots: Object as SlotsType<AvatarGroupSlots>,
   setup(props) {
     const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props)
     const mergedThemeRef = useTheme(

src/avatar-group/src/interface.ts

@@ -0,0 +1,10 @@
+import type { AvatarGroupOption } from './AvatarGroup'
+
+export interface AvatarGroupAvatarSlotProps {
+  option: AvatarGroupOption
+}
+
+export interface AvatarGroupRestSlotProps {
+  options: Array<AvatarGroupOption>
+  rest: number
+}

src/avatar/index.ts

@@ -1,2 +1,2 @@
 export { avatarProps, default as NAvatar } from './src/Avatar'
-export type { AvatarProps } from './src/Avatar'
+export type { AvatarProps, AvatarSlots } from './src/Avatar'

src/avatar/src/Avatar.tsx

@@ -12,6 +12,8 @@ import {
   onMounted,
   type PropType,
   ref,
+  type SlotsType,
+  type VNode,
   type VNodeChild,
   watch,
   watchEffect
@@ -65,9 +67,16 @@ export const avatarProps = {
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
 
+export interface AvatarSlots {
+  default?: () => VNode[]
+  placeholder?: () => VNode[]
+  fallback?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Avatar',
   props: avatarProps,
+  slots: Object as SlotsType<AvatarSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const hasLoadErrorRef = ref(false)

src/breadcrumb/index.ts

@@ -4,4 +4,7 @@ export {
   breadcrumbItemProps,
   default as NBreadcrumbItem
 } from './src/BreadcrumbItem'
-export type { BreadcrumbItemProps } from './src/BreadcrumbItem'
+export type {
+  BreadcrumbItemProps,
+  BreadcrumbItemSlots
+} from './src/BreadcrumbItem'

src/breadcrumb/src/BreadcrumbItem.tsx

@@ -4,7 +4,9 @@ import {
   type ExtractPropTypes,
   h,
   inject,
-  type PropType
+  type PropType,
+  type SlotsType,
+  type VNode
 } from 'vue'
 import { resolveSlot, warn } from '../../_utils'
 import { useBrowserLocation } from '../../_utils/composable/use-browser-location'
@@ -24,9 +26,15 @@ export type BreadcrumbItemProps = Partial<
   ExtractPropTypes<typeof breadcrumbItemProps>
 >
 
+export interface BreadcrumbItemSlots {
+  default?: () => VNode[]
+  separator?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'BreadcrumbItem',
   props: breadcrumbItemProps,
+  slots: Object as SlotsType<BreadcrumbItemSlots>,
   setup(props, { slots }) {
     const NBreadcrumb = inject(breadcrumbInjectionKey, null)
     if (!NBreadcrumb) {

src/button/index.ts

@@ -3,4 +3,4 @@ export {
   default as NButton,
   XButton as NxButton
 } from './src/Button'
-export type { ButtonProps } from './src/Button'
+export type { ButtonProps, ButtonSlots } from './src/Button'

src/button/src/Button.tsx

@@ -15,6 +15,8 @@ import {
   inject,
   type PropType,
   ref,
+  type SlotsType,
+  type VNode,
   type VNodeChild,
   watchEffect
 } from 'vue'
@@ -95,9 +97,15 @@ export const buttonProps = {
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 
+export interface ButtonSlots {
+  default?: () => VNode[]
+  icon?: () => VNode[]
+}
+
 const Button = defineComponent({
   name: 'Button',
   props: buttonProps,
+  slots: Object as SlotsType<ButtonSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/calendar/src/Calendar.tsx

@@ -1,7 +1,13 @@
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { CalendarTheme } from '../styles'
-import type { DateItem, OnPanelChange, OnUpdateValue } from './interface'
+import type {
+  CalendarDefaultSlotProps,
+  CalendarHeaderSlotProps,
+  DateItem,
+  OnPanelChange,
+  OnUpdateValue
+} from './interface'
 import {
   addMonths,
   format,
@@ -19,12 +25,14 @@ import {
   h,
   type PropType,
   ref,
-  toRef
+  type SlotsType,
+  toRef,
+  type VNode
 } from 'vue'
 import { NBaseIcon } from '../../_internal'
 import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
-import { call, resolveSlotWithProps } from '../../_utils'
+import { call, resolveSlotWithTypedProps } from '../../_utils'
 import { NButton } from '../../button'
 import { NButtonGroup } from '../../button-group'
 import { dateArray } from '../../date-picker/src/utils'
@@ -46,9 +54,15 @@ export const calendarProps = {
 
 export type CalendarProps = ExtractPublicPropTypes<typeof calendarProps>
 
+export interface CalendarSlots {
+  default?: (props: CalendarDefaultSlotProps) => VNode[]
+  header?: (props: CalendarHeaderSlotProps) => VNode[]
+}
+
 export default defineComponent({
   name: 'Calendar',
   props: calendarProps,
+  slots: Object as SlotsType<CalendarSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const themeRef = useTheme(
@@ -217,7 +231,7 @@ export default defineComponent({
       >
         <div class={`${mergedClsPrefix}-calendar-header`}>
           <div class={`${mergedClsPrefix}-calendar-header__title`}>
-            {resolveSlotWithProps(
+            {resolveSlotWithTypedProps(
               $slots.header,
               { year, month: calendarMonth },
               () => {

src/calendar/src/interface.ts

@@ -7,3 +7,14 @@ export interface DateItem {
 }
 
 export type OnPanelChange = (info: { year: number, month: number }) => void
+
+export interface CalendarDefaultSlotProps {
+  year: number
+  month: number
+  date: number
+}
+
+export interface CalendarHeaderSlotProps {
+  year: number
+  month: number
+}

src/card/index.ts

@@ -1,2 +1,2 @@
 export { cardProps, default as NCard } from './src/Card'
-export type { CardProps, CardSegmented } from './src/Card'
+export type { CardProps, CardSegmented, CardSlots } from './src/Card'

src/card/src/Card.tsx

@@ -8,6 +8,8 @@ import {
   defineComponent,
   h,
   type PropType,
+  type SlotsType,
+  type VNode,
   type VNodeChild
 } from 'vue'
 import { NBaseClose } from '../../_internal'
@@ -71,9 +73,19 @@ export const cardProps = {
 
 export type CardProps = ExtractPublicPropTypes<typeof cardProps>
 
+export interface CardSlots {
+  default?: () => VNode[]
+  cover?: () => VNode[]
+  header?: () => VNode[]
+  'header-extra'?: () => VNode[]
+  footer?: () => VNode[]
+  action?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Card',
   props: cardProps,
+  slots: Object as SlotsType<CardSlots>,
   setup(props) {
     const handleCloseClick = (): void => {
       const { onClose } = props

src/carousel/index.ts

@@ -1,4 +1,8 @@
 export { carouselProps, default as NCarousel } from './src/Carousel'
-export type { CarouselProps } from './src/Carousel'
+export type { CarouselProps, CarouselSlots } from './src/Carousel'
 export { default as NCarouselItem } from './src/CarouselItem'
-export type { CarouselInst } from './src/interface'
+export type {
+  CarouselArrowSlotProps,
+  CarouselDotSlotProps,
+  CarouselInst
+} from './src/interface'

src/carousel/src/Carousel.tsx

@@ -1,9 +1,18 @@
-import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue'
+import type {
+  CSSProperties,
+  PropType,
+  Ref,
+  SlotsType,
+  TransitionProps,
+  VNode
+} from 'vue'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import type { CarouselTheme } from '../styles'
 import type {
   ArrowScopedSlotProps,
+  CarouselArrowSlotProps,
+  CarouselDotSlotProps,
   CarouselInst,
   DotScopedSlotProps,
   Size
@@ -31,7 +40,7 @@ import {
 } from 'vue'
 import { VResizeObserver } from 'vueuc'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
-import { flatten, keep, resolveSlotWithProps } from '../../_utils'
+import { flatten, keep, resolveSlotWithTypedProps } from '../../_utils'
 import { carouselLight } from '../styles'
 import NCarouselArrow from './CarouselArrow'
 import {
@@ -139,12 +148,19 @@ export const carouselProps = {
 
 export type CarouselProps = ExtractPublicPropTypes<typeof carouselProps>
 
+export interface CarouselSlots {
+  default?: () => VNode[]
+  arrow?: (props: CarouselArrowSlotProps) => VNode[]
+  dots?: (props: CarouselDotSlotProps) => VNode[]
+}
+
 // only one carousel is allowed to trigger touch globally
 let globalDragging = false
 
 export default defineComponent({
   name: 'Carousel',
   props: carouselProps,
+  slots: Object as SlotsType<CarouselSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     // Dom
@@ -1025,7 +1041,7 @@ export default defineComponent({
         </VResizeObserver>
         {this.showDots
         && dotSlotProps.total > 1
-        && resolveSlotWithProps(dotsSlot, dotSlotProps, () => [
+        && resolveSlotWithTypedProps(dotsSlot, dotSlotProps, () => [
           <NCarouselDots
             key={dotType + dotPlacement}
             total={dotSlotProps.total}
@@ -1036,7 +1052,7 @@ export default defineComponent({
           />
         ])}
         {showArrow
-        && resolveSlotWithProps(arrowSlot, arrowSlotProps, () => [
+        && resolveSlotWithTypedProps(arrowSlot, arrowSlotProps, () => [
           <NCarouselArrow />
         ])}
       </div>

src/carousel/src/interface.ts

@@ -25,3 +25,17 @@ export interface Size {
   width: number
   height: number
 }
+
+export interface CarouselArrowSlotProps {
+  total: number
+  currentIndex: number
+  to: (index: number) => void
+  prev: () => void
+  next: () => void
+}
+
+export interface CarouselDotSlotProps {
+  total: number
+  currentIndex: number
+  to: (index: number) => void
+}

src/cascader/index.ts

@@ -1,3 +1,3 @@
 export { cascaderProps, default as NCascader } from './src/Cascader'
-export type { CascaderProps } from './src/Cascader'
+export type { CascaderProps, CascaderSlots } from './src/Cascader'
 export type { CascaderInst, CascaderOption } from './src/interface'

src/cascader/src/Cascader.tsx

@@ -36,6 +36,7 @@ import {
   type PropType,
   provide,
   ref,
+  type SlotsType,
   toRef,
   type VNode,
   type VNodeChild,
@@ -193,9 +194,17 @@ export const cascaderProps = {
 
 export type CascaderProps = ExtractPublicPropTypes<typeof cascaderProps>
 
+export interface CascaderSlots {
+  action?: () => VNode[]
+  arrow?: () => VNode[]
+  empty?: () => VNode[]
+  'not-found'?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Cascader',
   props: cascaderProps,
+  slots: Object as SlotsType<CascaderSlots>,
   setup(props, { slots }) {
     if (__DEV__) {
       watchEffect(() => {

src/collapse/demos/enUS/index.demo-entry.md

@@ -46,14 +46,15 @@ trigger-areas.vue
 
 | Name | Parameters | Description |
 | --- | --- | --- |
-| default | `()` | The contents of the collapsible panel. |
 | arrow | `(props: { collapsed: boolean })` | Custom icons for folding panels. |
+| default | `()` | The contents of the collapsible panel. |
+| header | `(props: { collapsed: boolean })` | The content of the header of the collapsed panel node. |
 
 ### CollapseItem Slots
 
 | Name | Parameters | Description |
 | --- | --- | --- |
+| arrow | `(props: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |
 | default | `()` | The contents of the collapsible panel node. |
 | header | `(props: { collapsed: boolean })` | The content of the header of the collapsed panel node. |
 | header-extra | `(props: { collapsed: boolean })` | The extra content of the header of the collapsed panel node. |
-| arrow | `(props: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |

src/collapse/demos/zhCN/index.demo-entry.md

@@ -45,16 +45,17 @@ rtl-debug.vue
 
 ### Collapse Slots
 
-| 名称    | 参数                              | 说明                 |
-| ------- | --------------------------------- | -------------------- |
-| default | `()`                              | 折叠面板的内容       |
-| arrow   | `(props: { collapsed: boolean })` | 折叠面板的自定义图标 |
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| arrow | `(props: { collapsed: boolean })` | 折叠面板的自定义图标 |
+| default | `()` | 折叠面板的内容 |
+| header-extra | `(props: { collapsed: boolean })` | 折叠面板节点头部的额外内容 |
 
 ### CollapseItem Slots
 
 | 名称 | 参数 | 说明 |
 | --- | --- | --- |
+| arrow | `(props: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
 | default | `()` | 折叠面板节点的内容 |
 | header | `(props: { collapsed: boolean })` | 折叠面板节点头部的内容 |
 | header-extra | `(props: { collapsed: boolean })` | 折叠面板节点头部的额外内容 |
-| arrow | `(props: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |

src/collapse/index.ts

@@ -1,4 +1,10 @@
 export { collapseProps, default as NCollapse } from './src/Collapse'
-export type { CollapseProps } from './src/Collapse'
+export type { CollapseProps, CollapseSlots } from './src/Collapse'
 export { collapseItemProps, default as NCollapseItem } from './src/CollapseItem'
-export type { CollapseItemProps } from './src/CollapseItem'
+export type { CollapseItemProps, CollapseItemSlots } from './src/CollapseItem'
+export type {
+  CollapseArrowSlotProps,
+  CollapseItemArrowSlotProps,
+  CollapseItemHeaderExtraSlotProps,
+  CollapseItemHeaderSlotProps
+} from './src/interface'

src/collapse/src/Collapse.tsx

@@ -1,6 +1,9 @@
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type {
+  CollapseArrowSlotProps,
+  CollapseItemHeaderExtraSlotProps,
+  CollapseItemHeaderSlotProps,
   HeaderClickInfo,
   OnItemHeaderClick,
   OnItemHeaderClickImpl,
@@ -18,7 +21,8 @@ import {
   provide,
   type Ref,
   ref,
-  type Slots
+  type SlotsType,
+  type VNode
 } from 'vue'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
 import { useRtl } from '../../_mixins/use-rtl'
@@ -82,11 +86,18 @@ export const collapseProps = {
 
 export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
 
+export interface CollapseSlots {
+  default?: () => VNode[]
+  arrow?: (props: CollapseArrowSlotProps) => VNode[]
+  header?: (props: CollapseItemHeaderSlotProps) => VNode[]
+  'header-extra'?: (props: CollapseItemHeaderExtraSlotProps) => VNode[]
+}
+
 export interface NCollapseInjection {
   props: ExtractPropTypes<typeof collapseProps>
   expandedNamesRef: Ref<string | number | Array<string | number> | null>
   mergedClsPrefixRef: Ref<string>
-  slots: Slots
+  slots: CollapseSlots
   toggleItem: (
     collapse: boolean,
     name: string | number,
@@ -100,6 +111,7 @@ export const collapseInjectionKey
 export default defineComponent({
   name: 'Collapse',
   props: collapseProps,
+  slots: Object as SlotsType<CollapseSlots>,
   setup(props, { slots }) {
     const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef }
       = useConfig(props)

src/collapse/src/CollapseItem.tsx

@@ -1,7 +1,20 @@
 import type { ExtractPublicPropTypes } from '../../_utils'
+import type {
+  CollapseItemArrowSlotProps,
+  CollapseItemHeaderExtraSlotProps,
+  CollapseItemHeaderSlotProps
+} from './interface'
 import { createId, happensIn } from 'seemly'
 import { useMemo } from 'vooks'
-import { computed, defineComponent, h, inject, type PropType, toRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  type PropType,
+  toRef,
+  type VNode
+} from 'vue'
 import { NBaseIcon } from '../../_internal'
 import {
   ChevronLeftIcon as ArrowLeftIcon,
@@ -10,7 +23,7 @@ import {
 import { useConfig } from '../../_mixins'
 import { useRtl } from '../../_mixins/use-rtl'
 import {
-  resolveSlotWithProps,
+  resolveSlotWithTypedProps,
   resolveWrappedSlotWithProps,
   throwError
 } from '../../_utils'
@@ -26,6 +39,13 @@ export const collapseItemProps = {
 
 export type CollapseItemProps = ExtractPublicPropTypes<typeof collapseItemProps>
 
+export interface CollapseItemSlots {
+  default?: () => VNode[]
+  header?: (props: CollapseItemHeaderSlotProps) => VNode[]
+  'header-extra'?: (props: CollapseItemHeaderExtraSlotProps) => VNode[]
+  arrow?: (props: CollapseItemArrowSlotProps) => VNode[]
+}
+
 export default defineComponent({
   name: 'CollapseItem',
   props: collapseItemProps,
@@ -109,7 +129,7 @@ export default defineComponent({
       disabled,
       triggerAreas
     } = this
-    const headerNode = resolveSlotWithProps(
+    const headerNode = resolveSlotWithTypedProps(
       $slots.header,
       { collapsed },
       () => [this.title]
@@ -145,17 +165,11 @@ export default defineComponent({
               key={this.rtlEnabled ? 0 : 1}
               data-arrow
             >
-              {resolveSlotWithProps(arrowSlot, { collapsed }, () => [
+              {resolveSlotWithTypedProps(arrowSlot, { collapsed }, () => [
                 <NBaseIcon clsPrefix={mergedClsPrefix}>
                   {{
-                    default:
-                      collapseSlots.expandIcon
-                      ?? (() =>
-                        this.rtlEnabled ? (
-                          <ArrowLeftIcon />
-                        ) : (
-                          <ArrowRightIcon />
-                        ))
+                    default: () =>
+                      this.rtlEnabled ? <ArrowLeftIcon /> : <ArrowRightIcon />
                   }}
                 </NBaseIcon>
               ])}

src/collapse/src/interface.ts

@@ -36,3 +36,19 @@ export interface HeaderClickInfo<T> {
   expanded: boolean
   event: MouseEvent
 }
+
+export interface CollapseArrowSlotProps {
+  collapsed: boolean
+}
+
+export interface CollapseItemHeaderSlotProps {
+  collapsed: boolean
+}
+
+export interface CollapseItemHeaderExtraSlotProps {
+  collapsed: boolean
+}
+
+export interface CollapseItemArrowSlotProps {
+  collapsed: boolean
+}

src/color-picker/index.ts

@@ -1,2 +1,2 @@
 export { colorPickerProps, default as NColorPicker } from './src/ColorPicker'
-export type { ColorPickerProps } from './src/ColorPicker'
+export type { ColorPickerProps, ColorPickerSlots } from './src/ColorPicker'

src/color-picker/src/ColorPicker.tsx

@@ -43,6 +43,7 @@ import {
   provide,
   type Ref,
   ref,
+  type SlotsType,
   toRef,
   Transition,
   type VNode,
@@ -124,9 +125,16 @@ export const colorPickerProps = {
 
 export type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerProps>
 
+export interface ColorPickerSlots {
+  default?: () => VNode[]
+  label?: (color: string | null) => VNode[]
+  action?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'ColorPicker',
   props: colorPickerProps,
+  slots: Object as SlotsType<ColorPickerSlots>,
   setup(props, { slots }) {
     const selfRef = ref<HTMLElement | null>(null)
     let upcomingValue: string | null = null
@@ -701,7 +709,7 @@ export default defineComponent({
     }
   },
   render() {
-    const { $slots, mergedClsPrefix, onRender } = this
+    const { mergedClsPrefix, onRender } = this
     onRender?.()
     return (
       <div
@@ -721,11 +729,7 @@ export default defineComponent({
                       hsla={this.hsla}
                       disabled={this.mergedDisabled}
                       onClick={this.handleTriggerClick}
-                    >
-                      {{
-                        label: $slots.label
-                      }}
-                    </ColorPickerTrigger>
+                    />
                   )
                 }}
               </VTarget>,

src/color-picker/src/ColorPickerTrigger.tsx

@@ -1,9 +1,10 @@
 import { type HSLA, toHslaString } from 'seemly'
-import { defineComponent, h, inject, type PropType } from 'vue'
+import { defineComponent, h, inject, type PropType, type SlotsType } from 'vue'
 import { colorPickerInjectionKey } from './context'
 
 export default defineComponent({
   name: 'ColorPickerTrigger',
+  slots: Object as SlotsType<Record<string, never>>,
   props: {
     clsPrefix: {
       type: String,

src/color-picker/src/context.ts

@@ -1,11 +1,12 @@
-import type { ComputedRef, Ref, Slots } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
 import type { ColorPickerTheme } from '../styles'
+import type { ColorPickerSlots } from './ColorPicker'
 import type { RenderLabel } from './interface'
 import { createInjectionKey } from '../../_utils'
 
 export const colorPickerInjectionKey = createInjectionKey<{
   themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>
-  colorPickerSlots: Slots
+  colorPickerSlots: ColorPickerSlots
   renderLabelRef: Ref<RenderLabel | undefined>
 }>('n-color-picker')

src/data-table/demos/enUS/controlled-sorter.demo.vue

@@ -1,34 +1,32 @@
+<markdown>
 # Controlled sorter
 
 If one of the column objects' `sortOrder` is set to `'ascend'`, `'descend'` or `false`. The sorting behavior the table will be in a controlled manner. If multiple columns' `sortOrder` are set to `'ascend'` or `'descend'`, only first column of them will be applied.
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName('ascend')">Sort By Name (Ascend)</n-button>
-    <n-button @click="sortName('descend')">Sort By Name (Descend)</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    @update:sorter="handleSorterChange"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableBaseColumn,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { defineComponent, reactive, ref } from 'vue'
 
-const nameColumn = {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const nameColumn: DataTableBaseColumn<RowData> = {
   title: 'Name',
   key: 'name',
   sortOrder: false,
   sorter: 'default'
 }
 
-const ageColumn = {
+const ageColumn: DataTableBaseColumn<RowData> = {
   title: 'Age',
   key: 'age',
   sortOrder: false,
@@ -37,13 +35,13 @@ const ageColumn = {
   }
 }
 
-const columns = [
+const columns: DataTableBaseColumn<RowData>[] = [
   nameColumn,
   ageColumn,
   {
     title: 'Address',
     key: 'address',
-    defaultFilter: ['London', 'New York'],
+    defaultFilterOptionValues: ['London', 'New York'],
     filterOptions: [
       {
         label: 'London',
@@ -55,7 +53,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return row.address.includes(value)
+      return row.address.includes(value as string)
     }
   }
 ]
@@ -91,7 +89,22 @@ export default defineComponent({
   setup() {
     const nameColumnReactive = reactive(nameColumn)
     const ageColumnReactive = reactive(ageColumn)
-    const columnsRef = ref(columns)
+    const columnsRef = ref<DataTableBaseColumn<RowData>[]>(columns)
+
+    function handleSorterChange(sorter: DataTableSortState) {
+      columnsRef.value.forEach((column: DataTableBaseColumn<RowData>) => {
+        /** column.sortOrder !== undefined means it is uncontrolled */
+        if (column.sortOrder === undefined)
+          return
+        if (!sorter) {
+          column.sortOrder = false
+          return
+        }
+        if (column.key === sorter.columnKey)
+          column.sortOrder = sorter.order
+        else column.sortOrder = false
+      })
+    }
 
     return {
       data,
@@ -99,28 +112,37 @@ export default defineComponent({
       nameColumn: nameColumnReactive,
       ageColumn: ageColumnReactive,
       pagination: { pageSize: 5 },
-      sortName(order) {
+      sortName(order: DataTableSortOrder) {
         nameColumnReactive.sortOrder = order
       },
       clearSorter() {
         nameColumnReactive.sortOrder = false
         ageColumnReactive.sortOrder = false
       },
-      handleSorterChange(sorter) {
-        columnsRef.value.forEach((column) => {
-          /** column.sortOrder !== undefined means it is uncontrolled */
-          if (column.sortOrder === undefined)
-            return
-          if (!sorter) {
-            column.sortOrder = false
-            return
-          }
-          if (column.key === sorter.columnKey)
-            column.sortOrder = sorter.order
-          else column.sortOrder = false
-        })
-      }
+      handleSorterChange
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName('ascend')">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="sortName('descend')">
+        Sort By Name (Descend)
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      @update:sorter="handleSorterChange"
+    />
+  </n-space>
+</template>

src/data-table/demos/enUS/index.demo-entry.md

@@ -37,7 +37,7 @@ custom-select.vue
 group-header.vue
 controlled-page.vue
 controlled-filter.vue
-controlled-sorter
+controlled-sorter.vue
 controlled-multiple-sorter
 fixed-header.vue
 fixed-header-column.vue

src/data-table/demos/zhCN/controlled-sorter.demo.vue

@@ -1,34 +1,32 @@
+<markdown>
 # 受控的排序
 
 如果列对象的 `sortOrder` 属性被设为 `'ascend'`、`'descend'` 或者 `false`，表格的排序将为受控状态。如果很多列的 `sortOrder` 都被设定了，那么只有他们之中的第一列会生效。
+</markdown>
 
-```html
-<n-space vertical :size="12">
-  <n-space>
-    <n-button @click="sortName('ascend')">Sort By Name (Ascend)</n-button>
-    <n-button @click="sortName('descend')">Sort By Name (Descend)</n-button>
-    <n-button @click="clearSorter">Clear Sorter</n-button>
-  </n-space>
-  <n-data-table
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"
-    @update:sorter="handleSorterChange"
-  />
-</n-space>
-```
-
-```js
+<script lang="ts">
+import type {
+  DataTableBaseColumn,
+  DataTableSortOrder,
+  DataTableSortState
+} from 'naive-ui'
 import { defineComponent, reactive, ref } from 'vue'
 
-const nameColumn = {
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const nameColumn: DataTableBaseColumn<RowData> = {
   title: 'Name',
   key: 'name',
   sortOrder: false,
   sorter: 'default'
 }
 
-const ageColumn = {
+const ageColumn: DataTableBaseColumn<RowData> = {
   title: 'Age',
   key: 'age',
   sortOrder: false,
@@ -37,13 +35,13 @@ const ageColumn = {
   }
 }
 
-const columns = [
+const columns: DataTableBaseColumn<RowData>[] = [
   nameColumn,
   ageColumn,
   {
     title: 'Address',
     key: 'address',
-    defaultFilter: ['London', 'New York'],
+    defaultFilterOptionValues: ['London', 'New York'],
     filterOptions: [
       {
         label: 'London',
@@ -55,7 +53,7 @@ const columns = [
       }
     ],
     filter(value, row) {
-      return row.address.includes(value)
+      return row.address.includes(value as string)
     }
   }
 ]
@@ -91,7 +89,22 @@ export default defineComponent({
   setup() {
     const nameColumnReactive = reactive(nameColumn)
     const ageColumnReactive = reactive(ageColumn)
-    const columnsRef = ref(columns)
+    const columnsRef = ref<DataTableBaseColumn<RowData>[]>(columns)
+
+    function handleSorterChange(sorter: DataTableSortState) {
+      columnsRef.value.forEach((column: DataTableBaseColumn<RowData>) => {
+        /** column.sortOrder !== undefined means it is uncontrolled */
+        if (column.sortOrder === undefined)
+          return
+        if (!sorter) {
+          column.sortOrder = false
+          return
+        }
+        if (column.key === sorter.columnKey)
+          column.sortOrder = sorter.order
+        else column.sortOrder = false
+      })
+    }
 
     return {
       data,
@@ -99,28 +112,37 @@ export default defineComponent({
       nameColumn: nameColumnReactive,
       ageColumn: ageColumnReactive,
       pagination: { pageSize: 5 },
-      sortName(order) {
+      sortName(order: DataTableSortOrder) {
         nameColumnReactive.sortOrder = order
       },
       clearSorter() {
         nameColumnReactive.sortOrder = false
         ageColumnReactive.sortOrder = false
       },
-      handleSorterChange(sorter) {
-        columnsRef.value.forEach((column) => {
-          /** column.sortOrder !== undefined means it is uncontrolled */
-          if (column.sortOrder === undefined)
-            return
-          if (!sorter) {
-            column.sortOrder = false
-            return
-          }
-          if (column.key === sorter.columnKey)
-            column.sortOrder = sorter.order
-          else column.sortOrder = false
-        })
-      }
+      handleSorterChange
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-space vertical :size="12">
+    <n-space>
+      <n-button @click="sortName('ascend')">
+        Sort By Name (Ascend)
+      </n-button>
+      <n-button @click="sortName('descend')">
+        Sort By Name (Descend)
+      </n-button>
+      <n-button @click="clearSorter">
+        Clear Sorter
+      </n-button>
+    </n-space>
+    <n-data-table
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      @update:sorter="handleSorterChange"
+    />
+  </n-space>
+</template>

src/data-table/demos/zhCN/index.demo-entry.md

@@ -39,7 +39,7 @@ custom-select.vue
 group-header.vue
 controlled-page.vue
 controlled-filter.vue
-controlled-sorter
+controlled-sorter.vue
 controlled-multiple-sorter
 fixed-header.vue
 fixed-header-column.vue

src/data-table/index.ts

@@ -21,6 +21,8 @@ export type {
   RowData as DataTableRowData,
   RowKey as DataTableRowKey,
   TableSelectionColumn as DataTableSelectionColumn,
+  DataTableSlots,
+  SortOrder as DataTableSortOrder,
   SortState as DataTableSortState
 } from './src/interface'
 export * from './src/publicTypes'

src/data-table/src/DataTable.tsx

@@ -1,6 +1,7 @@
 import type {
   CsvOptionsType,
   DataTableInst,
+  DataTableSlots,
   MainTableRef,
   RowKey
 } from './interface'
@@ -12,6 +13,7 @@ import {
   h,
   provide,
   ref,
+  type SlotsType,
   toRef,
   Transition,
   watchEffect
@@ -42,6 +44,7 @@ export default defineComponent({
   name: 'DataTable',
   alias: ['AdvancedTable'],
   props: dataTableProps,
+  slots: Object as SlotsType<DataTableSlots>,
   setup(props, { slots }) {
     if (__DEV__) {
       watchEffect(() => {

src/data-table/src/interface.ts

@@ -5,7 +5,7 @@ import type {
   HTMLAttributes,
   PropType,
   Ref,
-  Slots,
+  VNode,
   VNodeChild
 } from 'vue'
 import type { VirtualListInst } from 'vueuc'
@@ -178,6 +178,12 @@ export const dataTableProps = {
   >
 } as const
 
+export interface DataTableSlots {
+  default?: () => VNode[]
+  empty?: () => VNode[]
+  loading?: () => VNode[]
+}
+
 export type FilterOptionValue = string | number
 export type ColumnKey = string | number
 export type RowKey = string | number
@@ -357,7 +363,7 @@ export type DataTableSelectionOptions<T = InternalRowData> = Array<
 >
 export interface DataTableInjection {
   props: DataTableSetupProps
-  slots: Slots
+  slots: DataTableSlots
   indentRef: Ref<number>
   childTriggerColIndexRef: Ref<number>
   componentId: string

src/data-table/src/use-group-header.ts

@@ -50,12 +50,13 @@ function getRowsAndCols(
   let maxDepth = -1
   let totalRowSpan = 0
   let hasEllipsis = false
+  let currentLeafIndex = 0
   function ensureMaxDepth(columns: TableColumns, currentDepth: number): void {
     if (currentDepth > maxDepth) {
       rows[currentDepth] = []
       maxDepth = currentDepth
     }
-    columns.forEach((column, index) => {
+    columns.forEach((column) => {
       if ('children' in column) {
         ensureMaxDepth(column.children, currentDepth + 1)
       }
@@ -68,7 +69,7 @@ function getRowsAndCols(
             key !== undefined ? formatLength(getResizableWidth(key)) : undefined
           ),
           column,
-          index,
+          index: currentLeafIndex++,
           // The width property is only applied to horizontally virtual scroll table
           width: column.width === undefined ? 128 : Number(column.width)
         })
@@ -81,7 +82,7 @@ function getRowsAndCols(
     })
   }
   ensureMaxDepth(columns, 0)
-  let currentLeafIndex = 0
+  currentLeafIndex = 0
   function ensureColLayout(columns: TableColumns, currentDepth: number): void {
     let hideUntilIndex = 0
     columns.forEach((column) => {

src/date-picker/demos/enUS/index.demo-entry.md

@@ -220,9 +220,9 @@ panel.vue
 
 | 名称 | 参数 | 说明 | 版本 |
 | --- | --- | --- | --- |
-| now | `(props: { onNow: () => void, text: string })` | Now button of the panel. | 2.40.0 |
 | clear | `(props: { onClear: () => void, text: string })` | Clear button of the panel. | 2.40.0 |
 | confirm | `(props: { onConfirm: () => void, disabled: boolean, text: string })` | Confirm button of the panel. | 2.40.0 |
+| now | `(props: { onNow: () => void, text: string })` | Now button of the panel. | 2.40.0 |
 
 ### DatePicker Methods
 

src/date-picker/demos/zhCN/index.demo-entry.md

@@ -220,9 +220,9 @@ form-debug.vue
 
 | 名称 | 参数 | 说明 | 版本 |
 | --- | --- | --- | --- |
-| now | `(props: { onNow: () => void, text: string })` | 面板的此刻按钮 | 2.40.0 |
 | clear | `(props: { onClear: () => void, text: string })` | 面板的清除按钮 | 2.40.0 |
 | confirm | `(props: { onConfirm: () => void, disabled: boolean, text: string })` | 面板的确认按钮 | 2.40.0 |
+| now | `(props: { onNow: () => void, text: string })` | 面板的此刻按钮 | 2.40.0 |
 
 ### DatePicker Methods
 

src/date-picker/index.ts

@@ -1,3 +1,4 @@
 export { default as NDatePicker } from './src/DatePicker'
+export type { DatePickerSlots } from './src/DatePicker'
 export { datePickerProps } from './src/props'
 export type * from './src/public-types'

src/date-picker/src/DatePicker.tsx

@@ -23,6 +23,7 @@ import {
   provide,
   type Ref,
   ref,
+  type SlotsType,
   toRef,
   Transition,
   type VNode,
@@ -68,9 +69,27 @@ import {
 
 export type DatePickerSetupProps = ExtractPropTypes<typeof datePickerProps>
 
+export interface DatePickerSlots {
+  'date-icon'?: () => VNode[]
+  footer?: () => VNode[]
+  'next-month'?: () => VNode[]
+  'next-year'?: () => VNode[]
+  'prev-month'?: () => VNode[]
+  'prev-year'?: () => VNode[]
+  separator?: () => VNode[]
+  confirm?: (props: {
+    onConfirm: () => void
+    disabled: boolean
+    text: string
+  }) => VNode[]
+  clear?: (props: { onClear: () => void, text: string }) => VNode[]
+  now?: (props: { onNow: () => void, text: string }) => VNode[]
+}
+
 export default defineComponent({
   name: 'DatePicker',
   props: datePickerProps,
+  slots: Object as SlotsType<DatePickerSlots>,
   setup(props, { slots }) {
     if (__DEV__) {
       watchEffect(() => {

src/date-picker/src/interface.ts

@@ -1,4 +1,4 @@
-import type { Ref, Slots, UnwrapNestedRefs } from 'vue'
+import type { Ref, UnwrapNestedRefs } from 'vue'
 import type { VirtualListInst } from 'vueuc'
 import type { ScrollbarInst } from '../../_internal'
 import type { MergedTheme } from '../../_mixins'
@@ -11,6 +11,7 @@ import type {
 } from '../../time-picker/src/interface'
 import type { TimePickerProps } from '../../time-picker/src/TimePicker'
 import type { DatePickerTheme } from '../styles/light'
+import type { DatePickerSlots } from './DatePicker'
 import type {
   dualCalendarValidation,
   uniCalendarValidation
@@ -135,7 +136,7 @@ export type DatePickerInjection = {
   monthFormatRef: Ref<string>
   yearFormatRef: Ref<string>
   quarterFormatRef: Ref<string>
-  datePickerSlots: Slots
+  datePickerSlots: DatePickerSlots
   yearRangeRef: Ref<[number, number]>
 } & ReturnType<typeof uniCalendarValidation> &
 ReturnType<typeof dualCalendarValidation>

src/date-picker/src/panel/date.tsx

@@ -10,7 +10,11 @@ import {
   FastForwardIcon,
   ForwardIcon
 } from '../../../_internal/icons'
-import { resolveSlot, resolveSlotWithProps, warnOnce } from '../../../_utils'
+import {
+  resolveSlot,
+  resolveSlotWithTypedProps,
+  warnOnce
+} from '../../../_utils'
 import { NButton, NxButton } from '../../../button'
 import PanelHeader from './panelHeader'
 import { useCalendar, useCalendarProps } from './use-calendar'
@@ -44,8 +48,14 @@ export default defineComponent({
     return useCalendar(props, props.type)
   },
   render() {
-    const { mergedClsPrefix, mergedTheme, shortcuts, onRender, $slots, type }
-      = this
+    const {
+      mergedClsPrefix,
+      mergedTheme,
+      shortcuts,
+      onRender,
+      datePickerSlots,
+      type
+    } = this
     onRender?.()
     return (
       <div
@@ -66,13 +76,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.prevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.prevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
@@ -87,13 +101,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.nextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.nextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -180,7 +198,7 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear')
-                ? resolveSlotWithProps(
+                ? resolveSlotWithTypedProps(
                     this.$slots.clear,
                     {
                       onClear: this.handleClearClick,
@@ -199,7 +217,7 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('now')
-                ? resolveSlotWithProps(
+                ? resolveSlotWithTypedProps(
                     this.$slots.now,
                     {
                       onNow: this.handleNowClick,

src/date-picker/src/panel/daterange.tsx

@@ -10,7 +10,11 @@ import {
   FastForwardIcon,
   ForwardIcon
 } from '../../../_internal/icons'
-import { resolveSlot, resolveSlotWithProps, warnOnce } from '../../../_utils'
+import {
+  resolveSlot,
+  resolveSlotWithTypedProps,
+  warnOnce
+} from '../../../_utils'
 import { NButton, NxButton } from '../../../button'
 import PanelHeader from './panelHeader'
 import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar'
@@ -32,7 +36,13 @@ export default defineComponent({
     return useDualCalendar(props, 'daterange')
   },
   render() {
-    const { mergedClsPrefix, mergedTheme, shortcuts, onRender, $slots } = this
+    const {
+      mergedClsPrefix,
+      mergedTheme,
+      shortcuts,
+      onRender,
+      datePickerSlots
+    } = this
     onRender?.()
 
     return (
@@ -57,13 +67,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.startCalendarPrevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.startCalendarPrevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
@@ -78,13 +92,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.startCalendarNextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.startCalendarNextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -148,13 +166,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.endCalendarPrevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.endCalendarPrevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
@@ -169,13 +191,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.endCalendarNextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.endCalendarNextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -261,8 +287,8 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear')
-                ? resolveSlotWithProps(
-                    $slots.clear,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.clear,
                     {
                       onClear: this.handleClearClick,
                       text: this.locale.clear
@@ -280,8 +306,8 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('confirm')
-                ? resolveSlotWithProps(
-                    $slots.confirm,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.confirm,
                     {
                       onConfirm: this.handleConfirmClick,
                       disabled: this.isRangeInvalid || this.isSelecting,

src/date-picker/src/panel/datetime.tsx

@@ -11,7 +11,7 @@ import {
   FastForwardIcon,
   ForwardIcon
 } from '../../../_internal/icons'
-import { resolveSlot, resolveSlotWithProps } from '../../../_utils'
+import { resolveSlot, resolveSlotWithTypedProps } from '../../../_utils'
 import { NButton, NxButton } from '../../../button'
 import { NInput } from '../../../input'
 import { NTimePicker } from '../../../time-picker'
@@ -36,8 +36,8 @@ export default defineComponent({
       mergedTheme,
       shortcuts,
       timePickerProps,
-      onRender,
-      $slots
+      datePickerSlots,
+      onRender
     } = this
     onRender?.()
 
@@ -91,13 +91,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.prevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.prevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
@@ -112,13 +116,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.nextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.nextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -198,8 +206,8 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear')
-                ? resolveSlotWithProps(
-                    this.$slots.clear,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.clear,
                     {
                       onClear: this.clearSelectedDateTime,
                       text: this.locale.clear
@@ -217,8 +225,8 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('now')
-                ? resolveSlotWithProps(
-                    $slots.now,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.now,
                     {
                       onNow: this.handleNowClick,
                       text: this.locale.now
@@ -236,8 +244,8 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('confirm')
-                ? resolveSlotWithProps(
-                    $slots.confirm,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.confirm,
                     {
                       onConfirm: this.handleConfirmClick,
                       disabled: this.isDateInvalid,

src/date-picker/src/panel/datetimerange.tsx

@@ -10,7 +10,11 @@ import {
   FastForwardIcon,
   ForwardIcon
 } from '../../../_internal/icons'
-import { resolveSlot, resolveSlotWithProps, warnOnce } from '../../../_utils'
+import {
+  resolveSlot,
+  resolveSlotWithTypedProps,
+  warnOnce
+} from '../../../_utils'
 import { NButton, NxButton } from '../../../button'
 import { NInput } from '../../../input'
 import { NTimePicker } from '../../../time-picker'
@@ -40,7 +44,7 @@ export default defineComponent({
       shortcuts,
       timePickerProps,
       onRender,
-      $slots
+      datePickerSlots
     } = this
     onRender?.()
 
@@ -132,13 +136,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.startCalendarPrevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.startCalendarPrevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthYearSeparator={this.calendarHeaderMonthYearSeparator}
@@ -153,13 +161,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.startCalendarNextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.startCalendarNextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -233,13 +245,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__fast-prev`}
               onClick={this.endCalendarPrevYear}
             >
-              {resolveSlot($slots['prev-year'], () => [<FastBackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-year'], () => [
+                <FastBackwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__prev`}
               onClick={this.endCalendarPrevMonth}
             >
-              {resolveSlot($slots['prev-month'], () => [<BackwardIcon />])}
+              {resolveSlot(datePickerSlots['prev-month'], () => [
+                <BackwardIcon />
+              ])}
             </div>
             <PanelHeader
               monthBeforeYear={this.calendarMonthBeforeYear}
@@ -254,13 +270,17 @@ export default defineComponent({
               class={`${mergedClsPrefix}-date-panel-month__next`}
               onClick={this.endCalendarNextMonth}
             >
-              {resolveSlot($slots['next-month'], () => [<ForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-month'], () => [
+                <ForwardIcon />
+              ])}
             </div>
             <div
               class={`${mergedClsPrefix}-date-panel-month__fast-next`}
               onClick={this.endCalendarNextYear}
             >
-              {resolveSlot($slots['next-year'], () => [<FastForwardIcon />])}
+              {resolveSlot(datePickerSlots['next-year'], () => [
+                <FastForwardIcon />
+              ])}
             </div>
           </div>
           <div class={`${mergedClsPrefix}-date-panel-weekdays`}>
@@ -356,8 +376,8 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear')
-                ? resolveSlotWithProps(
-                    $slots.clear,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.clear,
                     {
                       onClear: this.handleClearClick,
                       text: this.locale.clear
@@ -375,8 +395,8 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('confirm')
-                ? resolveSlotWithProps(
-                    $slots.confirm,
+                ? resolveSlotWithTypedProps(
+                    datePickerSlots.confirm,
                     {
                       onConfirm: this.handleConfirmClick,
                       disabled: this.isRangeInvalid || this.isSelecting,

src/date-picker/src/panel/month.tsx

@@ -8,7 +8,7 @@ import { defineComponent, h, onMounted, type PropType, type VNode } from 'vue'
 import { VirtualList } from 'vueuc'
 import { NBaseFocusDetector, NScrollbar } from '../../../_internal'
 import { useLocale } from '../../../_mixins'
-import { resolveSlotWithProps } from '../../../_utils'
+import { resolveSlotWithTypedProps, resolveWrappedSlot } from '../../../_utils'
 import { NButton, NxButton } from '../../../button'
 import { MONTH_ITEM_HEIGHT } from '../config'
 import {
@@ -212,13 +212,11 @@ export default defineComponent({
             </div>
           ) : null}
         </div>
-        {this.datePickerSlots.footer ? (
-          <div class={`${mergedClsPrefix}-date-panel-footer`}>
-            {{
-              default: this.datePickerSlots.footer
-            }}
-          </div>
-        ) : null}
+        {resolveWrappedSlot(this.datePickerSlots.footer, (children) => {
+          return children ? (
+            <div class={`${mergedClsPrefix}-date-panel-footer`}>{children}</div>
+          ) : null
+        })}
         {actions?.length || shortcuts ? (
           <div class={`${mergedClsPrefix}-date-panel-actions`}>
             <div class={`${mergedClsPrefix}-date-panel-actions__prefix`}>
@@ -245,8 +243,8 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {actions?.includes('clear')
-                ? resolveSlotWithProps(
-                    this.$slots.now,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.clear,
                     {
                       onClear: this.handleClearClick,
                       text: this.locale.clear
@@ -264,8 +262,8 @@ export default defineComponent({
                   )
                 : null}
               {actions?.includes('now')
-                ? resolveSlotWithProps(
-                    this.$slots.now,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.now,
                     {
                       onNow: this.handleNowClick,
                       text: this.locale.now
@@ -283,8 +281,8 @@ export default defineComponent({
                   )
                 : null}
               {actions?.includes('confirm')
-                ? resolveSlotWithProps(
-                    this.$slots.confirm,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.confirm,
                     {
                       onConfirm: this.handleConfirmClick,
                       disabled: this.isDateInvalid,

src/date-picker/src/panel/monthrange.tsx

@@ -7,14 +7,17 @@ import {
   h,
   onMounted,
   type PropType,
-  renderSlot,
   type VNode,
   watchEffect
 } from 'vue'
 import { VirtualList } from 'vueuc'
 import { NBaseFocusDetector, NScrollbar } from '../../../_internal'
 import { useLocale } from '../../../_mixins'
-import { resolveSlotWithProps, warnOnce } from '../../../_utils'
+import {
+  resolveSlotWithTypedProps,
+  resolveWrappedSlot,
+  warnOnce
+} from '../../../_utils'
 import { NxButton } from '../../../button'
 import { MONTH_ITEM_HEIGHT } from '../config'
 import {
@@ -270,11 +273,11 @@ export default defineComponent({
             ) : null}
           </div>
         </div>
-        {this.datePickerSlots.footer ? (
-          <div class={`${mergedClsPrefix}-date-panel-footer`}>
-            {renderSlot(this.datePickerSlots, 'footer')}
-          </div>
-        ) : null}
+        {resolveWrappedSlot(this.datePickerSlots.footer, (children) => {
+          return children ? (
+            <div class={`${mergedClsPrefix}-date-panel-footer`}>{children}</div>
+          ) : null
+        })}
         {this.actions?.length || shortcuts ? (
           <div class={`${mergedClsPrefix}-date-panel-actions`}>
             <div class={`${mergedClsPrefix}-date-panel-actions__prefix`}>
@@ -302,8 +305,8 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear')
-                ? resolveSlotWithProps(
-                    this.$slots.clear,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.clear,
                     {
                       onClear: this.handleClearClick,
                       text: this.locale.clear
@@ -321,8 +324,8 @@ export default defineComponent({
                   )
                 : null}
               {this.actions?.includes('confirm')
-                ? resolveSlotWithProps(
-                    this.$slots.confirm,
+                ? resolveSlotWithTypedProps(
+                    this.datePickerSlots.confirm,
                     {
                       disabled: this.isRangeInvalid,
                       onConfirm: this.handleConfirmClick,

src/descriptions/index.ts

@@ -1,7 +1,14 @@
 export { descriptionsProps, default as NDescriptions } from './src/Descriptions'
-export type { DescriptionProps, DescriptionsProps } from './src/Descriptions'
+export type {
+  DescriptionProps,
+  DescriptionsProps,
+  DescriptionsSlots
+} from './src/Descriptions'
 export {
   descriptionsItemProps,
   default as NDescriptionsItem
 } from './src/DescriptionsItem'
-export type { DescriptionItemProps } from './src/DescriptionsItem'
+export type {
+  DescriptionItemProps,
+  DescriptionItemSlots
+} from './src/DescriptionsItem'

src/descriptions/src/Descriptions.tsx

@@ -9,6 +9,7 @@ import {
   defineComponent,
   h,
   type PropType,
+  type SlotsType,
   type VNode
 } from 'vue'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
@@ -58,9 +59,15 @@ export type DescriptionsProps = ExtractPublicPropTypes<typeof descriptionsProps>
 /** @deprecated You should use `DescriptionsProps` */
 export type DescriptionProps = DescriptionsProps
 
+export interface DescriptionsSlots {
+  default?: () => VNode[]
+  header?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Descriptions',
   props: descriptionsProps,
+  slots: Object as SlotsType<DescriptionsSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const themeRef = useTheme(

src/descriptions/src/DescriptionsItem.ts

@@ -1,5 +1,11 @@
 import type { ExtractPublicPropTypes } from '../../_utils'
-import { type CSSProperties, defineComponent, type PropType } from 'vue'
+import {
+  type CSSProperties,
+  defineComponent,
+  type PropType,
+  type SlotsType,
+  type VNode
+} from 'vue'
 import { DESCRIPTION_ITEM_FLAG } from './utils'
 
 export const descriptionsItemProps = {
@@ -18,10 +24,16 @@ export type DescriptionItemProps = ExtractPublicPropTypes<
   typeof descriptionsItemProps
 >
 
+export interface DescriptionItemSlots {
+  default?: () => VNode[]
+  label?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'DescriptionsItem',
   [DESCRIPTION_ITEM_FLAG]: true,
   props: descriptionsItemProps,
+  slots: Object as SlotsType<DescriptionItemSlots>,
   render() {
     return null
   }

src/dialog/demos/enUS/basic.demo.vue

@@ -19,6 +19,7 @@ export default defineComponent({
           content: 'Are you sure?',
           positiveText: 'Sure',
           negativeText: 'Not Sure',
+          draggable: true,
           onPositiveClick: () => {
             message.success('Sure')
           },

src/dialog/demos/enUS/index.demo-entry.md

@@ -65,8 +65,8 @@ use-dialog-reactive-list.vue
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
 | action | `() => VNodeChild` | `undefined` | Content of the operation area, must be a render function. |  |
-| actionClass | `string` | The class name of the action area. | 2.38.2 |
-| actionStyle | `Object \| string` | The style of the action area. | 2.38.2 |
+| actionClass | `string` | `undefined` | The class name of the action area. | 2.38.2 |
+| actionStyle | `Object \| string` | `undefined` | The style of the action area. | 2.38.2 |
 | autoFocus | `boolean` | `true` | Whether to focus the first focusable element inside modal. | 2.28.3 |
 | blockScroll | `boolean` | `true` | Whether to disabled body scrolling when it's active. | 2.28.3 |
 | bordered | `boolean` | `false` | Whether to show `border`. |  |
@@ -74,8 +74,9 @@ use-dialog-reactive-list.vue
 | closable | `boolean` | `true` | Whether to show `close` icon. |  |
 | closeOnEsc | `boolean` | `true` | Whether to close the dialog when the Esc key is pressed | 2.26.4 |
 | content | `string \| (() => VNodeChild)` | `undefined` | Content, can be a render function. |  |
-| contentClass | `string` | The class name of the content. | 2.38.2 |
-| contentStyle | `Object \| string` | The style of the content. | 2.38.2 |
+| contentClass | `string` | `undefined` | The class name of the content. | 2.38.2 |
+| contentStyle | `Object \| string` | `undefined` | The style of the content. | 2.38.2 |
+| draggable | `boolean \| { bounds?: 'none' }` | `false` | Whether it is draggable. | 2.41.0 |
 | iconPlacement | `'left' \| 'top'` | `'left'` | Icon placement. |  |
 | icon | `() => VNodeChild` | `undefined` | `Render` function of `icon`. |  |
 | loading | `boolean` | `false` | Whether to display `loading` status. |  |
@@ -87,8 +88,8 @@ use-dialog-reactive-list.vue
 | showIcon | `boolean` | `true` | Whether to show `icon`. |  |
 | style | `string \| Object` | `undefined` | Style of the dialog. |  |
 | title | `string \| (() => VNodeChild)` | `undefined` | Title, can be a render function. |  |
-| titleClass | `string` | The class name of the content. | 2.38.2 |
-| titleStyle | `Object \| string` | The style of the content. | 2.38.2 |
+| titleClass | `string` | `undefined` | The class name of the content. | 2.38.2 |
+| titleStyle | `Object \| string` | `undefined` | The style of the content. | 2.38.2 |
 | transformOrigin | `'mouse' \| 'center'` | `'mouse'` | The transform origin of the dialog's display animation. | 2.34.0 |
 | type | `'error \| 'success' \| 'warning'` | `'warning'` | Dialog type. |  |
 | onAfterEnter | `() => void` | `undefined` | Callback on enter animation ends. | 2.33.0 |

src/dialog/demos/zhCN/basic.demo.vue

@@ -19,6 +19,7 @@ export default defineComponent({
           content: '你确定？',
           positiveText: '确定',
           negativeText: '不确定',
+          draggable: true,
           onPositiveClick: () => {
             message.success('确定')
           },

src/dialog/demos/zhCN/index.demo-entry.md

@@ -67,8 +67,8 @@ rtl-debug.vue
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
 | action | `() => VNodeChild` | `undefined` | 操作区域的内容，需要是渲染函数 |  |
-| actionClass | `string` | 操作区域的类名 | 2.38.2 |
-| actionStyle | `Object \| string` | 操作区域的样式 | 2.38.2 |
+| actionClass | `string` | `undefined` | 操作区域的类名 | 2.38.2 |
+| actionStyle | `Object \| string` | `undefined` | 操作区域的样式 | 2.38.2 |
 | autoFocus | `boolean` | `true` | 是否自动聚焦 Modal 第一个可聚焦的元素 | 2.28.3 |
 | blockScroll | `boolean` | `true` | 是否在打开时禁用 body 滚动 | 2.28.3 |
 | bordered | `boolean` | `false` | 是否显示 `border` |  |
@@ -76,8 +76,9 @@ rtl-debug.vue
 | closable | `boolean` | `true` | 是否显示 `close` 图标 |  |
 | closeOnEsc | `boolean` | `true` | 是否在摁下 Esc 键的时候关闭对话框 | 2.26.4 |
 | content | `string \| (() => VNodeChild)` | `undefined` | 对话框内容，可以是渲染函数 |  |
-| contentClass | `string` | 内容的类名 | 2.38.2 |
-| contentStyle | `Object \| string` | 内容的样式 | 2.38.2 |
+| contentClass | `string` | `undefined` | 内容的类名 | 2.38.2 |
+| contentStyle | `Object \| string` | `undefined` | 内容的样式 | 2.38.2 |
+| draggable | `boolean \| { bounds?: 'none' }` | `false` | 是否可拖拽 | 2.41.0 |
 | iconPlacement | `'left' \| 'top'` | `'left'` | 图标的位置 |  |
 | icon | `() => VNodeChild` | `undefined` | 对话框 `icon`, 需要是渲染函数 |  |
 | loading | `boolean` | `false` | 是否显示 `loading` 状态 |  |
@@ -89,8 +90,8 @@ rtl-debug.vue
 | showIcon | `boolean` | `true` | 是否显示 `icon` |  |
 | style | `string \| Object` | `undefined` | 样式 |  |
 | title | `string \| (() => VNodeChild)` | `undefined` | 标题，可以是渲染函数 |  |
-| titleClass | `string` | 标题的类名 | 2.38.2 |
-| titleStyle | `Object \| string` | 标题的样式 | 2.38.2 |
+| titleClass | `string` | `undefined` | 标题的类名 | 2.38.2 |
+| titleStyle | `Object \| string` | `undefined` | 标题的样式 | 2.38.2 |
 | transformOrigin | `'mouse' \| 'center'` | `'mouse'` | 对话框动画出现的位置 | 2.34.0 |
 | type | `'error \| 'success' \| 'warning'` | `'warning'` | 对话框类型 |  |
 | onAfterEnter | `() => void` | `undefined` | 出现动画完成执行的回调 | 2.33.0 |

src/dialog/index.ts

@@ -1,5 +1,6 @@
 export { useDialog, useDialogReactiveList } from './src/composables'
 export { NDialog } from './src/Dialog'
+export type { DialogSlots } from './src/Dialog'
 export { dialogProps } from './src/dialogProps'
 export type { DialogProps } from './src/dialogProps'
 export { dialogProviderProps, NDialogProvider } from './src/DialogProvider'

src/dialog/src/Dialog.tsx

@@ -1,7 +1,14 @@
 import type { ThemeProps } from '../../_mixins'
 import type { DialogTheme } from '../styles'
 import { getMargin } from 'seemly'
-import { computed, type CSSProperties, defineComponent, h } from 'vue'
+import {
+  computed,
+  type CSSProperties,
+  defineComponent,
+  h,
+  type SlotsType,
+  type VNode
+} from 'vue'
 import { NBaseClose, NBaseIcon } from '../../_internal'
 import {
   ErrorIcon,
@@ -29,6 +36,14 @@ const iconRenderMap = {
   error: () => <ErrorIcon />
 }
 
+export interface DialogSlots {
+  action?: () => VNode[]
+  default?: () => VNode[]
+  header?: () => VNode[]
+  icon?: () => VNode[]
+  close?: () => VNode[]
+}
+
 export const NDialog = defineComponent({
   name: 'Dialog',
   alias: [
@@ -39,6 +54,7 @@ export const NDialog = defineComponent({
     ...(useTheme.props as ThemeProps<DialogTheme>),
     ...dialogProps
   },
+  slots: Object as SlotsType<DialogSlots>,
   setup(props) {
     const {
       mergedComponentPropsRef,

src/dialog/src/DialogEnvironment.tsx

@@ -1,6 +1,14 @@
+import type { ModalDraggableOptions } from '../../modal/src/interface'
 // use absolute path to make sure no circular ref of style
 // this -> modal-index -> modal-style
-import { type CSSProperties, defineComponent, h, type PropType, ref } from 'vue'
+import {
+  type CSSProperties,
+  defineComponent,
+  h,
+  normalizeClass,
+  type PropType,
+  ref
+} from 'vue'
 import { keep } from '../../_utils'
 import NModal from '../../modal/src/Modal'
 import { NDialog } from './Dialog'
@@ -30,7 +38,8 @@ export const exposedDialogEnvProps = {
     (e: MouseEvent) => Promise<unknown> | unknown
   >,
   onClose: Function as PropType<() => Promise<unknown> | unknown>,
-  onMaskClick: Function as PropType<(e: MouseEvent) => void>
+  onMaskClick: Function as PropType<(e: MouseEvent) => void>,
+  draggable: [Boolean, Object] as PropType<boolean | ModalDraggableOptions>
 } as const
 
 export const NDialogEnvironment = defineComponent({
@@ -156,13 +165,15 @@ export const NDialogEnvironment = defineComponent({
         blockScroll={this.blockScroll}
         autoFocus={this.autoFocus}
         transformOrigin={this.transformOrigin}
+        draggable={this.draggable}
         internalAppear
         internalDialog
       >
         {{
-          default: () => (
+          default: ({ draggableClass }: { draggableClass: string }) => (
             <NDialog
               {...keep(this.$props, dialogPropKeys)}
+              titleClass={normalizeClass([this.titleClass, draggableClass])}
               style={this.internalStyle}
               onClose={handleCloseClick}
               onNegativeClick={handleNegativeClick}

src/drawer/demos/zhCN/dark-4-debug.demo.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   </n-button>
   <n-drawer v-model:show="modalActive" width="800">
     <n-popover trigger="click">
-      <template #activator>
+      <template #trigger>
         <n-button style="margin: 0">
           悬浮
         </n-button>

src/drawer/index.ts

@@ -5,4 +5,7 @@ export {
   drawerContentProps,
   default as NDrawerContent
 } from './src/DrawerContent'
-export type { DrawerContentProps } from './src/DrawerContent'
+export type {
+  DrawerContentProps,
+  DrawerContentSlots
+} from './src/DrawerContent'

src/drawer/src/DrawerContent.tsx

@@ -5,7 +5,9 @@ import {
   defineComponent,
   h,
   inject,
-  type PropType
+  type PropType,
+  type SlotsType,
+  type VNode
 } from 'vue'
 import { NBaseClose, NScrollbar } from '../../_internal'
 import { throwError } from '../../_utils'
@@ -30,9 +32,16 @@ export type DrawerContentProps = ExtractPublicPropTypes<
   typeof drawerContentProps
 >
 
+export interface DrawerContentSlots {
+  default?: () => VNode[]
+  header?: () => VNode[]
+  footer?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'DrawerContent',
   props: drawerContentProps,
+  slots: Object as SlotsType<DrawerContentSlots>,
   setup() {
     const NDrawer = inject(drawerInjectionKey, null)
     if (!NDrawer) {

src/dynamic-input/index.ts

@@ -1,2 +1,6 @@
 export { dynamicInputProps, default as NDynamicInput } from './src/DynamicInput'
-export type { DynamicInputProps } from './src/DynamicInput'
+export type { DynamicInputProps, DynamicInputSlots } from './src/DynamicInput'
+export type {
+  DynamicInputActionSlotProps,
+  DynamicInputDefaultSlotProps
+} from './src/interface'

src/dynamic-input/src/DynamicInput.tsx

@@ -2,7 +2,11 @@ import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { ButtonProps } from '../../button'
 import type { DynamicInputTheme } from '../styles'
-import type { OnUpdateValue } from './interface'
+import type {
+  DynamicInputActionSlotProps,
+  DynamicInputDefaultSlotProps,
+  OnUpdateValue
+} from './interface'
 import { createId } from 'seemly'
 import { useMergedState } from 'vooks'
 import {
@@ -17,6 +21,7 @@ import {
   ref,
   toRaw,
   toRef,
+  type VNode,
   watchEffect
 } from 'vue'
 import { NBaseIcon } from '../../_internal'
@@ -29,7 +34,12 @@ import {
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
 import { formItemInjectionKey } from '../../_mixins/use-form-item'
 import { useRtl } from '../../_mixins/use-rtl'
-import { call, resolveSlot, resolveSlotWithProps, warnOnce } from '../../_utils'
+import {
+  call,
+  resolveSlot,
+  resolveSlotWithTypedProps,
+  warnOnce
+} from '../../_utils'
 import { NButton } from '../../button'
 import { NButtonGroup } from '../../button-group'
 import { dynamicInputLight } from '../styles'
@@ -88,6 +98,13 @@ export const dynamicInputProps = {
 
 export type DynamicInputProps = ExtractPublicPropTypes<typeof dynamicInputProps>
 
+export interface DynamicInputSlots {
+  action?: (props: DynamicInputActionSlotProps) => VNode[]
+  default?: (props: DynamicInputDefaultSlotProps) => VNode[]
+  'create-button-default'?: () => VNode[]
+  'create-button-icon'?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'DynamicInput',
   props: dynamicInputProps,
@@ -378,7 +395,7 @@ export default defineComponent({
               class={[`${mergedClsPrefix}-dynamic-input-item`, itemClass]}
               style={itemStyle}
             >
-              {resolveSlotWithProps(
+              {resolveSlotWithTypedProps(
                 $slots.default,
                 {
                   value: mergedValue[index],
@@ -424,7 +441,7 @@ export default defineComponent({
                   ]
                 }
               )}
-              {resolveSlotWithProps(
+              {resolveSlotWithTypedProps(
                 $slots.action,
                 {
                   value: mergedValue[index],

src/dynamic-input/src/interface.ts

@@ -14,3 +14,16 @@ export const dynamicInputInjectionKey
   = createInjectionKey<DynamicInputInjection>('n-dynamic-input')
 
 export type OnUpdateValue = <T>(value: T[]) => void
+
+export interface DynamicInputDefaultSlotProps {
+  value: any
+  index: number
+}
+
+export interface DynamicInputActionSlotProps {
+  value: any
+  index: number
+  create: (index: number) => void
+  remove: (index: number) => void
+  move: (type: 'up' | 'down', index: number) => void
+}

src/dynamic-tags/index.ts

@@ -1,3 +1,7 @@
 export { dynamicTagsProps, default as NDynamicTags } from './src/DynamicTags'
-export type { DynamicTagsProps } from './src/DynamicTags'
-export type { DynamicTagsOption } from './src/interface'
+export type { DynamicTagsProps, DynamicTagsSlots } from './src/DynamicTags'
+export type {
+  DynamicTagsInputSlotProps,
+  DynamicTagsOption,
+  DynamicTagsTriggerSlotProps
+} from './src/interface'

src/dynamic-tags/src/DynamicTags.tsx

@@ -3,7 +3,9 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { InputInst, InputProps } from '../../input'
 import type { DynamicTagsTheme } from '../styles'
 import type {
+  DynamicTagsInputSlotProps,
   DynamicTagsOption,
+  DynamicTagsTriggerSlotProps,
   OnCreate,
   OnUpdateValue,
   OnUpdateValueImpl
@@ -17,7 +19,9 @@ import {
   nextTick,
   type PropType,
   ref,
+  type SlotsType,
   toRef,
+  type VNode,
   type VNodeChild,
   watchEffect
 } from 'vue'
@@ -77,9 +81,16 @@ export const dynamicTagsProps = {
 
 export type DynamicTagsProps = ExtractPublicPropTypes<typeof dynamicTagsProps>
 
+export interface DynamicTagsSlots {
+  input?: (props: DynamicTagsInputSlotProps) => VNode[]
+  trigger?: (props: DynamicTagsTriggerSlotProps) => VNode[]
+  default?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'DynamicTags',
   props: dynamicTagsProps,
+  slots: Object as SlotsType<DynamicTagsSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/dynamic-tags/src/interface.ts

@@ -17,3 +17,13 @@ export interface DynamicTagsOption {
   label: string
   value: string
 }
+
+export interface DynamicTagsInputSlotProps {
+  submit: (value: any) => void
+  deactivate: () => void
+}
+
+export interface DynamicTagsTriggerSlotProps {
+  activate: () => void
+  disabled: boolean
+}

src/ellipsis/index.ts

@@ -1,3 +1,3 @@
 export { ellipsisProps, default as NEllipsis } from './src/Ellipsis'
-export type { EllipsisProps } from './src/Ellipsis'
+export type { EllipsisProps, EllipsisSlots } from './src/Ellipsis'
 export { NPerformantEllipsis } from './src/PerformantEllipsis'

src/ellipsis/src/Ellipsis.tsx

@@ -10,7 +10,9 @@ import {
   mergeProps,
   onDeactivated,
   type PropType,
-  ref
+  ref,
+  type SlotsType,
+  type VNode
 } from 'vue'
 import { useTheme } from '../../_mixins'
 import { useMergedClsPrefix } from '../../_mixins/use-config'
@@ -38,10 +40,16 @@ export const ellipsisProps = {
 
 export type EllipsisProps = ExtractPublicPropTypes<typeof ellipsisProps>
 
+export interface EllipsisSlots {
+  default?: () => VNode[]
+  tooltip?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Ellipsis',
   inheritAttrs: false,
   props: ellipsisProps,
+  slots: Object as SlotsType<EllipsisSlots>,
   setup(props, { slots, attrs }) {
     const mergedClsPrefixRef = useMergedClsPrefix()
     const mergedTheme = useTheme(

src/empty/index.ts

@@ -1,2 +1,2 @@
 export { emptyProps, default as NEmpty } from './src/Empty'
-export type { EmptyProps } from './src/Empty'
+export type { EmptyProps, EmptySlots } from './src/Empty'

src/empty/src/Empty.tsx

@@ -6,6 +6,8 @@ import {
   defineComponent,
   h,
   type PropType,
+  type SlotsType,
+  type VNode,
   type VNodeChild
 } from 'vue'
 import { NBaseIcon } from '../../_internal/icon'
@@ -35,9 +37,16 @@ export const emptyProps = {
 
 export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>
 
+export interface EmptySlots {
+  default?: () => VNode[]
+  extra?: () => VNode[]
+  icon?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Empty',
   props: emptyProps,
+  slots: Object as SlotsType<EmptySlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled, mergedComponentPropsRef }
       = useConfig(props)

src/float-button/index.ts

@@ -1,2 +1,2 @@
 export { floatButtonProps, default as NFloatButton } from './src/FloatButton'
-export type { FloatButtonProps } from './src/FloatButton'
+export type { FloatButtonProps, FloatButtonSlots } from './src/FloatButton'

src/float-button/src/FloatButton.tsx

@@ -10,7 +10,9 @@ import {
   onMounted,
   type PropType,
   ref,
-  toRef
+  type SlotsType,
+  toRef,
+  type VNode
 } from 'vue'
 import { NBaseIcon } from '../../_internal'
 import { CloseIcon } from '../../_internal/icons'
@@ -65,9 +67,16 @@ export const floatButtonProps = {
 
 export type FloatButtonProps = ExtractPublicPropTypes<typeof floatButtonProps>
 
+export interface FloatButtonSlots {
+  default?: () => VNode[]
+  description?: () => VNode[]
+  menu?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'FloatButton',
   props: floatButtonProps,
+  slots: Object as SlotsType<FloatButtonSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
 

src/image/index.ts

@@ -1,5 +1,5 @@
 export { imageProps, default as NImage } from './src/Image'
-export type { ImageProps } from './src/Image'
+export type { ImageProps, ImageSlots } from './src/Image'
 export { imageGroupProps, default as NImageGroup } from './src/ImageGroup'
 export type { ImageGroupProps } from './src/ImageGroup'
 export type * from './src/public-types'

src/image/src/Image.tsx

@@ -10,7 +10,9 @@ import {
   type PropType,
   provide,
   ref,
+  type SlotsType,
   toRef,
+  type VNode,
   watchEffect
 } from 'vue'
 import { useConfig } from '../../_mixins'
@@ -51,9 +53,15 @@ export const imageProps = {
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
 
+export interface ImageSlots {
+  placeholder?: () => VNode[]
+  error?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Image',
   props: imageProps,
+  slots: Object as SlotsType<ImageSlots>,
   inheritAttrs: false,
   setup(props) {
     const imageRef = ref<HTMLImageElement | null>(null)
@@ -217,8 +225,7 @@ export default defineComponent({
             renderToolbar={this.renderToolbar}
           >
             {{
-              default: () => imgNode,
-              toolbar: () => this.$slots.toolbar?.()
+              default: () => imgNode
             }}
           </NImagePreview>
         )}

src/input-number/index.ts

@@ -1,3 +1,3 @@
 export { inputNumberProps, default as NInputNumber } from './src/InputNumber'
-export type { InputNumberProps } from './src/InputNumber'
+export type { InputNumberProps, InputNumberSlots } from './src/InputNumber'
 export type { InputNumberInst } from './src/interface'

src/input-number/src/InputNumber.tsx

@@ -14,6 +14,7 @@ import {
   nextTick,
   type PropType,
   ref,
+  type SlotsType,
   toRef,
   type VNode,
   watch,
@@ -110,9 +111,17 @@ export const inputNumberProps = {
 
 export type InputNumberProps = ExtractPublicPropTypes<typeof inputNumberProps>
 
+export interface InputNumberSlots {
+  'add-icon'?: () => VNode[]
+  'minus-icon'?: () => VNode[]
+  prefix?: () => VNode[]
+  suffix?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'InputNumber',
   props: inputNumberProps,
+  slots: Object as SlotsType<InputNumberSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {

src/input/index.ts

@@ -1,5 +1,5 @@
 export { inputProps, default as NInput } from './src/Input'
-export type { InputProps } from './src/Input'
+export type { InputProps, InputSlots } from './src/Input'
 export { inputGroupProps, default as NInputGroup } from './src/InputGroup'
 export type { InputGroupProps } from './src/InputGroup'
 export {

src/input/src/Input.tsx

@@ -23,6 +23,7 @@ import {
   type PropType,
   provide,
   ref,
+  type SlotsType,
   type TextareaHTMLAttributes,
   toRef,
   type VNode,
@@ -170,9 +171,20 @@ export const inputProps = {
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
 
+export interface InputSlots {
+  'clear-icon'?: () => VNode[]
+  count?: (props: { value: string }) => VNode[]
+  'password-invisible-icon'?: () => VNode[]
+  'password-visible-icon'?: () => VNode[]
+  prefix?: () => VNode[]
+  separator?: () => VNode[]
+  suffix?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'Input',
   props: inputProps,
+  slots: Object as SlotsType<InputSlots>,
   setup(props) {
     if (__DEV__) {
       watchEffect(() => {
@@ -1340,7 +1352,13 @@ export default defineComponent({
                       this.showCount && this.type !== 'textarea' ? (
                         <WordCount>
                           {{
-                            default: (props: unknown) => $slots.count?.(props)
+                            default: (props: unknown) => {
+                              const { renderCount } = this
+                              if (renderCount) {
+                                return renderCount(props as { value: string })
+                              }
+                              return $slots.count?.(props)
+                            }
                           }}
                         </WordCount>
                       ) : null,

src/input/src/WordCount.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, inject } from 'vue'
-import { resolveSlotWithProps } from '../../_utils'
+import { resolveSlotWithTypedProps } from '../../_utils'
 import { inputInjectionKey } from './interface'
 import { len } from './utils'
 
@@ -23,7 +23,7 @@ export default defineComponent({
       const { value: mergedValue } = mergedValueRef
       return (
         <span class={`${mergedClsPrefixRef.value}-input-word-count`}>
-          {resolveSlotWithProps(
+          {resolveSlotWithTypedProps(
             slots.default,
             {
               value:

src/list/index.ts

@@ -1,3 +1,4 @@
 export { listProps, default as NList } from './src/List'
-export type { ListProps } from './src/List'
+export type { ListProps, ListSlots } from './src/List'
 export { default as NListItem } from './src/ListItem'
+export type { ListItemSlots } from './src/ListItem'

src/list/src/List.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, PropType, Ref } from 'vue'
+import type { CSSProperties, PropType, Ref, SlotsType, VNode } from 'vue'
 import type { ThemeProps } from '../../_mixins'
 import type { ListTheme } from '../styles'
 import { computed, defineComponent, h, provide, toRef } from 'vue'
@@ -24,6 +24,12 @@ export const listProps = {
 
 export type ListProps = ExtractPublicPropTypes<typeof listProps>
 
+export interface ListSlots {
+  default?: () => VNode[]
+  footer?: () => VNode[]
+  header?: () => VNode[]
+}
+
 interface ListInjection {
   showDividerRef: Ref<boolean>
   mergedClsPrefixRef: Ref<string>
@@ -34,6 +40,7 @@ export const listInjectionKey = createInjectionKey<ListInjection>('n-list')
 export default defineComponent({
   name: 'List',
   props: listProps,
+  slots: Object as SlotsType<ListSlots>,
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef }
       = useConfig(props)

src/list/src/ListItem.tsx

@@ -1,9 +1,17 @@
+import type { SlotsType, VNode } from 'vue'
 import { defineComponent, h, inject } from 'vue'
 import { throwError } from '../../_utils'
 import { listInjectionKey } from './List'
 
+export interface ListItemSlots {
+  default?: () => VNode[]
+  prefix?: () => VNode[]
+  suffix?: () => VNode[]
+}
+
 export default defineComponent({
   name: 'ListItem',
+  slots: Object as SlotsType<ListItemSlots>,
   setup() {
     const listInjection = inject(listInjectionKey, null)
     if (!listInjection) {

src/locales/__snapshots__/index.spec.tsx.snap

@@ -1009,6 +1009,150 @@ exports[`locale works 7`] = `
 `;
 
 exports[`locale works 8`] = `
+"<div class="n-config-provider">
+  <div>
+    <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
+      <div class="n-input-wrapper">
+        <!---->
+        <div class="n-input__input"><input type="text" class="n-input__input-el" placeholder="សូមបញ្ចូល" size="20">
+          <div class="n-input__placeholder"><span>សូមបញ្ចូល</span></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+      <div class="n-input__border"></div>
+      <div class="n-input__state-border"></div>
+      <!---->
+    </div>
+    <div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="ជ្រើសរើសកាលបរិច្ឆេទ" size="20" value="1970-01-01">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="ជ្រើសរើសពេលវេលាកាលបរិច្ឆេទ" size="20" value="1970-01-01 08:00:00">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="ជ្រើសរើសឆ្នាំ" size="20" value="1970">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="ជ្រើសរើសខែ" size="20" value="1970-01">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`locale works 9`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1152,7 +1296,7 @@ exports[`locale works 8`] = `
 </div>"
 `;
 
-exports[`locale works 9`] = `
+exports[`locale works 10`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1296,7 +1440,7 @@ exports[`locale works 9`] = `
 </div>"
 `;
 
-exports[`locale works 10`] = `
+exports[`locale works 11`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1440,7 +1584,7 @@ exports[`locale works 10`] = `
 </div>"
 `;
 
-exports[`locale works 11`] = `
+exports[`locale works 12`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1584,7 +1728,7 @@ exports[`locale works 11`] = `
 </div>"
 `;
 
-exports[`locale works 12`] = `
+exports[`locale works 13`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1728,7 +1872,7 @@ exports[`locale works 12`] = `
 </div>"
 `;
 
-exports[`locale works 13`] = `
+exports[`locale works 14`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -1872,7 +2016,7 @@ exports[`locale works 13`] = `
 </div>"
 `;
 
-exports[`locale works 14`] = `
+exports[`locale works 15`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2016,7 +2160,7 @@ exports[`locale works 14`] = `
 </div>"
 `;
 
-exports[`locale works 15`] = `
+exports[`locale works 16`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2160,7 +2304,7 @@ exports[`locale works 15`] = `
 </div>"
 `;
 
-exports[`locale works 16`] = `
+exports[`locale works 17`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2304,7 +2448,7 @@ exports[`locale works 16`] = `
 </div>"
 `;
 
-exports[`locale works 17`] = `
+exports[`locale works 18`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2448,7 +2592,7 @@ exports[`locale works 17`] = `
 </div>"
 `;
 
-exports[`locale works 18`] = `
+exports[`locale works 19`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2592,7 +2736,7 @@ exports[`locale works 18`] = `
 </div>"
 `;
 
-exports[`locale works 19`] = `
+exports[`locale works 20`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2736,7 +2880,7 @@ exports[`locale works 19`] = `
 </div>"
 `;
 
-exports[`locale works 20`] = `
+exports[`locale works 21`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -2880,7 +3024,7 @@ exports[`locale works 20`] = `
 </div>"
 `;
 
-exports[`locale works 21`] = `
+exports[`locale works 22`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3024,7 +3168,7 @@ exports[`locale works 21`] = `
 </div>"
 `;
 
-exports[`locale works 22`] = `
+exports[`locale works 23`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3168,7 +3312,7 @@ exports[`locale works 22`] = `
 </div>"
 `;
 
-exports[`locale works 23`] = `
+exports[`locale works 24`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3312,7 +3456,7 @@ exports[`locale works 23`] = `
 </div>"
 `;
 
-exports[`locale works 24`] = `
+exports[`locale works 25`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3456,7 +3600,7 @@ exports[`locale works 24`] = `
 </div>"
 `;
 
-exports[`locale works 25`] = `
+exports[`locale works 26`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3600,7 +3744,7 @@ exports[`locale works 25`] = `
 </div>"
 `;
 
-exports[`locale works 26`] = `
+exports[`locale works 27`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3744,7 +3888,7 @@ exports[`locale works 26`] = `
 </div>"
 `;
 
-exports[`locale works 27`] = `
+exports[`locale works 28`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -3888,7 +4032,7 @@ exports[`locale works 27`] = `
 </div>"
 `;
 
-exports[`locale works 28`] = `
+exports[`locale works 29`] = `
 "<div class="n-config-provider">
   <div>
     <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
@@ -4031,3 +4175,147 @@ exports[`locale works 28`] = `
   </div>
 </div>"
 `;
+
+exports[`locale works 30`] = `
+"<div class="n-config-provider">
+  <div>
+    <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);">
+      <div class="n-input-wrapper">
+        <!---->
+        <div class="n-input__input"><input type="text" class="n-input__input-el" placeholder="كىرگۈزۈڭ" size="20">
+          <div class="n-input__placeholder"><span>كىرگۈزۈڭ</span></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <!---->
+      <div class="n-input__border"></div>
+      <div class="n-input__state-border"></div>
+      <!---->
+    </div>
+    <div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="چىسلا تاللاڭ" size="20" value="1970-01-01">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="چىسلا ۋاقىت تاللاڭ" size="20" value="1970-01-01 08:00:00">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="يىل تاللاڭ" size="20" value="1970">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div class="n-date-picker" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-icon-color-override: rgba(194, 194, 194, 1); --n-icon-color-disabled-override: rgba(209, 209, 209, 1);">
+        <div class="n-input n-input--resizable n-input--stateful" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);" tabindex="0">
+          <div class="n-input-wrapper">
+            <!---->
+            <div class="n-input__input"><input type="text" class="n-input__input-el" tabindex="-1" placeholder="ئاي تاللاڭ" size="20" value="1970-01">
+              <!---->
+              <!---->
+            </div>
+            <div class="n-input__suffix">
+              <!---->
+              <!---->
+              <!----><i class="n-base-icon n-date-picker-icon"><svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                  <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                    <g fill-rule="nonzero">
+                      <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z"></path>
+                    </g>
+                  </g>
+                </svg></i>
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <!---->
+          <div class="n-input__border"></div>
+          <div class="n-input__state-border"></div>
+          <!---->
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>"
+`;

src/locales/common/kmKH.ts

@@ -0,0 +1,128 @@
+import type { NLocale } from './enUS'
+
+const kmKH: NLocale = {
+  name: 'km-KH',
+  global: {
+    undo: 'បោះបង់',
+    redo: 'ធ្វើឡើងវិញ',
+    confirm: 'បញ្ជាក់',
+    clear: 'ច្បាស់'
+  },
+  Popconfirm: {
+    positiveText: 'បញ្ជាក់',
+    negativeText: 'បោះបង់'
+  },
+  Cascader: {
+    placeholder: 'សូមជ្រើសរើស',
+    loading: 'ការផ្ទុក',
+    loadingRequiredMessage: (label: string): string =>
+      `អាចជ្រើសរើសបានតែបន្ទាប់ពីផ្ទុកថ្នាំងកូន  ${label} ទាំងអស់។`
+  },
+  Time: {
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
+  },
+  DatePicker: {
+    yearFormat: 'yyyyឆ្នាំ',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
+    yearTypeFormat: 'yyyy',
+    monthTypeFormat: 'yyyy-MM',
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+    quarterFormat: 'yyyy-qqq',
+    weekFormat: 'YYYY-wសប្តាហ៍',
+    clear: 'ច្បាស់',
+    now: 'ឥឡូវនេះ',
+    confirm: 'បញ្ជាក់',
+    selectTime: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    selectDate: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    datePlaceholder: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    datetimePlaceholder: 'ជ្រើសរើសពេលវេលាកាលបរិច្ឆេទ',
+    monthPlaceholder: 'ជ្រើសរើសខែ',
+    yearPlaceholder: 'ជ្រើសរើសឆ្នាំ',
+    quarterPlaceholder: 'ជ្រើសរើសត្រីមាស',
+    weekPlaceholder: 'ជ្រើសរើសសប្តាហ៍',
+    startDatePlaceholder: 'កាលបរិច្ឆេទចាប់ផ្តើម',
+    endDatePlaceholder: 'កាលបរិច្ឆេទបញ្ចប់',
+    startDatetimePlaceholder: 'កាលបរិច្ឆេទចាប់ផ្តើម',
+    endDatetimePlaceholder: 'កាលបរិច្ឆេទបញ្ចប់',
+    startMonthPlaceholder: 'ខែចាប់ផ្តើម',
+    endMonthPlaceholder: 'ចុងខែ',
+    monthBeforeYear: false,
+    firstDayOfWeek: 0,
+    today: 'ថ្ងៃនេះ'
+  },
+  DataTable: {
+    checkTableAll: 'ជ្រើសរើសទិន្នន័យតារាងទាំងអស់។',
+    uncheckTableAll: 'ដកការជ្រើសរើសទិន្នន័យតារាងទាំងអស់។',
+    confirm: 'បញ្ជាក់',
+    clear: 'កំណត់ឡើងវិញ'
+  },
+  LegacyTransfer: {
+    sourceTitle: 'ធាតុប្រភព',
+    targetTitle: 'ធាតុគោលដៅ'
+  },
+  Transfer: {
+    selectAll: 'ជ្រើសរើសទាំងអស់។',
+    clearAll: 'ច្បាស់',
+    unselectAll: 'ដកការជ្រើសរើសទាំងអស់។',
+    total: (num: number): string => `ទូទៅ ${num} ធាតុ`,
+    selected: (num: number): string => `បានជ្រើសរើស ${num} ធាតុ`
+  },
+  Empty: {
+    description: 'គ្មានទិន្នន័យ'
+  },
+  Select: {
+    placeholder: 'សូមជ្រើសរើស'
+  },
+  TimePicker: {
+    placeholder: 'សូមជ្រើសរើសពេលវេលាមួយ។',
+    positiveText: 'បញ្ជាក់',
+    negativeText: 'បោះបង់',
+    now: 'ឥឡូវនេះ',
+    clear: 'ច្បាស់'
+  },
+  Pagination: {
+    goto: 'លោតទៅ',
+    selectionSuffix: 'ទំព័រ'
+  },
+  DynamicTags: {
+    add: 'បន្ថែមទៅ'
+  },
+  Log: {
+    loading: 'ការផ្ទុក'
+  },
+  Input: {
+    placeholder: 'សូមបញ្ចូល'
+  },
+  InputNumber: {
+    placeholder: 'សូមបញ្ចូល'
+  },
+  DynamicInput: {
+    create: 'បន្ថែមទៅ'
+  },
+  ThemeEditor: {
+    title: 'កម្មវិធីនិពន្ធប្រធានបទ',
+    clearAllVars: 'សម្អាតអថេរទាំងអស់។',
+    clearSearch: 'ជម្រះការស្វែងរក',
+    filterCompName: 'តម្រងឈ្មោះសមាសភាគ',
+    filterVarName: 'ត្រងឈ្មោះអថេរ',
+    import: 'នាំចូល',
+    export: 'នាំចេញ',
+    restore: 'ស្តារលំនាំដើម'
+  },
+  Image: {
+    tipPrevious: 'រូបភាពមុន។（←）',
+    tipNext: 'បន្ទាប់（→）',
+    tipCounterclockwise: 'បង្វិលឆ្វេង',
+    tipClockwise: 'បង្វិលស្តាំ',
+    tipZoomOut: 'បង្រួម ',
+    tipZoomIn: 'ពង្រីក',
+    tipDownload: 'ទាញយក',
+    tipClose: 'ការបិទ（Esc）',
+    tipOriginalSize: 'ធ្វើមាត្រដ្ឋានទៅទំហំដើម'
+  }
+}
+
+export default kmKH

src/locales/common/ugCN.ts

@@ -0,0 +1,128 @@
+import type { NLocale } from './enUS'
+
+const ugCN: NLocale = {
+  name: 'ug-CN',
+  global: {
+    undo: 'قالدۇرۇش',
+    redo: 'قايتا',
+    confirm: 'جەزملەش',
+    clear: 'تازلاش'
+  },
+  Popconfirm: {
+    positiveText: 'جەزملەش',
+    negativeText: 'بىكار قىلىش'
+  },
+  Cascader: {
+    placeholder: 'تاللاڭ',
+    loading: 'يۈكلەۋاتىدۇ',
+    loadingRequiredMessage: (label: string): string =>
+      `جەمئى ${label} تۈگۈننى يۈكلەپ بولغاندىن كېيىن تاللىغىلى بولىدۇ`
+  },
+  Time: {
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
+  },
+  DatePicker: {
+    yearFormat: 'yyyy-يىل',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
+    yearTypeFormat: 'yyyy',
+    monthTypeFormat: 'yyyy-MM',
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+    quarterFormat: 'yyyy-qqq',
+    weekFormat: 'YYYY-wھەپتە',
+    clear: 'تازلاش',
+    now: 'مۇشۇ ۋاقىت',
+    confirm: 'جەزملەش',
+    selectTime: 'ۋاقىت تاللاڭ',
+    selectDate: 'چىسلا تاللاڭ',
+    datePlaceholder: 'چىسلا تاللاڭ',
+    datetimePlaceholder: 'چىسلا ۋاقىت تاللاڭ',
+    monthPlaceholder: 'ئاي تاللاڭ',
+    yearPlaceholder: 'يىل تاللاڭ',
+    quarterPlaceholder: 'پەسىل تاللاڭ',
+    weekPlaceholder: 'ھەپتە تاللاڭ',
+    startDatePlaceholder: 'باشلىنىش ۋاقتى',
+    endDatePlaceholder: 'ئاخىرلىشىش ۋاقتى',
+    startDatetimePlaceholder: 'باشلىندىغان چىسلا ۋاقىت',
+    endDatetimePlaceholder: 'ئاخىرلىشىدىغان چىسلا ۋاقىت',
+    startMonthPlaceholder: 'باشلىندىغان ئاي',
+    endMonthPlaceholder: 'ئاخىرلىشىدىغان ئاي',
+    monthBeforeYear: false,
+    firstDayOfWeek: 0,
+    today: 'بۈگۈن'
+  },
+  DataTable: {
+    checkTableAll: 'ھەممە ئۇچۇرنى تاللاش',
+    uncheckTableAll: 'تاللاشنى بىكار قىلىش',
+    confirm: 'جەزملەش',
+    clear: 'تازلاش'
+  },
+  LegacyTransfer: {
+    sourceTitle: 'ئەسلى تۈر',
+    targetTitle: 'نىشان تۈر'
+  },
+  Transfer: {
+    selectAll: 'ھەممىنى تاللاش',
+    clearAll: 'تازلاش',
+    unselectAll: 'ھەممىنى بىكار قىلىش',
+    total: (num: number): string => `جەمئى ${num} تۈر`,
+    selected: (num: number): string => `${num} تۈر تاللاندى`
+  },
+  Empty: {
+    description: 'ئۇچۇر يوق'
+  },
+  Select: {
+    placeholder: 'تاللاڭ'
+  },
+  TimePicker: {
+    placeholder: 'ۋاقىت تاللاڭ',
+    positiveText: 'جەزملەش',
+    negativeText: 'بىكار قىلىش',
+    now: 'مۇشۇ ۋاقىت',
+    clear: 'تازلاش'
+  },
+  Pagination: {
+    goto: 'ئاتلاش',
+    selectionSuffix: 'بەت'
+  },
+  DynamicTags: {
+    add: 'قوشۇش'
+  },
+  Log: {
+    loading: 'يۈكلەۋاتىدۇ'
+  },
+  Input: {
+    placeholder: 'كىرگۈزۈڭ'
+  },
+  InputNumber: {
+    placeholder: 'كىرگۈزۈڭ'
+  },
+  DynamicInput: {
+    create: 'قوشۇش'
+  },
+  ThemeEditor: {
+    title: 'ئۇسلوب تەھرىرلىگۈچ',
+    clearAllVars: 'ھەممە پارامىتىرنى تازلاش',
+    clearSearch: 'ئىزدەشنى تازلاش',
+    filterCompName: 'ۋىجىت ئىسمىنى فىلتىرلاش',
+    filterVarName: 'پارامىتېرنى فىلتىرلاش',
+    import: 'ئەكىرىش',
+    export: 'چىقىرىش',
+    restore: 'ئەسلىگە قايتۇرۇش'
+  },
+  Image: {
+    tipPrevious: '（←）ئالدىنقىسى',
+    tipNext: 'كېيىنكىسى（→）',
+    tipCounterclockwise: 'سولغا چۆرۈش',
+    tipClockwise: 'ئوڭغا چۆرۈش',
+    tipZoomOut: 'كىچىكلىتىش',
+    tipZoomIn: 'چوڭايتىش',
+    tipDownload: 'چۈشۈرۈش',
+    tipClose: 'تاقاش（Esc）',
+    tipOriginalSize: 'ئەسلىگە قايتۇرۇش'
+  }
+}
+
+export default ugCN