naive-ui 2.33.4 → 2.34.0

package/es/equation/src/Equation.js

@@ -0,0 +1,29 @@
+import { h, defineComponent, computed, inject } from 'vue';
+import { configProviderInjectionKey } from '../../config-provider/src/context';
+export const equationProps = {
+    value: String,
+    katex: Object,
+    katexOptions: Object
+};
+export const Equation = defineComponent({
+    name: 'Equation',
+    props: equationProps,
+    setup(props) {
+        const configProviderContext = inject(configProviderInjectionKey);
+        const extractedHtmlInfo = computed(() => {
+            var _a;
+            const outerHtml = ((_a = (props.katex || (configProviderContext === null || configProviderContext === void 0 ? void 0 : configProviderContext.mergedKatexRef.value))) === null || _a === void 0 ? void 0 : _a.renderToString(props.value || '', Object.assign({ throwOnError: false }, props.katexOptions))) || 'no katex provided';
+            const matchResult = outerHtml.match(/^<([a-z]+)[^>]+class="([^"]+)"[^>]*>/);
+            const wrapperTag = (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) || 'span';
+            const wrapperClass = matchResult === null || matchResult === void 0 ? void 0 : matchResult[2];
+            const innerHtml = outerHtml
+                .replace(/^<[a-z]+[^>]*>/, '')
+                .replace(/<\/[a-z]+>$/, '');
+            return { wrapperTag, innerHtml, wrapperClass };
+        });
+        return () => {
+            const { innerHtml, wrapperClass, wrapperTag } = extractedHtmlInfo.value;
+            return h(wrapperTag, { class: wrapperClass, innerHTML: innerHtml });
+        };
+    }
+});

package/es/equation/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { EquationTheme } from './light';
+declare const equationDark: EquationTheme;
+export default equationDark;

package/es/equation/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const equationDark = {
+    name: 'Equation',
+    common: commonDark,
+    self
+};
+export default equationDark;

package/es/equation/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as equationDark } from './dark';
+export { default as equationLight } from './light';
+export type { EquationThemeVars, EquationTheme } from './light';

package/es/equation/styles/index.js

@@ -0,0 +1,2 @@
+export { default as equationDark } from './dark';
+export { default as equationLight } from './light';

package/es/equation/styles/light.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '../../_mixins';
+export declare const self: () => {};
+export declare type EquationThemeVars = ReturnType<typeof self>;
+declare const equationLight: Theme<'Equation', EquationThemeVars>;
+export default equationLight;
+export declare type EquationTheme = typeof equationLight;

package/es/equation/styles/light.js

@@ -0,0 +1,8 @@
+import { commonLight } from '../../_styles/common';
+export const self = () => ({});
+const equationLight = {
+    name: 'Equation',
+    common: commonLight,
+    self
+};
+export default equationLight;

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

@@ -267,8 +267,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-feedback-text-color-warning': string;
         '--n-feedback-text-color-error': string;
     }> | undefined;
-    themeClass: import("vue").Ref<string>;
-    onRender: () => void;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
     path?: string | undefined;
@@ -292,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
         key: string;
         render: () => VNodeChild;
     }[]>;
+    reverseColSpace: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly label: StringConstructor;
     readonly labelWidth: PropType<string | number>;

package/es/form/src/FormItem.js

