@uzum-tech/ui 1.11.2 → 1.12.0

package/lib/locales/common/zhTW.js

@@ -133,7 +133,17 @@ const zhTW = {
         closeButtonText: 'Close chat',
         shareButtonTooltip: 'Share chat',
         profileButtonTooltip: 'View profile',
-        unreadNotificationText: 'new messages'
+        unreadNotificationText: 'new messages',
+        editText: 'Edit',
+        copyText: 'Copy',
+        deleteText: 'Delete',
+        editingTitle: 'Editing'
+    },
+    Header: {
+        desktopSearchTitle: 'Search',
+        searchPlaceholder: 'Search the site',
+        primaryActionText: 'Become a client',
+        secondaryActionText: 'Go to the application'
     }
 };
 exports.default = zhTW;

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

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

package/lib/qr-code/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.qrCodeProps = exports.UQrCode = void 0;
+var QrCode_1 = require("./src/QrCode");
+Object.defineProperty(exports, "UQrCode", { enumerable: true, get: function () { return __importDefault(QrCode_1).default; } });
+Object.defineProperty(exports, "qrCodeProps", { enumerable: true, get: function () { return QrCode_1.qrCodeProps; } });

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

@@ -0,0 +1,171 @@
+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: PropType<"L" | "M" | "Q" | "H">;
+        readonly default: "M";
+    };
+    readonly type: {
+        readonly type: PropType<"svg" | "canvas">;
+        readonly default: "canvas";
+    };
+    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: PropType<"L" | "M" | "Q" | "H">;
+        readonly default: "M";
+    };
+    readonly type: {
+        readonly type: PropType<"svg" | "canvas">;
+        readonly default: "canvas";
+    };
+    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<{
+        '--u-border-radius': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    svgInfo: import("vue").ComputedRef<{
+        innerHtml: string;
+        numCells: number;
+    }>;
+}, 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: PropType<"L" | "M" | "Q" | "H">;
+        readonly default: "M";
+    };
+    readonly type: {
+        readonly type: PropType<"svg" | "canvas">;
+        readonly default: "canvas";
+    };
+    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 type: "svg" | "canvas";
+    readonly size: number;
+    readonly iconSize: number;
+    readonly color: string;
+    readonly padding: string | number;
+    readonly backgroundColor: string;
+    readonly iconBackgroundColor: string;
+    readonly iconBorderRadius: number;
+    readonly errorCorrectionLevel: "Q" | "H" | "L" | "M";
+}, {}>;
+export default _default;

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

