naive-ui 2.23.0 → 2.23.1

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -4,13 +4,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
-    readonly dateFormat: {
-        readonly type: StringConstructor;
-        readonly default: "yyyy-MM-dd";
-    };
+    readonly dateFormat: StringConstructor;
     readonly timeFormat: {
         readonly type: StringConstructor;
-        readonly default: "HH:mm:ss";
+        readonly value: "HH:mm:ss";
     };
     readonly value: {
         readonly type: import("vue").PropType<import("../interface").Value | null>;
@@ -1148,21 +1145,19 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     value: import("../interface").Value | null;
     active: boolean;
-    dateFormat: string;
     onUpdateValue: import("../interface").OnPanelUpdateValue;
     actions: unknown[];
-    timeFormat: string;
 } & {
+    dateFormat?: string | undefined;
     onTabOut?: Function | undefined;
     onClose?: import("../interface").OnClose | undefined;
     onConfirm?: Function | undefined;
     defaultTime?: import("../interface").DefaultTime | undefined;
+    timeFormat?: string | undefined;
     shortcuts?: import("../interface").Shortcuts | undefined;
 }>, {
     value: import("../interface").Value | null;
     active: boolean;
-    dateFormat: string;
     actions: unknown[];
-    timeFormat: string;
 }>;
 export default _default;

package/lib/date-picker/src/panel/month.d.ts

@@ -10,13 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => string[];
     };
     active: BooleanConstructor;