@@ -75,7 +75,7 @@ export default defineComponent({
         const { validationErrored: validationErroredRef } = formItemMiscRefs;
         const { mergedRequired: mergedRequiredRef, mergedRules: mergedRulesRef } = formItemRule(props);
         const { mergedSize: mergedSizeRef } = formItemSizeRefs;
-        const { mergedLabelPlacement: labelPlacementRef, mergedLabelAlign: labelTextAlignRef } = formItemMiscRefs;
+        const { mergedLabelPlacement: labelPlacementRef, mergedLabelAlign: labelTextAlignRef, mergedRequireMarkPlacement: mergedRequireMarkPlacementRef } = formItemMiscRefs;
         const renderExplainsRef = ref([]);
         const feedbackIdRef = ref(createId());
         const mergedDisabledRef = NForm
@@ -290,11 +290,26 @@ export default defineComponent({
             };
             return cssVars;
         });
-        const themeClassHandle = useThemeClass('form-item', computed(() => {
-            var _a;
-            return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
-        }), cssVarsRef, props);
-        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('form-item', computed(() => {
+                var _a;
+                return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
+            }), cssVarsRef, props)
+            : undefined;
+        const reverseColSpaceRef = computed(() => {
+            // label placement left
+            // require-mark-placement | label align | areas (1fr auto)
+            // left                   | left        | mark text (need reverse)
+            // left                   | right       | mark text (okay)
+            // right                  | left        | mark text (okay)
+            // right                  | right       | mark text (okay)
+            // right-hanging          | left        | text mark (okay)
+            // right-hanging          | right       | text mark (okay)
+            return (labelPlacementRef.value === 'left' &&
+                mergedRequireMarkPlacementRef.value === 'left' &&
+                labelTextAlignRef.value === 'left');
+        });
+        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef, reverseColSpace: reverseColSpaceRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
@@ -312,7 +327,9 @@ export default defineComponent({
             return (h("label", Object.assign({}, labelProps, { class: [
                     labelProps === null || labelProps === void 0 ? void 0 : labelProps.class,
                     `${mergedClsPrefix}-form-item-label`,
-                    `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`
+                    `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`,
+                    this.reverseColSpace &&
+                        `${mergedClsPrefix}-form-item-label--reverse-columns-space`
                 ], style: this.mergedLabelStyle, ref: "labelElementRef" }), mergedRequireMarkPlacement === 'left'
                 ? [markNode, textNode]
                 : [textNode, markNode]));

package/es/form/src/styles/form-item.cssr.js

@@ -1,5 +1,6 @@
 import { cB, cE, cM, c } from '../../../_utils/cssr';
-import { fadeDownTransition } from '../../../_styles/transitions/fade-down.cssr'; // vars:
+import { fadeDownTransition } from '../../../_styles/transitions/fade-down.cssr';
+// vars:
 // --n-line-height
 // --n-blank-height
 // --n-feedback-padding
@@ -16,7 +17,6 @@ import { fadeDownTransition } from '../../../_styles/transitions/fade-down.cssr'
 // --n-feedback-text-color-error
 // --n-label-text-align
 // --n-label-padding
-
 export default cB('form-item', `
  display: grid;
  line-height: var(--n-line-height);
@@ -60,7 +60,9 @@ export default cB('form-item', `
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
- `, [cM('left-mark', `
+ `, [cM('reverse-columns-space', `
+ grid-template-columns: auto 1fr;
+ `), cM('left-mark', `
  grid-template-areas:
  "mark text"
  ". text";

package/es/gradient-text/src/styles/index.cssr.js

@@ -1,10 +1,10 @@
-import { cB } from '../../../_utils/cssr'; // vars:
+import { cB } from '../../../_utils/cssr';
+// vars:
 // --n-font-weight
 // --n-rotate
 // --n-bezier
 // --n-color-start
 // --n-color-end
-
 export default cB('gradient-text', `
  display: inline-block;
  font-weight: var(--n-font-weight);

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

@@ -1,8 +1,8 @@
-import { c, cB, cM } from '../../../_utils/cssr'; // vars:
+import { c, cB, cM } from '../../../_utils/cssr';
+// vars:
 // --n-bezier
 // --n-color
 // --n-opacity
-
 export default cB('icon', `
  height: 1em;
  width: 1em;

package/es/icon-wrapper/src/styles/index.cssr.js

@@ -1,9 +1,9 @@
-import { cB } from '../../../_utils/cssr'; // vars:
+import { cB } from '../../../_utils/cssr';
+// vars:
 // --n-bezier
 // --n-border-radius
 // --n-color
 // --n-icon-color
-
 export default cB('icon-wrapper', `
  transition:
  color .3s var(--n-bezier),

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

@@ -100,6 +100,7 @@ export declare const imageProps: {
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
@@ -212,6 +213,7 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
@@ -236,10 +238,10 @@ declare const _default: import("vue").DefineComponent<{
         toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null>;
-    imgProps: import("vue").Ref<ImgHTMLAttributes | undefined>;
     showError: import("vue").Ref<boolean>;
     shouldStartLoading: import("vue").Ref<boolean>;
     loaded: import("vue").Ref<boolean>;
+    mergedOnClick: (e: MouseEvent) => void;
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -338,6 +340,7 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {

package/es/image/src/Image.js

@@ -1,11 +1,11 @@
-import { defineComponent, h, inject, ref, toRef, watchEffect, onMounted, onBeforeUnmount } from 'vue';
+import { defineComponent, h, inject, ref, watchEffect, onMounted, onBeforeUnmount, provide, toRef } from 'vue';
 import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load';
 import { useConfig } from '../../_mixins';
-import { imagePreviewSharedProps } from './interface';
+import { imageContextKey, imagePreviewSharedProps } from './interface';
 import { observeIntersection } from './utils';
 import { imageGroupInjectionKey } from './ImageGroup';
 import NImagePreview from './ImagePreview';
-export const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, lazy: Boolean, intersectionObserverOptions: Object, objectFit: {
+export const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, previewedImgProps: Object, lazy: Boolean, intersectionObserverOptions: Object, objectFit: {
         type: String,
         default: 'fill'
     }, previewSrc: String, fallbackSrc: String, width: [String, Number], src: String, previewDisabled: Boolean, loadDescription: String, onError: Function, onLoad: Function }, imagePreviewSharedProps);
@@ -16,7 +16,6 @@ export default defineComponent({
     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);
@@ -68,8 +67,15 @@ export default defineComponent({
             showErrorRef.value = false;
         });
         const loadedRef = ref(false);
+        provide(imageContextKey, {
+            previewedImgPropsRef: toRef(props, 'previewedImgProps')
+        });
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnError: (e) => {
+            imageRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnClick: (e) => {
+                var _a, _b;
+                exposedMethods.click();
+                (_b = (_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }, mergedOnError: (e) => {
                 if (!shouldStartLoadingRef.value)
                     return;
                 showErrorRef.value = true;
@@ -88,13 +94,13 @@ export default defineComponent({
         const { mergedClsPrefix, imgProps = {}, loaded, $attrs, lazy } = this;
         const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
         const loadSrc = this.src || imgProps.src || '';
-        const imgNode = h('img', Object.assign(Object.assign({}, imgProps), { class: imgProps.class, ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: isImageSupportNativeLazy
+        const imgNode = h('img', Object.assign(Object.assign({}, imgProps), { ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: isImageSupportNativeLazy
                 ? loadSrc
                 : this.showError
                     ? this.fallbackSrc
                     : this.shouldStartLoading
                         ? loadSrc
-                        : undefined, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, loading: lazy ? 'lazy' : 'eager', style: [
+                        : undefined, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.mergedOnClick, onError: this.mergedOnError, onLoad: this.mergedOnLoad, loading: lazy ? 'lazy' : 'eager', style: [
                 imgProps.style || '',
                 placeholderNode && !loaded
                     ? { height: '0', width: '0', visibility: 'hidden' }

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

@@ -113,12 +113,13 @@ declare const _default: import("vue").DefineComponent<{
     show: import("vue").Ref<boolean>;
     appear: Readonly<import("vue").Ref<boolean>>;
     displayed: import("vue").Ref<boolean>;
+    previewedImgProps: import("vue").Ref<import("vue").ImgHTMLAttributes> | undefined;
     handleWheel(e: WheelEvent): void;
     handlePreviewMousedown: (e: MouseEvent) => void;
-    handlePreviewDblclick: () => void;
+    handlePreviewDblclick: (e: MouseEvent) => void;
     syncTransformOrigin: () => void;
     handleAfterLeave: () => void;
-    handleDragStart: (e: Event) => void;
+    handleDragStart: (e: DragEvent) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     rotateCounterclockwise: () => void;

package/es/image/src/ImagePreview.js

@@ -1,16 +1,17 @@
-import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, watch, computed, toRef, onBeforeUnmount } from 'vue';
+import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, watch, computed, toRef, onBeforeUnmount, inject, normalizeStyle } from 'vue';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
 import { LazyTeleport } from 'vueuc';
 import { on, off } from 'evtd';
 import { beforeNextFrameOnce } from 'seemly';
+import { kebabCase } from 'lodash-es';
 import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon, ResizeSmallIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
 import { NTooltip } from '../../tooltip';
 import { imageLight } from '../styles';
 import { prevIcon, nextIcon, closeIcon } from './icons';
-import { imagePreviewSharedProps } from './interface';
+import { imageContextKey, imagePreviewSharedProps } from './interface';
 import style from './styles/index.cssr';
 const BLEEDING = 32;
 export default defineComponent({
@@ -41,6 +42,9 @@ export default defineComponent({
         function handleKeydown(e) {
             var _a, _b;
             switch (e.key) {
+                case ' ':
+                    e.preventDefault();
+                    break;
                 case 'ArrowLeft':
                     (_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
                     break;
@@ -150,7 +154,12 @@ export default defineComponent({
             offsetY = offset.offsetY;
             derivePreviewStyle();
         }
+        const imageContext = inject(imageContextKey, null);
         function handlePreviewMousedown(e) {
+            var _a, _b;
+            (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onMousedown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            if (e.button !== 0)
+                return;
             const { clientX, clientY } = e;
             dragging = true;
             startX = clientX - offsetX;
@@ -163,7 +172,9 @@ export default defineComponent({
             on('mousemove', document, handleMouseMove);
             on('mouseup', document, handleMouseUp);
         }
-        function handlePreviewDblclick() {
+        function handlePreviewDblclick(e) {
+            var _a, _b;
+            (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onDblclick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             const originalImageSizeScale = getOrignalImageSizeScale();
             scale = scale === originalImageSizeScale ? 1 : originalImageSizeScale;
             derivePreviewStyle();
@@ -246,13 +257,27 @@ export default defineComponent({
             if (!preview)
                 return;
             const { style } = preview;
+            const controlledStyle = normalizeStyle(imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value.style);
+            let controlledStyleString = '';
+            if (typeof controlledStyle === 'string') {
+                controlledStyleString = controlledStyle + ';';
+            }
+            else {
+                for (const key in controlledStyle) {
+                    controlledStyleString += `${kebabCase(key)}: ${controlledStyle[key]};`;
+                }
+            }
             const transformStyle = `transform-origin: center; transform: translateX(${offsetX}px) translateY(${offsetY}px) rotate(${rotate}deg) scale(${scale});`;
             if (dragging) {
-                style.cssText = 'cursor: grabbing; transition: none;' + transformStyle;
+                style.cssText =
+                    controlledStyleString +
+                        'cursor: grabbing; transition: none;' +
+                        transformStyle;
             }
             else {
                 style.cssText =
-                    'cursor: grab;' +
+                    controlledStyleString +
+                        'cursor: grab;' +
                         transformStyle +
                         (transition ? '' : 'transition: none;');
             }
@@ -309,7 +334,7 @@ export default defineComponent({
             ? useThemeClass('image-preview', undefined, cssVarsRef, props)
             : undefined;
         return Object.assign({ previewRef,
-            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: useIsMounted(), displayed: displayedRef, handleWheel(e) {
+            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: useIsMounted(), displayed: displayedRef, previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef, handleWheel(e) {
                 e.preventDefault();
             },
             handlePreviewMousedown,
@@ -319,6 +344,8 @@ export default defineComponent({
                 rotate = 0;
                 displayedRef.value = false;
             }, handleDragStart: (e) => {
+                var _a, _b;
+                (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onDragstart) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 e.preventDefault();
             }, zoomIn,
             zoomOut,
@@ -378,8 +405,14 @@ export default defineComponent({
                             // onEnter will be called twice, I don't know why
                             // Maybe it is a bug of vue
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
-                            default: () => withDirectives(h("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
-                                h("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart })), [[vShow, this.show]])
+                            default: () => {
+                                const { previewedImgProps = {} } = this;
+                                return withDirectives(h("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
+                                    h("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
+                                            `${clsPrefix}-image-preview`,
+                                            previewedImgProps.class
+                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vShow, this.show]]);
+                            }
                         })), [[zindexable, { enabled: this.show }]]);
                 }
             })));

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

@@ -1,3 +1,4 @@
+import { ImgHTMLAttributes, Ref } from 'vue';
 export interface MoveStrategy {
     moveVerticalDirection: 'verticalTop' | 'verticalBottom';
     moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
@@ -98,3 +99,7 @@ export declare const imagePreviewSharedProps: {
         }>;
     }>>>;
 };
+export interface ImageContext {
+    previewedImgPropsRef: Ref<ImgHTMLAttributes>;
+}
+export declare const imageContextKey: import("vue").InjectionKey<ImageContext>;

package/es/image/src/interface.js

@@ -1,2 +1,4 @@
 import { useTheme } from '../../_mixins';
+import { createInjectionKey } from '../../_utils';
 export const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), { showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });
+export const imageContextKey = createInjectionKey('n-image');

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

@@ -1,12 +1,12 @@
 import { c, cB, cNotM } from '../../../_utils/cssr';
 import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-toolbar-icon-color
 // --n-toolbar-color
 // --n-toolbar-border-radius
 // --n-toolbar-box-shadow
 // --n-bezier
-
 export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('image-preview-container', `
  position: fixed;
  left: 0;

package/es/input/src/Input.d.ts

@@ -74,6 +74,7 @@ export declare const inputProps: {
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -350,6 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -917,6 +919,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;

package/es/input/src/Input.js

@@ -44,7 +44,7 @@ export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bor
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, allowInput: Function, renderCount: Function, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, allowInput: Function, renderCount: Function, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], countGraphemes: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -355,6 +355,24 @@ export default defineComponent({
             }
         }
         function allowInput(value) {
+            const { countGraphemes, maxlength, minlength } = props;
+            if (countGraphemes) {
+                let graphemesCount;
+                if (maxlength !== undefined) {
+                    if (graphemesCount === undefined) {
+                        graphemesCount = countGraphemes(value);
+                    }
+                    if (graphemesCount > Number(maxlength))
+                        return false;
+                }
+                if (minlength !== undefined) {
+                    if (graphemesCount === undefined) {
+                        graphemesCount = countGraphemes(value);
+                    }
+                    if (graphemesCount < Number(maxlength))
+                        return false;
+                }
+            }
             const { allowInput } = props;
             if (typeof allowInput === 'function') {
                 return allowInput(value);
@@ -663,7 +681,8 @@ export default defineComponent({
         provide(inputInjectionKey, {
             mergedValueRef,
             maxlengthRef,
-            mergedClsPrefixRef
+            mergedClsPrefixRef,
+            countGraphemesRef: toRef(props, 'countGraphemes')
         });
         const exposedProps = {
             wrapperElRef,
@@ -777,7 +796,7 @@ export default defineComponent({
     },
     render() {
         var _a, _b;
-        const { mergedClsPrefix, mergedStatus, themeClass, type, onRender } = this;
+        const { mergedClsPrefix, mergedStatus, themeClass, type, countGraphemes, onRender } = this;
         const $slots = this.$slots;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { ref: "wrapperElRef", class: [
@@ -813,7 +832,7 @@ export default defineComponent({
                             h("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: [
                                     `${mergedClsPrefix}-input__textarea-el`,
                                     (_a = this.inputProps) === null || _a === void 0 ? void 0 : _a.class
-                                ], autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
+                                ], autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
                                     ? -1
                                     : undefined, style: [
                                     this.textDecorationStyle[0],
@@ -839,7 +858,7 @@ export default defineComponent({
                         ], style: [
                             this.textDecorationStyle[0],
                             (_b = this.inputProps) === null || _b === void 0 ? void 0 : _b.style
-                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
+                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[0]
                             : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: (e) => this.handleInputFocus(e, 0), onInput: (e) => this.handleInput(e, 0), onChange: (e) => this.handleChange(e, 0) })),
                     this.showPlaceholder1 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
@@ -876,7 +895,7 @@ export default defineComponent({
             this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, resolveSlot($slots.separator, () => [this.separator]))) : null,
             this.pair ? (h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 h("div", { class: `${mergedClsPrefix}-input__input` },
-                    h("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
+                    h("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[1]
                             : undefined, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: (e) => this.handleInputFocus(e, 1), onInput: (e) => this.handleInput(e, 1), onChange: (e) => this.handleChange(e, 1) }),
                     this.showPlaceholder2 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },

package/es/input/src/WordCount.js

@@ -5,14 +5,14 @@ import { len } from './utils';
 export default defineComponent({
     name: 'InputWordCount',
     setup(_, { slots }) {
-        const { mergedValueRef, maxlengthRef, mergedClsPrefixRef } = 
+        const { mergedValueRef, maxlengthRef, mergedClsPrefixRef, countGraphemesRef } = 
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         inject(inputInjectionKey);
         const wordCountRef = computed(() => {
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null || Array.isArray(mergedValue))
                 return 0;
-            return len(mergedValue);
+            return (countGraphemesRef.value || len)(mergedValue);
         });
         return () => {
             const { value: maxlength } = maxlengthRef;

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

@@ -16,6 +16,7 @@ export interface InputWrappedRef {
 }
 export declare type InputInst = UnwrapRef<InputWrappedRef>;
 export declare const inputInjectionKey: import("vue").InjectionKey<{
+    countGraphemesRef: Ref<((input: string) => number) | undefined>;
     mergedValueRef: Ref<string | [string, string] | null>;
     maxlengthRef: Ref<number | undefined>;
     mergedClsPrefixRef: Ref<string>;

package/es/input/src/styles/input-group-label.cssr.js

@@ -1,4 +1,5 @@
-import { cB, cE } from '../../../_utils/cssr'; // vars:
+import { cB, cE } from '../../../_utils/cssr';
+// vars:
 // --n-bezier
 // --n-group-label-color
 // --n-border-radius
@@ -6,7 +7,6 @@ import { cB, cE } from '../../../_utils/cssr'; // vars:
 // --n-font-size
 // --n-height
 // --n-group-label-border
-
 export default cB('input-group-label', `
  position: relative;
  user-select: none;