@@ -0,0 +1,235 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.qrCodeProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const qrcodegen_1 = __importDefault(require("./qrcodegen"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const ERROR_CORRECTION_LEVEL = {
+    L: qrcodegen_1.default.QrCode.Ecc.LOW,
+    M: qrcodegen_1.default.QrCode.Ecc.MEDIUM,
+    Q: qrcodegen_1.default.QrCode.Ecc.QUARTILE,
+    H: qrcodegen_1.default.QrCode.Ecc.HIGH
+};
+exports.qrCodeProps = Object.assign(Object.assign({}, _mixins_1.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'
+    }, type: {
+        type: String,
+        default: 'canvas'
+    } });
+// For retina display
+const UPSCALE_RATIO = 2;
+exports.default = (0, vue_1.defineComponent)({
+    name: 'QrCode',
+    props: exports.qrCodeProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('QrCode', '-qr-code', index_cssr_1.default, styles_1.qrcodeLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            return {
+                '--u-border-radius': themeRef.value.self.borderRadius
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('qr-code', undefined, cssVarsRef, props)
+            : undefined;
+        const canvasRef = (0, vue_1.ref)();
+        const qr = (0, vue_1.computed)(() => {
+            var _a;
+            const errorCorrectionLevel = ERROR_CORRECTION_LEVEL[props.errorCorrectionLevel];
+            return qrcodegen_1.default.QrCode.encodeText((_a = props.value) !== null && _a !== void 0 ? _a : '-', errorCorrectionLevel);
+        });
+        (0, vue_1.onMounted)(() => {
+            const imageLoadedTrigger = (0, vue_1.ref)(0);
+            let loadedIcon = null;
+            (0, vue_1.watchEffect)(() => {
+                if (props.type === 'svg') {
+                    return;
+                }
+                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);
+            });
+            (0, vue_1.watchEffect)(() => {
+                if (props.type === 'svg') {
+                    return;
+                }
+                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);
+            }
+        }
+        function generatePath(modules, margin = 0) {
+            const ops = [];
+            modules.forEach((row, y) => {
+                let start = null;
+                row.forEach((cell, x) => {
+                    if (!cell && start !== null) {
+                        // M0 0h7v1H0z injects the space with the move and drops the comma,
+                        // saving a char per operation
+                        ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`);
+                        start = null;
+                        return;
+                    }
+                    // end of row, clean up or skip
+                    if (x === row.length - 1) {
+                        if (!cell) {
+                            // We would have closed the op above already so this can only mean
+                            // 2+ light modules in a row.
+                            return;
+                        }
+                        if (start === null) {
+                            // Just a single dark module.
+                            ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+                        }
+                        else {
+                            // Otherwise finish the current line.
+                            ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`);
+                        }
+                        return;
+                    }
+                    if (cell && start === null) {
+                        start = x;
+                    }
+                });
+            });
+            return ops.join('');
+        }
+        function svgInfo(qr, size, iconConfig) {
+            const cells = qr.getModules();
+            const numCells = cells.length;
+            const cellsToDraw = cells;
+            let svgInnerHtml = '';
+            const path1Html = `<path fill="transparent" d="M0,0 h${numCells}v${numCells}H0z" shape-rendering="crispEdges"></path>`;
+            const path2Html = `<path fill="${props.color}" d="${generatePath(cellsToDraw, 0)}" shape-rendering="crispEdges"></path>`;
+            let iconHtml = '';
+            if (iconConfig) {
+                const { iconSrc, iconSize } = iconConfig;
+                const DEFAULT_IMG_SCALE = 0.1;
+                const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+                const scale = numCells / size;
+                const h = (iconSize || defaultSize) * scale;
+                const w = (iconSize || defaultSize) * scale;
+                const x = cells.length / 2 - w / 2;
+                const y = cells.length / 2 - h / 2;
+                iconHtml += `<image href="${iconSrc}" width="${w}" height="${h}" x="${x}" y="${y}" preserveAspectRatio="none"></image>`;
+            }
+            svgInnerHtml += path1Html;
+            svgInnerHtml += path2Html;
+            svgInnerHtml += iconHtml;
+            return {
+                innerHtml: svgInnerHtml,
+                numCells
+            };
+        }
+        const svgInfoRef = (0, vue_1.computed)(() => svgInfo(qr.value, props.size, props.iconSrc
+            ? {
+                iconSrc: props.iconSrc,
+                iconBorderRadius: props.iconBorderRadius,
+                iconSize: props.iconSize,
+                iconBackgroundColor: props.iconBackgroundColor
+            }
+            : null));
+        return {
+            canvasRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            svgInfo: svgInfoRef
+        };
+    },
+    render() {
+        const { mergedClsPrefix, backgroundColor, padding, cssVars, themeClass, size, type } = this;
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-qr-code`, themeClass], style: Object.assign({ padding: typeof padding === 'number' ? `${padding}px` : padding, backgroundColor, width: `${size}px`, height: `${size}px` }, cssVars) }, type === 'canvas' ? ((0, vue_1.h)("canvas", { ref: "canvasRef", style: {
+                width: `${size}px`,
+                height: `${size}px`
+            } })) : ((0, vue_1.h)("svg", { height: size, width: size, viewBox: `0 0 ${this.svgInfo.numCells} ${this.svgInfo.numCells}`, role: "img", innerHTML: this.svgInfo.innerHtml }))));
+    }
+});

package/lib/qr-code/src/qrcodegen.d.ts

@@ -0,0 +1,95 @@
+declare namespace qrcodegen {
+    type bit = number;
+    type byte = number;
+    type int = number;
+    export class QrCode {
+        readonly version: int;
+        readonly errorCorrectionLevel: QrCode.Ecc;
+        static encodeText(text: string, ecl: QrCode.Ecc): QrCode;
+        static encodeBinary(data: Readonly<byte[]>, ecl: QrCode.Ecc): QrCode;
+        static encodeSegments(segs: Readonly<QrSegment[]>, ecl: QrCode.Ecc, minVersion?: int, maxVersion?: int, mask?: int, boostEcl?: boolean): QrCode;
+        readonly size: int;
+        readonly mask: int;
+        private readonly modules;
+        private readonly isFunction;
+        constructor(version: int, errorCorrectionLevel: QrCode.Ecc, dataCodewords: Readonly<byte[]>, msk: int);
+        getModule(x: int, y: int): boolean;
+        getModules(): boolean[][];
+        private drawFunctionPatterns;
+        private drawFormatBits;
+        private drawVersion;
+        private drawFinderPattern;
+        private drawAlignmentPattern;
+        private setFunctionModule;
+        private addEccAndInterleave;
+        private drawCodewords;
+        private applyMask;
+        private getPenaltyScore;
+        private getAlignmentPatternPositions;
+        private static getNumRawDataModules;
+        private static getNumDataCodewords;
+        private static reedSolomonComputeDivisor;
+        private static reedSolomonComputeRemainder;
+        private static reedSolomonMultiply;
+        private finderPenaltyCountPatterns;
+        private finderPenaltyTerminateAndCount;
+        private finderPenaltyAddHistory;
+        static readonly MIN_VERSION: int;
+        static readonly MAX_VERSION: int;
+        private static readonly PENALTY_N1;
+        private static readonly PENALTY_N2;
+        private static readonly PENALTY_N3;
+        private static readonly PENALTY_N4;
+        private static readonly ECC_CODEWORDS_PER_BLOCK;
+        private static readonly NUM_ERROR_CORRECTION_BLOCKS;
+    }
+    export class QrSegment {
+        readonly mode: QrSegment.Mode;
+        readonly numChars: int;
+        private readonly bitData;
+        static makeBytes(data: Readonly<byte[]>): QrSegment;
+        static makeNumeric(digits: string): QrSegment;
+        static makeAlphanumeric(text: string): QrSegment;
+        static makeSegments(text: string): QrSegment[];
+        static makeEci(assignVal: int): QrSegment;
+        static isNumeric(text: string): boolean;
+        static isAlphanumeric(text: string): boolean;
+        constructor(mode: QrSegment.Mode, numChars: int, bitData: bit[]);
+        getData(): bit[];
+        static getTotalBits(segs: Readonly<QrSegment[]>, version: int): number;
+        private static toUtf8ByteArray;
+        private static readonly NUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_CHARSET;
+    }
+    export {};
+}
+declare namespace qrcodegen.QrCode {
+    type int = number;
+    export class Ecc {
+        readonly ordinal: int;
+        readonly formatBits: int;
+        static readonly LOW: Ecc;
+        static readonly MEDIUM: Ecc;
+        static readonly QUARTILE: Ecc;
+        static readonly HIGH: Ecc;
+        private constructor();
+    }
+    export {};
+}
+declare namespace qrcodegen.QrSegment {
+    type int = number;
+    export class Mode {
+        readonly modeBits: int;
+        private readonly numBitsCharCount;
+        static readonly NUMERIC: Mode;
+        static readonly ALPHANUMERIC: Mode;
+        static readonly BYTE: Mode;
+        static readonly KANJI: Mode;
+        static readonly ECI: Mode;
+        private constructor();
+        numCharCountBits(ver: int): int;
+    }
+    export {};
+}
+export default qrcodegen;