-    dateFormat: {
-        readonly type: StringConstructor;
-        readonly default: "yyyy-MM-dd";
-    };
+    dateFormat: StringConstructor;
     timeFormat: {
         readonly type: StringConstructor;
-        readonly default: "HH:mm:ss";
+        readonly value: "HH:mm:ss";
     };
     value: {
         readonly type: PropType<import("../interface").Value | null>;
@@ -1158,22 +1155,20 @@ declare const _default: import("vue").DefineComponent<{
     type: "month" | "year" | "quarter";
     value: import("../interface").Value | null;
     active: boolean;
-    dateFormat: string;
     onUpdateValue: import("../interface").OnPanelUpdateValue;
     actions: string[];
-    timeFormat: string;
 } & {
+    dateFormat?: string | undefined;
     onTabOut?: Function | undefined;
     onClose?: import("../interface").OnClose | undefined;
     onConfirm?: Function | undefined;
     defaultTime?: import("../interface").DefaultTime | undefined;
+    timeFormat?: string | undefined;
     shortcuts?: import("../interface").Shortcuts | undefined;
 }>, {
     value: import("../interface").Value | null;
     active: boolean;
-    dateFormat: string;
     actions: string[];
-    timeFormat: string;
 }>;
 /**
  * Month Panel

package/lib/date-picker/src/panel/use-calendar.d.ts

@@ -7,13 +7,10 @@ declare const useCalendarProps: {
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
-    readonly dateFormat: {
-        readonly type: StringConstructor;
-        readonly default: "yyyy-MM-dd";
-    };
+    readonly dateFormat: StringConstructor;
     readonly timeFormat: {
         readonly type: StringConstructor;
-        readonly default: "HH:mm:ss";
+        readonly value: "HH:mm:ss";
     };
     readonly value: {
         readonly type: PropType<import("../interface").Value | null>;

package/lib/date-picker/src/panel/use-calendar.js

@@ -27,9 +27,10 @@ function useCalendar(props, type) {
         isMinuteDisabled: isMinuteDisabledRef,
         isSecondDisabled: isSecondDisabledRef
     };
+    const mergedDateFormatRef = (0, vue_1.computed)(() => props.dateFormat || localeRef.value.dateFormat);
     const dateInputValueRef = (0, vue_1.ref)(props.value === null || Array.isArray(props.value)
         ? ''
-        : (0, date_fns_1.format)(props.value, props.dateFormat));
+        : (0, date_fns_1.format)(props.value, mergedDateFormatRef.value));
     const calendarValueRef = (0, vue_1.ref)(props.value === null || Array.isArray(props.value)
         ? Date.now()
         : props.value);
@@ -69,7 +70,7 @@ function useCalendar(props, type) {
     });
     (0, vue_1.watch)((0, vue_1.computed)(() => props.value), (value) => {
         if (value !== null && !Array.isArray(value)) {
-            dateInputValueRef.value = (0, date_fns_1.format)(value, props.dateFormat, panelCommon.dateFnsOptions.value);
+            dateInputValueRef.value = (0, date_fns_1.format)(value, mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
             calendarValueRef.value = value;
         }
         else {
@@ -94,7 +95,7 @@ function useCalendar(props, type) {
         return isDateDisabled(ts);
     }
     function handleDateInput(value) {
-        const date = (0, utils_1.strictParse)(value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         if ((0, date_fns_1.isValid)(date)) {
             if (props.value === null) {
                 panelCommon.doUpdateValue((0, date_fns_1.getTime)(sanitizeValue(Date.now())), false);
@@ -113,7 +114,7 @@ function useCalendar(props, type) {
         }
     }
     function handleDateInputBlur() {
-        const date = (0, utils_1.strictParse)(dateInputValueRef.value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(dateInputValueRef.value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         if ((0, date_fns_1.isValid)(date)) {
             if (props.value === null) {
                 panelCommon.doUpdateValue((0, date_fns_1.getTime)(sanitizeValue(Date.now())), false);
@@ -188,7 +189,7 @@ function useCalendar(props, type) {
         if (time === undefined) {
             time = props.value;
         }
-        dateInputValueRef.value = (0, date_fns_1.format)(time, props.dateFormat, panelCommon.dateFnsOptions.value);
+        dateInputValueRef.value = (0, date_fns_1.format)(time, mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
     }
     function handleConfirmClick() {
         if (validation.isDateInvalid.value || validation.isTimeInvalid.value) {

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -7,13 +7,10 @@ declare const useDualCalendarProps: {
         readonly default: () => string[];
     };
     readonly active: BooleanConstructor;
-    readonly dateFormat: {
-        readonly type: StringConstructor;
-        readonly default: "yyyy-MM-dd";
-    };
+    readonly dateFormat: StringConstructor;
     readonly timeFormat: {
         readonly type: StringConstructor;
-        readonly default: "HH:mm:ss";
+        readonly value: "HH:mm:ss";
     };
     readonly value: {
         readonly type: import("vue").PropType<import("../interface").Value | null>;

package/lib/date-picker/src/panel/use-dual-calendar.js

@@ -40,12 +40,13 @@ function useDualCalendar(props, type = 'datetime') {
     const nowRef = (0, vue_1.ref)(Date.now());
     const isSelectingRef = (0, vue_1.ref)(false);
     const memorizedStartDateTimeRef = (0, vue_1.ref)(0);
-    const { value, dateFormat } = props;
+    const mergedDateFormatRef = (0, vue_1.computed)(() => props.dateFormat || localeRef.value.dateFormat);
+    const { value } = props;
     const startDateInput = (0, vue_1.ref)(Array.isArray(value)
-        ? (0, date_fns_1.format)(value[0], dateFormat, panelCommon.dateFnsOptions.value)
+        ? (0, date_fns_1.format)(value[0], mergedDateFormatRef.value, panelCommon.dateFnsOptions.value)
         : '');
     const endDateInputRef = (0, vue_1.ref)(Array.isArray(value)
-        ? (0, date_fns_1.format)(value[1], dateFormat, panelCommon.dateFnsOptions.value)
+        ? (0, date_fns_1.format)(value[1], mergedDateFormatRef.value, panelCommon.dateFnsOptions.value)
         : '');
     if (Array.isArray(value)) {
         syncCalendarTimeWithValue(value);
@@ -102,9 +103,8 @@ function useDualCalendar(props, type = 'datetime') {
     (0, vue_1.watch)((0, vue_1.computed)(() => props.value), (value) => {
         if (value !== null && Array.isArray(value)) {
             const [startMoment, endMoment] = value;
-            const { dateFormat } = props;
-            startDateInput.value = (0, date_fns_1.format)(startMoment, dateFormat, panelCommon.dateFnsOptions.value);
-            endDateInputRef.value = (0, date_fns_1.format)(endMoment, dateFormat, panelCommon.dateFnsOptions.value);
+            startDateInput.value = (0, date_fns_1.format)(startMoment, mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
+            endDateInputRef.value = (0, date_fns_1.format)(endMoment, mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
             if (!isSelectingRef.value) {
                 syncCalendarTimeWithValue(value);
             }
@@ -322,7 +322,7 @@ function useDualCalendar(props, type = 'datetime') {
         }
     }
     function handleStartDateInput(value) {
-        const date = (0, utils_1.strictParse)(value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         if ((0, date_fns_1.isValid)(date)) {
             if (!props.value) {
                 const newValue = (0, date_fns_1.set)(new Date(), {
@@ -347,7 +347,7 @@ function useDualCalendar(props, type = 'datetime') {
     }
     function handleEndDateInput(value) {
         /** strict check when input */
-        const date = (0, utils_1.strictParse)(value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         if ((0, date_fns_1.isValid)(date)) {
             if (props.value === null) {
                 const newValue = (0, date_fns_1.set)(new Date(), {
@@ -371,7 +371,7 @@ function useDualCalendar(props, type = 'datetime') {
         }
     }
     function handleStartDateInputBlur() {
-        const date = (0, utils_1.strictParse)(startDateInput.value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(startDateInput.value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         const { value } = props;
         if ((0, date_fns_1.isValid)(date)) {
             if (value === null) {
@@ -396,7 +396,7 @@ function useDualCalendar(props, type = 'datetime') {
         }
     }
     function handleEndDateInputBlur() {
-        const date = (0, utils_1.strictParse)(endDateInputRef.value, props.dateFormat, new Date(), panelCommon.dateFnsOptions.value);
+        const date = (0, utils_1.strictParse)(endDateInputRef.value, mergedDateFormatRef.value, new Date(), panelCommon.dateFnsOptions.value);
         const { value } = props;
         if ((0, date_fns_1.isValid)(date)) {
             if (value === null) {
@@ -429,12 +429,11 @@ function useDualCalendar(props, type = 'datetime') {
             endDateInputRef.value = '';
             return;
         }
-        const { dateFormat } = props;
         if (times === undefined) {
             times = value;
         }
-        startDateInput.value = (0, date_fns_1.format)(times[0], dateFormat, panelCommon.dateFnsOptions.value);
-        endDateInputRef.value = (0, date_fns_1.format)(times[1], dateFormat, panelCommon.dateFnsOptions.value);
+        startDateInput.value = (0, date_fns_1.format)(times[0], mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
+        endDateInputRef.value = (0, date_fns_1.format)(times[1], mergedDateFormatRef.value, panelCommon.dateFnsOptions.value);
     }
     function handleStartTimePickerChange(value) {
         if (value === null)

package/lib/date-picker/src/panel/use-panel-common.d.ts

@@ -2,13 +2,10 @@ import { PropType, ExtractPropTypes } from 'vue';
 import { Value, OnPanelUpdateValue, OnClose, Shortcuts, DefaultTime } from '../interface';
 declare const usePanelCommonProps: {
     readonly active: BooleanConstructor;
-    readonly dateFormat: {
-        readonly type: StringConstructor;
-        readonly default: "yyyy-MM-dd";
-    };
+    readonly dateFormat: StringConstructor;
     readonly timeFormat: {
         readonly type: StringConstructor;
-        readonly default: "HH:mm:ss";
+        readonly value: "HH:mm:ss";
     };
     readonly value: {
         readonly type: PropType<Value | null>;

package/lib/date-picker/src/panel/use-panel-common.js

@@ -4,17 +4,13 @@ exports.usePanelCommonProps = exports.usePanelCommon = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const interface_1 = require("../interface");
-const DATE_FORMAT = 'yyyy-MM-dd';
 const TIME_FORMAT = 'HH:mm:ss';
 const usePanelCommonProps = {
     active: Boolean,
-    dateFormat: {
-        type: String,
-        default: DATE_FORMAT
-    },
+    dateFormat: String,
     timeFormat: {
         type: String,
-        default: TIME_FORMAT
+        value: TIME_FORMAT
     },
     value: {
         type: [Array, Number],

package/lib/dialog/src/Dialog.d.ts

@@ -1107,27 +1107,27 @@ declare const _default: import("vue").DefineComponent<{
     handleNegativeClick: (e: MouseEvent) => void;
     handleCloseClick: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--icon-color': string;
-        '--bezier': string;
-        '--close-margin': string;
-        '--icon-margin': string;
-        '--icon-size': string;
-        '--close-size': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--color': string;
-        '--text-color': string;
-        '--border-radius': string;
-        '--padding': string;
-        '--line-height': string;
-        '--border': string;
-        '--content-margin': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-text-color': string;
-        '--action-space': string;
+        '--n-font-size': string;
+        '--n-icon-color': string;
+        '--n-bezier': string;
+        '--n-close-margin': string;
+        '--n-icon-margin': string;
+        '--n-icon-size': string;
+        '--n-close-size': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-color': string;
+        '--n-text-color': string;
+        '--n-border-radius': string;
+        '--n-padding': string;
+        '--n-line-height': string;
+        '--n-border': string;
+        '--n-content-margin': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-text-color': string;
+        '--n-action-space': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     icon?: unknown;

package/lib/dialog/src/Dialog.js

@@ -89,27 +89,27 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, iconPlacement } = props;
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [(0, _utils_1.createKey)('iconColor', type)]: iconColor } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--icon-color': iconColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--close-margin': closeMargin,
-                    '--icon-margin': iconMargin,
-                    '--icon-size': iconSize,
-                    '--close-size': closeSize,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--border-radius': borderRadius,
-                    '--padding': padding,
-                    '--line-height': lineHeight,
-                    '--border': border,
-                    '--content-margin': contentMargin,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-text-color': titleTextColor,
-                    '--action-space': actionSpace
+                    '--n-font-size': fontSize,
+                    '--n-icon-color': iconColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-close-margin': closeMargin,
+                    '--n-icon-margin': iconMargin,
+                    '--n-icon-size': iconSize,
+                    '--n-close-size': closeSize,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-border-radius': borderRadius,
+                    '--n-padding': padding,
+                    '--n-line-height': lineHeight,
+                    '--n-border': border,
+                    '--n-content-margin': contentMargin,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-action-space': actionSpace
                 };
             })
         };

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

@@ -5,49 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --icon-color
-// --bezier
-// --close-margin
-// --icon-margin
-// --icon-size
-// --close-size
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --color
-// --text-color
-// --border-radius
-// --padding
-// --line-height
-// --border
-// --content-margin
-// --title-font-size
-// --title-font-weight
-// --title-text-color
-// --action-space
+// --n-icon-color
+// --n-bezier
+// --n-close-margin
+// --n-icon-margin
+// --n-icon-size
+// --n-close-size
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-color
+// --n-text-color
+// --n-border-radius
+// --n-padding
+// --n-line-height
+// --n-border
+// --n-content-margin
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-text-color
+// --n-action-space
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  position: relative;
- background: var(--color);
- color: var(--text-color);
+ background: var(--n-color);
+ color: var(--n-text-color);
  box-sizing: border-box;
  margin: auto;
- border-radius: var(--border-radius);
- padding: var(--padding);
+ border-radius: var(--n-border-radius);
+ padding: var(--n-padding);
  transition: 
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 }), (0, cssr_1.cM)('bordered', {
-  border: 'var(--border)'
+  border: 'var(--n-border)'
 }), (0, cssr_1.cM)('icon-top', [(0, cssr_1.cE)('close', {
-  margin: 'var(--close-margin)'
+  margin: 'var(--n-close-margin)'
 }), (0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)'
+  margin: 'var(--n-icon-margin)'
 }), (0, cssr_1.cE)('content', {
   textAlign: 'center'
 }), (0, cssr_1.cE)('title', {
@@ -55,35 +55,35 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
 }), (0, cssr_1.cE)('action', {
   justifyContent: 'center'
 })]), (0, cssr_1.cM)('icon-left', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)'
+  margin: 'var(--n-icon-margin)'
 })]), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
+ font-size: var(--n-close-size);
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--close-margin);
- transition: .3s color var(--bezier);
+ margin: var(--n-close-margin);
+ transition: .3s color var(--n-bezier);
  z-index: 1;
  `), (0, cssr_1.cE)('content', `
- font-size: var(--font-size);
- margin: var(--content-margin);
+ font-size: var(--n-font-size);
+ margin: var(--n-content-margin);
  position: relative;
  word-break: break-word;
  `, [(0, cssr_1.c)('&:last-child', 'margin-bottom: 0;')]), (0, cssr_1.cE)('action', `
  display: flex;
  justify-content: flex-end;
  `, [(0, cssr_1.c)('> *:not(:last-child)', {
-  marginRight: 'var(--action-space)'
+  marginRight: 'var(--n-action-space)'
 })]), (0, cssr_1.cE)('icon', {
-  fontSize: 'var(--icon-size)',
-  transition: 'color .3s var(--bezier)'
+  fontSize: 'var(--n-icon-size)',
+  transition: 'color .3s var(--n-bezier)'
 }), (0, cssr_1.cE)('title', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
- font-size: var(--title-font-size);
- font-weight: var(--title-font-weight);
- color: var(--title-text-color);
+ font-size: var(--n-title-font-size);
+ font-weight: var(--n-title-font-weight);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cB)('dialog-icon-container', {
   display: 'flex',
   justifyContent: 'center'

package/lib/dynamic-tags/src/DynamicTags.d.ts

@@ -2571,7 +2571,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--input-width': string;
+        '--n-input-width': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     closable?: unknown;

package/lib/dynamic-tags/src/DynamicTags.js

@@ -127,7 +127,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { inputWidth } } = themeRef.value;
                 return {
-                    '--input-width': inputWidth
+                    '--n-input-width': inputWidth
                 };
             })
         };

package/lib/dynamic-tags/src/styles/index.cssr.js

@@ -9,5 +9,5 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 
 
 exports.default = (0, cssr_1.cB)('dynamic-tags', [(0, cssr_1.cB)('input', {
-  minWidth: 'var(--input-width)'
+  minWidth: 'var(--n-input-width)'
 })]);