naive-ui 2.34.4 → 2.36.0

package/es/popover/src/PopoverBody.js

@@ -10,14 +10,14 @@ import { formatLength, isSlotEmpty, resolveWrappedSlot, useAdjustedTo, isJsdom }
 import { popoverLight } from '../styles';
 import { popoverBodyInjectionKey } from './interface';
 import style from './styles/index.cssr';
-export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowPointToCenter: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, scrollable: Boolean, contentStyle: [Object, String], headerStyle: [Object, String], footerStyle: [Object, String], 
+export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowPointToCenter: Boolean, arrowClass: String, arrowStyle: [String, Object], arrowWrapperClass: String, arrowWrapperStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, scrollable: Boolean, contentClass: String, contentStyle: [Object, String], headerClass: String, headerStyle: [Object, String], footerClass: String, footerStyle: [Object, String], 
     // private
     internalDeactivateImmediately: Boolean, animated: Boolean, onClickoutside: Function, internalTrapFocus: Boolean, internalOnAfterLeave: Function, 
     // deprecated
     minWidth: Number, maxWidth: Number });
-export const renderArrow = ({ arrowStyle, clsPrefix }) => {
-    return (h("div", { key: "__popover-arrow__", class: `${clsPrefix}-popover-arrow-wrapper` },
-        h("div", { class: `${clsPrefix}-popover-arrow`, style: arrowStyle })));
+export const renderArrow = ({ arrowClass, arrowStyle, arrowWrapperClass, arrowWrapperStyle, clsPrefix }) => {
+    return (h("div", { key: "__popover-arrow__", style: arrowWrapperStyle, class: [`${clsPrefix}-popover-arrow-wrapper`, arrowWrapperClass] },
+        h("div", { class: [`${clsPrefix}-popover-arrow`, arrowClass], style: arrowStyle })));
 };
 export default defineComponent({
     name: 'PopoverBody',
@@ -27,6 +27,7 @@ export default defineComponent({
         const { namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Popover', '-popover', style, popoverLight, props, mergedClsPrefixRef);
         const followerRef = ref(null);
+        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
         const NPopover = inject('NPopover');
         const bodyRef = ref(null);
         const followerEnabledRef = ref(props.show);
@@ -176,25 +177,40 @@ export default defineComponent({
                 const { internalTrapFocus } = props;
                 const hasHeaderOrFooter = !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer);
                 const renderContentInnerNode = () => {
-                    var _a;
+                    var _a, _b;
                     const body = hasHeaderOrFooter ? (h(Fragment, null,
                         resolveWrappedSlot(slots.header, (children) => {
-                            return children ? (h("div", { class: `${mergedClsPrefix}-popover__header`, style: props.headerStyle }, children)) : null;
+                            return children ? (h("div", { class: [
+                                    `${mergedClsPrefix}-popover__header`,
+                                    props.headerClass
+                                ], style: props.headerStyle }, children)) : null;
                         }),
                         resolveWrappedSlot(slots.default, (children) => {
-                            return children ? (h("div", { class: `${mergedClsPrefix}-popover__content`, style: props.contentStyle }, slots)) : null;
+                            return children ? (h("div", { class: [
+                                    `${mergedClsPrefix}-popover__content`,
+                                    props.contentClass
+                                ], style: props.contentStyle }, slots)) : null;
                         }),
                         resolveWrappedSlot(slots.footer, (children) => {
-                            return children ? (h("div", { class: `${mergedClsPrefix}-popover__footer`, style: props.footerStyle }, children)) : null;
-                        }))) : props.scrollable ? ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) : (h("div", { class: `${mergedClsPrefix}-popover__content`, style: props.contentStyle }, slots));
+                            return children ? (h("div", { class: [
+                                    `${mergedClsPrefix}-popover__footer`,
+                                    props.footerClass
+                                ], style: props.footerStyle }, children)) : null;
+                        }))) : props.scrollable ? ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) : (h("div", { class: [
+                            `${mergedClsPrefix}-popover__content`,
+                            props.contentClass
+                        ], style: props.contentStyle }, slots));
                     const maybeScrollableBody = props.scrollable ? (h(NxScrollbar, { contentClass: hasHeaderOrFooter
                             ? undefined
-                            : `${mergedClsPrefix}-popover__content`, contentStyle: hasHeaderOrFooter ? undefined : props.contentStyle }, {
+                            : `${mergedClsPrefix}-popover__content ${(_b = props.contentClass) !== null && _b !== void 0 ? _b : ''}`, contentStyle: hasHeaderOrFooter ? undefined : props.contentStyle }, {
                         default: () => body
                     })) : (body);
                     const arrow = props.showArrow
                         ? renderArrow({
+                            arrowClass: props.arrowClass,
                             arrowStyle: props.arrowStyle,
+                            arrowWrapperClass: props.arrowWrapperClass,
+                            arrowWrapperStyle: props.arrowWrapperStyle,
                             clsPrefix: mergedClsPrefix
                         })
                         : null;

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

@@ -4,6 +4,9 @@ export interface PopoverInst {
     syncPosition: () => void;
     setShow: (value: boolean) => void;
 }
+export type InternalPopoverInst = PopoverInst & {
+    getMergedShow: () => boolean;
+};
 export type PopoverBodyInjection = Ref<HTMLElement | null> | null;
 export declare const popoverBodyInjectionKey: import("vue").InjectionKey<PopoverBodyInjection>;
-export type InternalRenderBody = (className: any, ref: Ref<HTMLElement | null>, style: Ref<CSSProperties>, onMouseenter: (e: MouseEvent) => void, onMouseleave: (e: MouseEvent) => void) => VNode;
+export type InternalRenderBody = (className: any, ref: Ref<HTMLElement | null>, style: CSSProperties[], onMouseenter: (e: MouseEvent) => void, onMouseleave: (e: MouseEvent) => void) => VNode;

package/es/popselect/src/Popselect.d.ts

@@ -65,8 +65,12 @@ export declare const popselectProps: {
     };
     raw: BooleanConstructor;
     overlap: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | import("vue").CSSProperties>;
+    arrowClass: StringConstructor;
     arrowStyle: PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     delay: {
         type: NumberConstructor;
         default: number;
@@ -80,7 +84,9 @@ export declare const popselectProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    headerClass: StringConstructor;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     internalDeactivateImmediately: BooleanConstructor;
     animated: {
@@ -384,8 +390,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     overlap: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | import("vue").CSSProperties>;
+    arrowClass: StringConstructor;
     arrowStyle: PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     delay: {
         type: NumberConstructor;
         default: number;
@@ -399,7 +409,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    headerClass: StringConstructor;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     internalDeactivateImmediately: BooleanConstructor;
     animated: {
@@ -914,8 +926,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     overlap: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | import("vue").CSSProperties>;
+    arrowClass: StringConstructor;
     arrowStyle: PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     delay: {
         type: NumberConstructor;
         default: number;
@@ -929,7 +945,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    headerClass: StringConstructor;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     internalDeactivateImmediately: BooleanConstructor;
     animated: {
@@ -1196,5 +1214,5 @@ declare const _default: import("vue").DefineComponent<{
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     internalExtraClass: string[];
     cancelable: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/popselect/src/Popselect.js

@@ -50,13 +50,14 @@ export default defineComponent({
             ref: 'popoverInstRef',
             internalRenderBody: (className, ref, style, onMouseenter, onMouseleave) => {
                 const { $attrs } = this;
-                return (h(NPopselectPanel, Object.assign({}, $attrs, { class: [$attrs.class, className], style: [$attrs.style, style] }, keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: mergeEventHandlers([
+                return (h(NPopselectPanel, Object.assign({}, $attrs, { class: [$attrs.class, className], style: [$attrs.style, ...style] }, keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: mergeEventHandlers([
                         onMouseenter,
                         $attrs.onMouseenter
                     ]), onMouseleave: mergeEventHandlers([
                         onMouseleave,
                         $attrs.onMouseleave
                     ]) }), {
+                    header: () => { var _a, _b; return (_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a); },
                     action: () => { var _a, _b; return (_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a); },
                     empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); }
                 }));

package/es/popselect/src/PopselectPanel.d.ts

@@ -270,7 +270,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
     handleMenuMousedown: (e: MouseEvent) => void;
@@ -316,5 +316,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly showCheckmark: boolean;
     readonly virtualScroll: boolean;
     readonly cancelable: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/popselect/src/PopselectPanel.js

@@ -156,6 +156,7 @@ export default defineComponent({
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, nodeProps: this.nodeProps, class: [`${this.mergedClsPrefix}-popselect-menu`, this.themeClass], style: this.cssVars, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, virtualScroll: this.virtualScroll, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown, showCheckmark: this.showCheckmark }, {
+            header: () => { var _a, _b; return ((_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; },
             action: () => { var _a, _b; return ((_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; },
             empty: () => { var _a, _b; return ((_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; }
         }));

package/es/progress/src/Circle.d.ts

@@ -88,5 +88,5 @@ declare const _default: import("vue").DefineComponent<{
     percentage: number;
     offsetDegree: number;
     gapOffsetDegree: number;
-}>;
+}, {}>;
 export default _default;

package/es/progress/src/Line.d.ts

@@ -75,5 +75,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     unit: string;
     percentage: number;
-}>;
+}, {}>;
 export default _default;

package/es/progress/src/Line.js

@@ -102,9 +102,7 @@ export default defineComponent({
                                     borderRadius: styleFillBorderRadiusRef.value
                                 } }, indicatorPlacement === 'inside' ? (h("div", { class: `${clsPrefix}-progress-graph-line-indicator`, style: {
                                     color: indicatorTextColor
-                                } },
-                                percentage,
-                                unit)) : null)))),
+                                } }, slots.default ? slots.default() : `${percentage}${unit}`)) : null)))),
                 showIndicator && indicatorPlacement === 'outside' ? (h("div", null, slots.default ? (h("div", { class: `${clsPrefix}-progress-custom-content`, style: {
                         color: indicatorTextColor
                     }, role: "none" }, slots.default())) : status === 'default' ? (h("div", { role: "none", class: `${clsPrefix}-progress-icon ${clsPrefix}-progress-icon--as-text`, style: {

package/es/progress/src/MultipleCircle.d.ts

@@ -78,5 +78,5 @@ declare const _default: import("vue").DefineComponent<{
     fillColor: string[];
     percentage: number[];
     railStyle: (string | CSSProperties)[];
-}>;
+}, {}>;
 export default _default;

package/es/progress/src/Progress.d.ts

@@ -240,7 +240,7 @@ declare const _default: import("vue").DefineComponent<{
         lineBgProcessing: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
     gapDeg: import("vue").ComputedRef<number | undefined>;
     cssVars: import("vue").ComputedRef<{
@@ -381,8 +381,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly type: "circle" | "line" | "multiple-circle" | "dashboard";
-    readonly strokeWidth: number;
     readonly status: Status;
+    readonly strokeWidth: number;
     readonly processing: boolean;
     readonly unit: string;
     readonly indicatorPlacement: "inside" | "outside";
@@ -390,5 +390,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly viewBoxWidth: number;
     readonly circleGap: number;
     readonly indicatorPosition: "inside" | "outside";
-}>;
+}, {}>;
 export default _default;

package/es/qr-code/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NQrCode, qrCodeProps } from './src/QrCode';
+export type { QrCodeProps } from './src/QrCode';

package/es/qr-code/index.js

@@ -0,0 +1 @@
+export { default as NQrCode, qrCodeProps } from './src/QrCode';

package/es/qr-code/src/QrCode.d.ts

@@ -0,0 +1,154 @@
+import { type PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export declare const qrCodeProps: {
+    readonly value: StringConstructor;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000";
+    };
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconSrc: StringConstructor;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 40;
+    };
+    readonly iconBackgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconBorderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly padding: {
+        readonly type: PropType<string | number>;
+        readonly default: 12;
+    };
+    readonly errorCorrectionLevel: {
+        readonly type: StringConstructor;
+        readonly default: "M";
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+};
+export type QrCodeProps = ExtractPublicPropTypes<typeof qrCodeProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly value: StringConstructor;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000";
+    };
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconSrc: StringConstructor;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 40;
+    };
+    readonly iconBackgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconBorderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly padding: {
+        readonly type: PropType<string | number>;
+        readonly default: 12;
+    };
+    readonly errorCorrectionLevel: {
+        readonly type: StringConstructor;
+        readonly default: "M";
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+}, {
+    canvasRef: import("vue").Ref<HTMLCanvasElement | undefined>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--n-border-radius': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly value: StringConstructor;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "#000";
+    };
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconSrc: StringConstructor;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 40;
+    };
+    readonly iconBackgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#FFF";
+    };
+    readonly iconBorderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    readonly padding: {
+        readonly type: PropType<string | number>;
+        readonly default: 12;
+    };
+    readonly errorCorrectionLevel: {
+        readonly type: StringConstructor;
+        readonly default: "M";
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"QrCode", {
+        borderRadius: string;
+    }, any>>>;
+}>>, {
+    readonly color: string;
+    readonly size: number;
+    readonly backgroundColor: string;
+    readonly padding: string | number;
+    readonly iconSize: number;
+    readonly iconBackgroundColor: string;
+    readonly iconBorderRadius: number;
+    readonly errorCorrectionLevel: string;
+}, {}>;
+export default _default;

package/es/qr-code/src/QrCode.js

@@ -0,0 +1,146 @@
+import { h, ref, defineComponent, watchEffect, computed, onMounted } from 'vue';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import style from './styles/index.cssr';
+import { qrcodeLight } from '../styles';
+import qrcodegen from './qrcodegen';
+const ERROR_CORRECTION_LEVEL = {
+    L: qrcodegen.QrCode.Ecc.LOW,
+    M: qrcodegen.QrCode.Ecc.MEDIUM,
+    Q: qrcodegen.QrCode.Ecc.QUARTILE,
+    H: qrcodegen.QrCode.Ecc.HIGH
+};
+export const qrCodeProps = Object.assign(Object.assign({}, useTheme.props), { value: String, color: {
+        type: String,
+        default: '#000'
+    }, backgroundColor: {
+        type: String,
+        default: '#FFF'
+    }, iconSrc: String, iconSize: {
+        type: Number,
+        default: 40
+    }, iconBackgroundColor: {
+        type: String,
+        default: '#FFF'
+    }, iconBorderRadius: {
+        type: Number,
+        default: 4
+    }, size: {
+        type: Number,
+        default: 100
+    }, padding: {
+        type: [Number, String],
+        default: 12
+    }, errorCorrectionLevel: {
+        type: String,
+        default: 'M'
+    } });
+// For retina display
+const UPSCALE_RATIO = 2;
+export default defineComponent({
+    name: 'QrCode',
+    props: qrCodeProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('QrCode', '-qr-code', style, qrcodeLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            return {
+                '--n-border-radius': themeRef.value.self.borderRadius
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('qr-code', undefined, cssVarsRef, props)
+            : undefined;
+        const canvasRef = ref();
+        const qr = computed(() => {
+            var _a;
+            const errorCorrectionLevel = ERROR_CORRECTION_LEVEL[props.errorCorrectionLevel];
+            return qrcodegen.QrCode.encodeText((_a = props.value) !== null && _a !== void 0 ? _a : '-', errorCorrectionLevel);
+        });
+        onMounted(() => {
+            const imageLoadedTrigger = ref(0);
+            let loadedIcon = null;
+            watchEffect(() => {
+                void imageLoadedTrigger.value;
+                drawCanvas(qr.value, props.size, props.color, props.backgroundColor, loadedIcon
+                    ? {
+                        icon: loadedIcon,
+                        iconBorderRadius: props.iconBorderRadius,
+                        iconSize: props.iconSize,
+                        iconBackgroundColor: props.iconBackgroundColor
+                    }
+                    : null);
+            });
+            watchEffect(() => {
+                const { iconSrc } = props;
+                if (iconSrc) {
+                    let aborted = false;
+                    const img = new Image();
+                    img.src = iconSrc;
+                    img.onload = () => {
+                        if (aborted)
+                            return;
+                        loadedIcon = img;
+                        imageLoadedTrigger.value++;
+                    };
+                    return () => {
+                        aborted = true;
+                    };
+                }
+            });
+        });
+        function drawCanvas(qr, size, foregroundColor, backgroundColor, iconConfig) {
+            const canvas = canvasRef.value;
+            if (!canvas)
+                return;
+            const canvasWidth = size * UPSCALE_RATIO;
+            const width = qr.size;
+            const scale = canvasWidth / width;
+            canvas.width = canvasWidth;
+            canvas.height = canvasWidth;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let y = 0; y < qr.size; y++) {
+                for (let x = 0; x < qr.size; x++) {
+                    ctx.fillStyle = qr.getModule(x, y) ? foregroundColor : backgroundColor;
+                    const startX = Math.floor(x * scale);
+                    const endX = Math.ceil((x + 1) * scale);
+                    const startY = Math.floor(y * scale);
+                    const endY = Math.ceil((y + 1) * scale);
+                    ctx.fillRect(startX, startY, endX - startX, endY - startY);
+                }
+            }
+            if (iconConfig) {
+                const { icon, iconBackgroundColor, iconBorderRadius, iconSize } = iconConfig;
+                const finalIconSize = iconSize * UPSCALE_RATIO;
+                const centerX = (canvas.width - finalIconSize) / 2;
+                const centerY = (canvas.height - finalIconSize) / 2;
+                ctx.fillStyle = iconBackgroundColor;
+                ctx.beginPath();
+                ctx.roundRect(centerX, centerY, finalIconSize, finalIconSize, iconBorderRadius * UPSCALE_RATIO);
+                ctx.fill();
+                const aspectRatio = icon.width / icon.height;
+                const scaledWidth = aspectRatio >= 1 ? finalIconSize : finalIconSize * aspectRatio;
+                const scaledHeight = aspectRatio <= 1 ? finalIconSize : finalIconSize / aspectRatio;
+                const left = centerX + (finalIconSize - scaledWidth) / 2;
+                const top = centerY + (finalIconSize - scaledHeight) / 2;
+                ctx.drawImage(icon, left, top, scaledWidth, scaledHeight);
+            }
+        }
+        return {
+            canvasRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass
+        };
+    },
+    render() {
+        const { mergedClsPrefix, backgroundColor, padding, cssVars, themeClass, size } = this;
+        return (h("div", { class: [`${mergedClsPrefix}-qr-code`, themeClass], style: Object.assign({ padding: typeof padding === 'number' ? `${padding}px` : padding, backgroundColor }, cssVars) },
+            h("canvas", { ref: "canvasRef", style: {
+                    width: `${size}px`,
+                    height: `${size}px`
+                } })));
+    }
+});