naive-ui 2.21.2 → 2.22.0

package/lib/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/lib/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/lib/image/src/Image.js

@@ -16,10 +16,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
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'Image',
@@ -27,12 +31,15 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     setup(props) {
         const imageRef = (0, vue_1.ref)(null);
+        const showErrorRef = (0, vue_1.ref)(false);
         const imgPropsRef = (0, vue_1.toRef)(props, 'imgProps');
         const previewInstRef = (0, vue_1.ref)(null);
         const imageGroupHandle = (0, vue_1.inject)(ImageGroup_1.imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || (0, _mixins_1.useConfig)(props);
         const exposedMethods = {
             click: () => {
+                if (props.previewDisabled || showErrorRef.value)
+                    return;
                 const mergedPreviewSrc = props.previewSrc || props.src;
                 if (imageGroupHandle) {
                     imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
@@ -48,17 +55,34 @@ exports.default = (0, vue_1.defineComponent)({
                 previewInst.toggleShow();
             }
         };
+        (0, vue_1.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 = (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-            role: 'none',
-            class: `${mergedClsPrefix}-image`
-        }), (0, vue_1.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) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
-            default: () => imgWrapperNode
-        }));
+        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
+        const imgNode = ((0, vue_1.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 ((0, vue_1.h)("div", Object.assign({}, $attrs, { role: "none", class: [
+                $attrs.class,
+                `${mergedClsPrefix}-image`,
+                (this.previewDisabled || this.showError) &&
+                    `${mergedClsPrefix}-image--preview-disabled`
+            ] }), this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
+            default: () => imgNode
+        }))));
     }
 });

package/lib/image/src/ImageGroup.js

@@ -18,7 +18,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         let currentSrc;
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const groupId = (0, seemly_1.createId)();
+        const groupId = `c${(0, seemly_1.createId)()}`;
         const vm = (0, vue_1.getCurrentInstance)();
         const setPreviewSrc = (src) => {
             var _a;
@@ -30,7 +30,7 @@ exports.default = (0, vue_1.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/lib/image/src/styles/index.cssr.js

@@ -69,9 +69,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  transition: transform .3s var(--bezier);
  `), (0, cssr_1.cB)('image', `
  display: inline-flex;
- cursor: pointer;
  max-height: 100%;
  max-width: 100%;
- `, [(0, cssr_1.c)('img', `
+ `, [(0, cssr_1.cNotM)('preview-disabled', `
+ cursor: pointer;
+ `), (0, cssr_1.c)('img', `
  border-radius: inherit;
  `)])]);

package/lib/input/src/Input.js

@@ -395,9 +395,11 @@ exports.default = (0, vue_1.defineComponent)({
             doClear(e);
             if (props.pair) {
                 doUpdateValue(['', '']);
+                doChange(['', '']);
             }
             else {
                 doUpdateValue('');
+                doChange('');
             }
         }
         function handleMouseDown(e) {

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

@@ -79,6 +79,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  text-decoration-color: var(--text-decoration-color);
  color: var(--text-color);
  caret-color: var(--caret-color);
+ background-color: transparent;
  `, [(0, cssr_1.c)('&::placeholder', {
   color: '#0000'
 })]), (0, cssr_1.cM)('round', [(0, cssr_1.cNotM)('textarea', {
@@ -208,7 +209,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
   border: 'var(--border-focus)',
   boxShadow: 'var(--box-shadow-focus)'
 })]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--border-hover)'
 })])]), (0, cssr_1.cE)('border, state-border', `
  box-sizing: border-box;
  position: absolute;

package/lib/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/lib/input-number/src/InputNumber.js

@@ -118,8 +118,11 @@ exports.default = (0, vue_1.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 && (0, utils_1.isWipValue)(displayedValue)) {
+                return false;
+            }
             const parsedValue = (0, utils_1.parse)(displayedValue);
             if (parsedValue === null) {
                 if (doUpdateIfValid)
@@ -133,13 +136,13 @@ exports.default = (0, vue_1.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;
@@ -311,6 +314,7 @@ exports.default = (0, vue_1.defineComponent)({
             else if (e.code === 'ArrowUp') {
                 if (props.keyboard.ArrowUp === false)
                     return;
+                e.preventDefault();
                 const value = deriveValueFromDisplayedValue();
                 if (value !== false) {
                     doAdd();
@@ -319,6 +323,7 @@ exports.default = (0, vue_1.defineComponent)({
             else if (e.code === 'ArrowDown') {
                 if (props.keyboard.ArrowDown === false)
                     return;
+                e.preventDefault();
                 const value = deriveValueFromDisplayedValue();
                 if (value !== false) {
                     doMinus();
@@ -328,7 +333,7 @@ exports.default = (0, vue_1.defineComponent)({
         function handleUpdateDisplayedValue(value) {
             displayedValueRef.value = value;
             if (props.updateValueOnInput) {
-                deriveValueFromDisplayedValue(0, true, false);
+                deriveValueFromDisplayedValue(0, true, true);
             }
         }
         (0, vue_1.watch)(mergedValueRef, () => {

package/lib/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/lib/input-number/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseNumber = exports.format = exports.validator = exports.parse = void 0;
+exports.parseNumber = exports.format = exports.validator = exports.isWipValue = exports.parse = void 0;
 // string => string (expected, not implemented)
 // string => number (legacy)
 function parse(value) {
@@ -12,6 +12,11 @@ function parse(value) {
     return Number(value);
 }
 exports.parse = parse;
+// can be parsed to number but shouldn't be applied when inputing
+function isWipValue(value) {
+    return /^\d+\.$/.test(value) || /^\.\d+$/.test(value);
+}
+exports.isWipValue = isWipValue;
 // string => boolean (expected, not implemented)
 // number => boolean (legacy)
 function validator(value) {

package/lib/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/lib/locales/common/deDE.js

@@ -24,6 +24,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',
@@ -32,6 +37,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/lib/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/lib/locales/common/enUS.js

@@ -14,7 +14,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',
@@ -24,6 +24,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',
@@ -32,6 +37,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/lib/locales/common/frFR.d.ts

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