naive-ui 2.21.2 → 2.22.0

package/es/form/src/interface.d.ts

@@ -8,6 +8,7 @@ export declare type FormItemRuleValidatorParams = Parameters<NonNullable<RuleIte
 export declare type FormItemRuleValidator = (...args: FormItemRuleValidatorParams) => boolean | Error | Error[] | Promise<void> | undefined;
 export declare type FormItemRuleAsyncValidator = (...args: FormItemRuleValidatorParams) => Promise<void> | undefined;
 export declare type FormItemRule = Omit<RuleItem, 'validator' | 'asyncValidator'> & {
+    key?: string;
     trigger?: ValidationTrigger | string | Array<ValidationTrigger | string>;
     validator?: FormItemRuleValidator;
     asyncValidator?: FormItemRuleAsyncValidator;
@@ -15,10 +16,10 @@ export declare type FormItemRule = Omit<RuleItem, 'validator' | 'asyncValidator'
 export interface FormItemValidateOptions {
     trigger?: ValidationTrigger | string;
     callback?: ValidateCallback;
-    shouldRuleBeApplied?: ApplyRule;
+    shouldRuleBeApplied?: ShouldRuleBeApplied;
     options?: ValidateOption;
 }
-export declare type FormItemInternalValidate = (trigger: ValidationTrigger | string | null | undefined, shouldRuleBeApplied?: ApplyRule, options?: ValidateOption) => Promise<{
+export declare type FormItemInternalValidate = (trigger: ValidationTrigger | string | null | undefined, shouldRuleBeApplied?: ShouldRuleBeApplied, options?: ValidateOption) => Promise<{
     valid: boolean;
     errors?: ValidateError[];
 }>;
@@ -38,10 +39,10 @@ export declare type LabelAlign = 'left' | 'center' | 'right';
 export declare type LabelPlacement = 'left' | 'top';
 export declare type Size = 'small' | 'medium' | 'large';
 export declare type ValidationTrigger = 'input' | 'change' | 'blur' | 'focus';
-export declare type ApplyRule = (rule: FormItemRule) => boolean;
+export declare type ShouldRuleBeApplied = (rule: FormItemRule) => boolean;
 export declare type ValidateCallback = (errors?: ValidateError[]) => void;
 export declare type FormValidateCallback = (errors?: ValidateError[][]) => void;
-export declare type FormValidate = ((callback?: FormValidateCallback) => void) & (() => Promise<void>);
+export declare type FormValidate = (callback?: FormValidateCallback, shouldRuleBeApplied?: ShouldRuleBeApplied) => Promise<void>;
 export declare type FormValidationError = ValidateError[];
 export interface FormInst {
     validate: FormValidate;

package/es/image/src/Image.d.ts

@@ -1,53 +1,50 @@
-import { PropType } from 'vue';
+import { PropType, ImgHTMLAttributes } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
-interface imgProps {
-    alt?: string;
-    crossorigin?: 'anonymous' | 'use-credentials' | '';
-    decoding?: 'async' | 'auto' | 'sync';
-    height?: number;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    usemap?: string;
-    width?: number;
-}
 export interface ImageInst {
     click: () => void;
 }
 declare const imageProps: {
     alt: StringConstructor;
     height: PropType<string | number>;
-    imgProps: PropType<imgProps>;
+    imgProps: PropType<ImgHTMLAttributes>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
+    fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
+    previewDisabled: BooleanConstructor;
+    loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
+    onLoad: PropType<(e: Event) => void>;
 };
 export declare type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
 declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
-    imgProps: PropType<imgProps>;
+    imgProps: PropType<ImgHTMLAttributes>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
+    fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
+    previewDisabled: BooleanConstructor;
+    loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
+    onLoad: PropType<(e: Event) => void>;
 }, {
     click: () => void;
     mergedClsPrefix: import("vue").Ref<string> | import("vue").ComputedRef<string>;
@@ -58,30 +55,42 @@ declare const _default: import("vue").DefineComponent<{
         toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null>;
-    imgProps: import("vue").Ref<imgProps | undefined>;
+    imgProps: import("vue").Ref<ImgHTMLAttributes | undefined>;
+    showError: import("vue").Ref<boolean>;
+    mergedOnError: (e: Event) => void;
+    mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     alt?: unknown;
     height?: unknown;
     imgProps?: unknown;
     objectFit?: unknown;
     previewSrc?: unknown;
+    fallbackSrc?: unknown;
     width?: unknown;
     src?: unknown;
     showToolbar?: unknown;
+    previewDisabled?: unknown;
+    loadDescription?: unknown;
     onError?: unknown;
+    onLoad?: unknown;
 } & {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    previewDisabled: boolean;
 } & {
     onError?: ((e: Event) => void) | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
+    onLoad?: ((e: Event) => void) | undefined;
     alt?: string | undefined;
     src?: string | undefined;
+    fallbackSrc?: string | undefined;
     previewSrc?: string | undefined;
-    imgProps?: imgProps | undefined;
+    imgProps?: ImgHTMLAttributes | undefined;
+    loadDescription?: string | undefined;
 }>, {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    previewDisabled: boolean;
 }>;
 export default _default;

package/es/image/src/Image.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, ref, toRef, mergeProps } from 'vue';
+import { defineComponent, h, inject, ref, toRef, watchEffect } from 'vue';
 import NImagePreview from './ImagePreview';
 import { imageGroupInjectionKey } from './ImageGroup';
 import { useConfig } from '../../_mixins';
@@ -11,10 +11,14 @@ const imageProps = {
         default: 'fill'
     },
     previewSrc: String,
+    fallbackSrc: String,
     width: [String, Number],
     src: String,
     showToolbar: { type: Boolean, default: true },
-    onError: Function
+    previewDisabled: Boolean,
+    loadDescription: String,
+    onError: Function,
+    onLoad: Function
 };
 export default defineComponent({
     name: 'Image',
@@ -22,12 +26,15 @@ export default defineComponent({
     inheritAttrs: false,
     setup(props) {
         const imageRef = ref(null);
+        const showErrorRef = ref(false);
         const imgPropsRef = toRef(props, 'imgProps');
         const previewInstRef = ref(null);
         const imageGroupHandle = inject(imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || useConfig(props);
         const exposedMethods = {
             click: () => {
+                if (props.previewDisabled || showErrorRef.value)
+                    return;
                 const mergedPreviewSrc = props.previewSrc || props.src;
                 if (imageGroupHandle) {
                     imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
@@ -43,17 +50,34 @@ export default defineComponent({
                 previewInst.toggleShow();
             }
         };
+        watchEffect(() => {
+            var _a;
+            void props.src;
+            void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
+            showErrorRef.value = false;
+        });
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef }, exposedMethods);
+            imageRef, imgProps: imgPropsRef, showError: showErrorRef, mergedOnError: (e) => {
+                showErrorRef.value = true;
+                const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
+                onError === null || onError === void 0 ? void 0 : onError(e);
+                imgPropsOnError === null || imgPropsOnError === void 0 ? void 0 : imgPropsOnError(e);
+            }, mergedOnLoad: (e) => {
+                const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
+            } }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, imgProps = {} } = this;
-        const imgWrapperNode = h('div', mergeProps(this.$attrs, {
-            role: 'none',
-            class: `${mergedClsPrefix}-image`
-        }), h("img", Object.assign({}, imgProps, { class: this.groupId, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.onError, style: { objectFit: this.objectFit }, "data-preview-src": this.previewSrc || this.src })));
-        return this.groupId ? (imgWrapperNode) : (h(NImagePreview, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
-            default: () => imgWrapperNode
-        }));
+        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
+        const imgNode = (h("img", Object.assign({}, imgProps, { class: [this.groupId, imgProps.class], ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
+        return (h("div", Object.assign({}, $attrs, { role: "none", class: [
+                $attrs.class,
+                `${mergedClsPrefix}-image`,
+                (this.previewDisabled || this.showError) &&
+                    `${mergedClsPrefix}-image--preview-disabled`
+            ] }), this.groupId ? (imgNode) : (h(NImagePreview, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
+            default: () => imgNode
+        }))));
     }
 });

package/es/image/src/ImageGroup.js

@@ -12,7 +12,7 @@ export default defineComponent({
     setup(props) {
         let currentSrc;
         const { mergedClsPrefixRef } = useConfig(props);
-        const groupId = createId();
+        const groupId = `c${createId()}`;
         const vm = getCurrentInstance();
         const setPreviewSrc = (src) => {
             var _a;
@@ -24,7 +24,7 @@ export default defineComponent({
                 return;
             const container = vm.proxy.$el.parentElement;
             // use dom api since we can't get the correct order before all children are rendered
-            const imgs = container.getElementsByClassName(groupId);
+            const imgs = container.querySelectorAll(`.${groupId}:not([data-error=true])`);
             if (!imgs.length)
                 return;
             const index = Array.from(imgs).findIndex((img) => img.dataset.previewSrc === currentSrc);

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

@@ -1,4 +1,4 @@
-import { c, cB } from '../../../_utils/cssr';
+import { c, cB, cNotM } from '../../../_utils/cssr';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr';
 import fadeInzoomInTransiton from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
 // --icon-color
@@ -54,9 +54,10 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  transition: transform .3s var(--bezier);
  `), cB('image', `
  display: inline-flex;
- cursor: pointer;
  max-height: 100%;
  max-width: 100%;
- `, [c('img', `
+ `, [cNotM('preview-disabled', `
+ cursor: pointer;
+ `), c('img', `
  border-radius: inherit;
  `)])]);

package/es/input/src/Input.js

@@ -390,9 +390,11 @@ export default defineComponent({
             doClear(e);
             if (props.pair) {
                 doUpdateValue(['', '']);
+                doChange(['', '']);
             }
             else {
                 doUpdateValue('');
+                doChange('');
             }
         }
         function handleMouseDown(e) {

package/es/input/src/styles/input.cssr.js

@@ -72,6 +72,7 @@ cE('input, textarea', `
  text-decoration-color: var(--text-decoration-color);
  color: var(--text-color);
  caret-color: var(--caret-color);
+ background-color: transparent;
  `, [c('&::placeholder', {
   color: '#0000'
 })]), cM('round', [cNotM('textarea', {
@@ -201,7 +202,7 @@ cM('pair', [cE('input-el, placeholder', {
   border: 'var(--border-focus)',
   boxShadow: 'var(--box-shadow-focus)'
 })]), c('&:hover', [cE('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--border-hover)'
 })])]), cE('border, state-border', `
  box-sizing: border-box;
  position: absolute;

package/es/input-number/src/InputNumber.d.ts

@@ -68,9 +68,9 @@ declare const inputNumberProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -336,9 +336,9 @@ declare const inputNumberProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -604,9 +604,9 @@ declare const inputNumberProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -924,9 +924,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1192,9 +1192,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1460,9 +1460,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1870,9 +1870,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -2208,9 +2208,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2476,9 +2476,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2744,9 +2744,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;

package/es/input-number/src/InputNumber.js

@@ -8,7 +8,7 @@ import { NButton } from '../../button';
 import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
 import { warn, call } from '../../_utils';
 import { inputNumberLight } from '../styles';
-import { parse, validator, format, parseNumber } from './utils';
+import { parse, validator, format, parseNumber, isWipValue } from './utils';
 import style from './styles/input-number.cssr';
 const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), { placeholder: String, defaultValue: {
         type: Number,
@@ -113,8 +113,11 @@ export default defineComponent({
             nTriggerFormInput();
             nTriggerFormChange();
         };
-        const deriveValueFromDisplayedValue = (offset = 0, doUpdateIfValid = true, applyMinMax = true) => {
+        const deriveValueFromDisplayedValue = (offset = 0, doUpdateIfValid = true, isInputing = false) => {
             const { value: displayedValue } = displayedValueRef;
+            if (isInputing && isWipValue(displayedValue)) {
+                return false;
+            }
             const parsedValue = parse(displayedValue);
             if (parsedValue === null) {
                 if (doUpdateIfValid)
@@ -128,13 +131,13 @@ export default defineComponent({
                     const { value: mergedMax } = mergedMaxRef;
                     const { value: mergedMin } = mergedMinRef;
                     if (mergedMax !== null && nextValue > mergedMax) {
-                        if (!doUpdateIfValid || !applyMinMax)
+                        if (!doUpdateIfValid || isInputing)
                             return false;
                         // if doUpdateIfValid=true, we try to make it a valid value
                         nextValue = mergedMax;
                     }
                     if (mergedMin !== null && nextValue < mergedMin) {
-                        if (!doUpdateIfValid || !applyMinMax)
+                        if (!doUpdateIfValid || isInputing)
                             return false;
                         // if doUpdateIfValid=true, we try to make it a valid value
                         nextValue = mergedMin;
@@ -306,6 +309,7 @@ export default defineComponent({
             else if (e.code === 'ArrowUp') {
                 if (props.keyboard.ArrowUp === false)
                     return;
+                e.preventDefault();
                 const value = deriveValueFromDisplayedValue();
                 if (value !== false) {
                     doAdd();
@@ -314,6 +318,7 @@ export default defineComponent({
             else if (e.code === 'ArrowDown') {
                 if (props.keyboard.ArrowDown === false)
                     return;
+                e.preventDefault();
                 const value = deriveValueFromDisplayedValue();
                 if (value !== false) {
                     doMinus();
@@ -323,7 +328,7 @@ export default defineComponent({
         function handleUpdateDisplayedValue(value) {
             displayedValueRef.value = value;
             if (props.updateValueOnInput) {
-                deriveValueFromDisplayedValue(0, true, false);
+                deriveValueFromDisplayedValue(0, true, true);
             }
         }
         watch(mergedValueRef, () => {

package/es/input-number/src/utils.d.ts

@@ -1,4 +1,5 @@
 export declare function parse(value: string): number | null;
+export declare function isWipValue(value: string): boolean;
 export declare function validator(value: number | undefined | null): boolean;
 export declare function format(value: number | undefined | null): string;
 export declare function parseNumber(number: number | null | undefined | string): number | null;

package/es/input-number/src/utils.js

@@ -8,6 +8,10 @@ export function parse(value) {
     }
     return Number(value);
 }
+// can be parsed to number but shouldn't be applied when inputing
+export function isWipValue(value) {
+    return /^\d+\.$/.test(value) || /^\.\d+$/.test(value);
+}
 // string => boolean (expected, not implemented)
 // number => boolean (legacy)
 export function validator(value) {

package/es/input-number/styles/light.d.ts

@@ -20,9 +20,9 @@ declare const inputNumberLight: import("../../_mixins").Theme<"InputNumber", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;

package/es/locales/common/deDE.js

@@ -22,6 +22,11 @@ const deDE = {
         yearFormat: 'yyyy',
         monthFormat: 'MMM',
         dayFormat: 'eeeeee',
+        yearTypeFormat: 'yyyy',
+        monthTypeFormat: 'MM-yyyy',
+        dateFormat: 'dd-MM-yyyy',
+        dateTimeFormat: 'dd-MM-yyyy HH:mm:ss',
+        quarterFormat: 'yyyy-qqq',
         clear: 'Löschen',
         now: 'Jetzt',
         confirm: 'Bestätigen',
@@ -30,6 +35,9 @@ const deDE = {
         datePlaceholder: 'Datum auswählen',
         datetimePlaceholder: 'Datum und Uhrzeit auswählen',
         monthPlaceholder: 'Monat auswählen',
+        // FIXME: translation needed
+        yearPlaceholder: 'Select Year',
+        quarterPlaceholder: 'Select Quarter',
         startDatePlaceholder: 'Anfangsdatum',
         endDatePlaceholder: 'Enddatum',
         startDatetimePlaceholder: 'Anfangsdatum und Uhrzeit',

package/es/locales/common/enUS.d.ts

@@ -22,6 +22,11 @@ declare const enUS: {
         yearFormat: string;
         monthFormat: string;
         dayFormat: string;
+        yearTypeFormat: string;
+        monthTypeFormat: string;
+        dateFormat: string;
+        dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -30,6 +35,8 @@ declare const enUS: {
         datePlaceholder: string;
         datetimePlaceholder: string;
         monthPlaceholder: string;
+        yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/locales/common/enUS.js

@@ -12,7 +12,7 @@ const enUS = {
     Cascader: {
         placeholder: 'Please Select',
         loading: 'Loading',
-        loadingRequiredMessage: (label) => `Please load all ${label}'s descedants before checking it.`
+        loadingRequiredMessage: (label) => `Please load all ${label}'s descendants before checking it.`
     },
     Time: {
         dateFormat: 'yyyy-MM-dd',
@@ -22,6 +22,11 @@ const enUS = {
         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',
         clear: 'Clear',
         now: 'Now',
         confirm: 'Confirm',
@@ -30,6 +35,8 @@ const enUS = {
         datePlaceholder: 'Select Date',
         datetimePlaceholder: 'Select Date and Time',
         monthPlaceholder: 'Select Month',
+        yearPlaceholder: 'Select Year',
+        quarterPlaceholder: 'Select Quarter',
         startDatePlaceholder: 'Start Date',
         endDatePlaceholder: 'End Date',
         startDatetimePlaceholder: 'Start Date and Time',

package/es/locales/common/frFR.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const frFR: NLocale;
+export default frFR;