@uzum-tech/ui 1.3.0 → 1.4.0

package/lib/upload/src/useUpload.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpload = useUpload;
+const utils_1 = require("./utils");
+function useUpload() {
+    function createXhrHandlers(inst, file, xhr) {
+        const { doChange, xhrMap } = inst;
+        let percentage = 0;
+        function handleXHRError(e) {
+            var _a;
+            let fileAfterChange = Object.assign({}, file, {
+                status: 'error',
+                percentage
+            });
+            xhrMap.delete(file.id);
+            fileAfterChange = (0, utils_1.createSettledFileInfo)(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange);
+            doChange(fileAfterChange, e);
+        }
+        function handleXHRLoad(e) {
+            var _a;
+            if (inst.isErrorState) {
+                if (inst.isErrorState(xhr)) {
+                    handleXHRError(e);
+                    return;
+                }
+            }
+            else {
+                if (xhr.status < 200 || xhr.status >= 300) {
+                    handleXHRError(e);
+                    return;
+                }
+            }
+            let fileAfterChange = Object.assign({}, file, {
+                status: 'finished',
+                percentage
+            });
+            xhrMap.delete(file.id);
+            fileAfterChange = (0, utils_1.createSettledFileInfo)(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange);
+            doChange(fileAfterChange, e);
+        }
+        return {
+            handleXHRLoad,
+            handleXHRError,
+            handleXHRAbort(e) {
+                const fileAfterChange = Object.assign({}, file, {
+                    status: 'removed',
+                    file: null,
+                    percentage
+                });
+                xhrMap.delete(file.id);
+                doChange(fileAfterChange, e);
+            },
+            handleXHRProgress(e) {
+                const fileAfterChange = Object.assign({}, file, {
+                    status: 'uploading'
+                });
+                if (e.lengthComputable) {
+                    const progress = Math.ceil((e.loaded / e.total) * 100);
+                    fileAfterChange.percentage = progress;
+                    percentage = progress;
+                }
+                doChange(fileAfterChange, e);
+            }
+        };
+    }
+    function customSubmitImpl(options) {
+        const { inst, file, data, headers, withCredentials, action, customRequest } = options;
+        const { doChange } = options.inst;
+        let percentage = 0;
+        customRequest({
+            file,
+            data,
+            headers,
+            withCredentials,
+            action,
+            onProgress(event) {
+                const fileAfterChange = Object.assign({}, file, {
+                    status: 'uploading'
+                });
+                const progress = event.percent;
+                fileAfterChange.percentage = progress;
+                percentage = progress;
+                doChange(fileAfterChange);
+            },
+            onFinish() {
+                var _a;
+                let fileAfterChange = Object.assign({}, file, {
+                    status: 'finished',
+                    percentage
+                });
+                fileAfterChange = (0, utils_1.createSettledFileInfo)(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange);
+                doChange(fileAfterChange);
+            },
+            onError() {
+                var _a;
+                let fileAfterChange = Object.assign({}, file, {
+                    status: 'error',
+                    percentage
+                });
+                fileAfterChange = (0, utils_1.createSettledFileInfo)(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange);
+                doChange(fileAfterChange);
+            }
+        });
+    }
+    function registerHandler(inst, file, request) {
+        const handlers = createXhrHandlers(inst, file, request);
+        request.onabort = handlers.handleXHRAbort;
+        request.onerror = handlers.handleXHRError;
+        request.onload = handlers.handleXHRLoad;
+        if (request.upload) {
+            request.upload.onprogress = handlers.handleXHRProgress;
+        }
+    }
+    function unwrapFunctionValue(data, file) {
+        if (typeof data === 'function') {
+            return data({ file });
+        }
+        if (data)
+            return data;
+        return {};
+    }
+    function setHeaders(request, headers, file) {
+        const headersObject = unwrapFunctionValue(headers, file);
+        if (!headersObject)
+            return;
+        Object.keys(headersObject).forEach((key) => {
+            request.setRequestHeader(key, headersObject[key]);
+        });
+    }
+    function appendData(formData, data, file) {
+        const dataObject = unwrapFunctionValue(data, file);
+        if (!dataObject)
+            return;
+        Object.keys(dataObject).forEach((key) => {
+            formData.append(key, dataObject[key]);
+        });
+    }
+    function submitImpl(inst, fieldName, file, { method, action, withCredentials, responseType, headers, data }) {
+        const request = new XMLHttpRequest();
+        request.responseType = responseType;
+        inst.xhrMap.set(file.id, request);
+        request.withCredentials = withCredentials;
+        const formData = new FormData();
+        appendData(formData, data, file);
+        formData.append(fieldName, file.file);
+        registerHandler(inst, file, request);
+        if (action !== undefined) {
+            request.open(method.toUpperCase(), action);
+            setHeaders(request, headers, file);
+            request.send(formData);
+            const fileAfterChange = Object.assign({}, file, {
+                status: 'uploading'
+            });
+            inst.doChange(fileAfterChange);
+        }
+    }
+    return {
+        createXhrHandlers,
+        customSubmitImpl,
+        registerHandler,
+        unwrapFunctionValue,
+        setHeaders,
+        appendData,
+        submitImpl
+    };
+}

package/lib/upload/src/useUploadActionsRender.d.ts

@@ -0,0 +1,26 @@
+import { VNode } from 'vue';
+import { FileInfo, ListType } from './interface';
+interface Options {
+    clsPrefix: string;
+    listType: ListType;
+    file: Required<FileInfo>;
+    showPreviewButton: string | boolean | null;
+    showRemoveButton: boolean;
+    showCancelButton: boolean;
+    showRetryButton: boolean;
+    showDownloadButton: boolean;
+    disabled: boolean;
+    buttonType: string | undefined;
+    mergedTheme: any;
+    buttonThemeOverrides: any;
+    handlePreviewClick: () => void;
+    handleRemoveOrCancelClick: (e: MouseEvent) => void;
+    handleRetryClick: () => void;
+    handleDownloadClick: (e: MouseEvent) => void;
+    capitalizeFirstLetter: (text: string) => string;
+}
+export declare function useUploadActionsRender(opts: Options): {
+    actionsNode: VNode;
+    icon: VNode;
+};
+export {};

package/lib/upload/src/useUploadActionsRender.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadActionsRender = useUploadActionsRender;
+const vue_1 = require("vue");
+const button_1 = require("../../button");
+const _internal_1 = require("../../_internal");
+const icons_1 = require("../../_internal/icons");
+function useUploadActionsRender(opts) {
+    const { clsPrefix, listType, file, showPreviewButton, showRemoveButton, showCancelButton, showRetryButton, showDownloadButton, disabled, buttonType, mergedTheme, buttonThemeOverrides, handlePreviewClick, handleRemoveOrCancelClick, handleRetryClick, handleDownloadClick, capitalizeFirstLetter } = opts;
+    const isImageType = ['image', 'image-card'].includes(listType);
+    const fileExt = file.name.split('.')[1] || '';
+    const capitalizedExt = capitalizeFirstLetter(fileExt);
+    const icon = (0, vue_1.h)('div', {
+        class: [
+            `${clsPrefix}-upload-file-info__thumbnail`,
+            `${clsPrefix}-upload-file-info__thumbnail--icon`
+        ]
+    }, [
+        (0, vue_1.h)('span', { class: `${clsPrefix}-upload-file-info__preview` }, [
+            (0, vue_1.h)('div', { class: `${clsPrefix}-upload-file-info__preview--ext` }, capitalizedExt),
+            (0, vue_1.h)('div', {
+                class: `${clsPrefix}-upload-file-info__preview--content`
+            })
+        ])
+    ]);
+    const actionsNode = (0, vue_1.h)('div', {
+        class: [
+            `${clsPrefix}-upload-file-info__action`,
+            `${clsPrefix}-upload-file--${isImageType ? 'image-card' : 'text'}-type`
+        ]
+    }, [
+        showPreviewButton &&
+            (0, vue_1.h)(button_1.UButton, {
+                key: 'preview',
+                quaternary: true,
+                type: buttonType,
+                onClick: handlePreviewClick,
+                theme: mergedTheme.peers.Button,
+                themeOverrides: mergedTheme.peerOverrides.Button,
+                builtinThemeOverrides: buttonThemeOverrides
+            }, {
+                icon: () => (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix }, { default: () => (0, vue_1.h)(icons_1.EyeIcon) })
+            }),
+        (showRemoveButton || showCancelButton) &&
+            !disabled &&
+            (0, vue_1.h)(button_1.UButton, {
+                key: 'cancelOrTrash',
+                quaternary: true,
+                type: buttonType,
+                onClick: handleRemoveOrCancelClick,
+                theme: mergedTheme.peers.Button,
+                themeOverrides: mergedTheme.peerOverrides.Button,
+                builtinThemeOverrides: buttonThemeOverrides
+            }, {
+                icon: () => (0, vue_1.h)(_internal_1.UIconSwitchTransition, {}, {
+                    default: () => showRemoveButton
+                        ? (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix, key: 'trash' }, { default: () => (0, vue_1.h)(icons_1.TrashIcon) })
+                        : (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix, key: 'cancel' }, { default: () => (0, vue_1.h)(icons_1.CancelIcon) })
+                })
+            }),
+        showRetryButton &&
+            !disabled &&
+            (0, vue_1.h)(button_1.UButton, {
+                key: 'retry',
+                quaternary: true,
+                type: buttonType,
+                onClick: handleRetryClick,
+                theme: mergedTheme.peers.Button,
+                themeOverrides: mergedTheme.peerOverrides.Button,
+                builtinThemeOverrides: buttonThemeOverrides
+            }, {
+                icon: () => (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix }, { default: () => (0, vue_1.h)(icons_1.RetryIcon) })
+            }),
+        showDownloadButton &&
+            (0, vue_1.h)(button_1.UButton, {
+                key: 'download',
+                quaternary: true,
+                type: buttonType,
+                onClick: handleDownloadClick,
+                theme: mergedTheme.peers.Button,
+                themeOverrides: mergedTheme.peerOverrides.Button,
+                builtinThemeOverrides: buttonThemeOverrides
+            }, {
+                icon: () => (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix }, { default: () => (0, vue_1.h)(icons_1.DownloadIcon) })
+            })
+    ].filter(Boolean));
+    return { icon, actionsNode };
+}

package/lib/upload/src/useUploadInternals.d.ts

@@ -0,0 +1,25 @@
+import { VNode, Slots } from 'vue';
+interface UseUploadInternalsOptions {
+    mergedClsPrefix: string;
+    accept?: string;
+    multiple?: boolean;
+    inputProps?: Record<string, any>;
+    directory?: boolean;
+    onChange?: (e: Event) => void;
+    label?: string;
+    title?: string;
+    subtitle?: string;
+    vertical?: boolean;
+    noIcon?: boolean;
+    icon?: any;
+    localeRef: {
+        title: string;
+        subtitle: string;
+    };
+    slots: Slots;
+}
+export declare function useUploadInternals(options: UseUploadInternalsOptions): {
+    inputNode: VNode;
+    renderDefaultTrigger: () => VNode[];
+};
+export {};

package/lib/upload/src/useUploadInternals.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUploadInternals = useUploadInternals;
+const vue_1 = require("vue");
+const icons_1 = require("./icons");
+const _internal_1 = require("../../_internal");
+const UploadDragger_1 = __importDefault(require("./UploadDragger"));
+function useUploadInternals(options) {
+    const { mergedClsPrefix, accept, multiple, inputProps = {}, directory, onChange, label, title, subtitle, vertical, noIcon, icon, localeRef, slots } = options;
+    const inputNode = (0, vue_1.h)('input', Object.assign(Object.assign({}, inputProps), { ref: 'inputElRef', type: 'file', class: `${mergedClsPrefix}-upload-file-input`, accept,
+        multiple, directory: directory || undefined, webkitdirectory: directory || undefined, onChange }));
+    const renderDefaultTrigger = () => {
+        const rootClass = `${mergedClsPrefix}-upload-dragger-inner`;
+        return [
+            (0, vue_1.h)(vue_1.Fragment, null,
+                label ? ((0, vue_1.h)("p", { class: `${mergedClsPrefix}-upload__label` }, label)) : null,
+                (0, vue_1.h)(UploadDragger_1.default, null, {
+                    default: () => {
+                        var _a, _b;
+                        return (0, vue_1.h)('div', {
+                            class: [rootClass, vertical && `${rootClass}--vertical`]
+                        }, [
+                            !noIcon &&
+                                (0, vue_1.h)('div', { class: `${rootClass}__icon` }, (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                    default: () => icon || icons_1.uploadIcon
+                                })),
+                            (0, vue_1.h)('div', { class: `${rootClass}__content` }, [
+                                (0, vue_1.h)('p', { class: `${rootClass}__title` }, title || ((_a = slots.title) === null || _a === void 0 ? void 0 : _a.call(slots)) || localeRef.title),
+                                (0, vue_1.h)('p', { class: `${rootClass}__subtitle` }, subtitle || ((_b = slots.subtitle) === null || _b === void 0 ? void 0 : _b.call(slots)) || localeRef.subtitle)
+                            ])
+                        ]);
+                    }
+                }))
+        ];
+    };
+    return {
+        inputNode,
+        renderDefaultTrigger
+    };
+}

package/lib/upload/src/utils.d.ts

@@ -1,9 +1,10 @@
 import type { FileAndEntry, FileInfo, SettledFileInfo, ShouldUseThumbnailUrl } from './interface';
 export declare const isImageFileType: (type: string) => boolean;
+export declare const capitalizeFirstLetter: (str: string) => string;
 export declare const isImageFile: ShouldUseThumbnailUrl;
 export declare function createImageDataUrl(file: File): Promise<string>;
 export declare const environmentSupportFile: false | {
-    new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
+    new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
     prototype: File;
 };
 export declare function isFileSystemDirectoryEntry(item: FileSystemEntry | FileSystemFileEntry | FileSystemDirectoryEntry): item is FileSystemDirectoryEntry;

package/lib/upload/src/utils.js

@@ -9,7 +9,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.download = exports.matchType = exports.createSettledFileInfo = exports.getFilesFromEntries = exports.isFileSystemFileEntry = exports.isFileSystemDirectoryEntry = exports.environmentSupportFile = exports.createImageDataUrl = exports.isImageFile = exports.isImageFileType = void 0;
+exports.download = exports.environmentSupportFile = exports.isImageFile = exports.capitalizeFirstLetter = exports.isImageFileType = void 0;
+exports.createImageDataUrl = createImageDataUrl;
+exports.isFileSystemDirectoryEntry = isFileSystemDirectoryEntry;
+exports.isFileSystemFileEntry = isFileSystemFileEntry;
+exports.getFilesFromEntries = getFilesFromEntries;
+exports.createSettledFileInfo = createSettledFileInfo;
+exports.matchType = matchType;
 const _utils_1 = require("../../_utils");
 const isImageFileType = (type) => type.includes('image/');
 exports.isImageFileType = isImageFileType;
@@ -20,6 +26,12 @@ const getExtname = (url = '') => {
     return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
 };
 const imageExtensionRegex = /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i;
+const capitalizeFirstLetter = (str) => {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+exports.capitalizeFirstLetter = capitalizeFirstLetter;
 // Do not need File object
 const isImageFile = (file) => {
     if (file.type) {
@@ -48,16 +60,13 @@ function createImageDataUrl(file) {
         });
     });
 }
-exports.createImageDataUrl = createImageDataUrl;
 exports.environmentSupportFile = _utils_1.isBrowser && window.FileReader && window.File;
 function isFileSystemDirectoryEntry(item) {
     return item.isDirectory;
 }
-exports.isFileSystemDirectoryEntry = isFileSystemDirectoryEntry;
 function isFileSystemFileEntry(item) {
     return item.isFile;
 }
-exports.isFileSystemFileEntry = isFileSystemFileEntry;
 function getFilesFromEntries(entries, directory) {
     return __awaiter(this, void 0, void 0, function* () {
         const fileAndEntries = [];
@@ -106,7 +115,6 @@ function getFilesFromEntries(entries, directory) {
         return fileAndEntries;
     });
 }
-exports.getFilesFromEntries = getFilesFromEntries;
 function createSettledFileInfo(fileInfo) {
     const { id, name, percentage, status, url, file, thumbnailUrl, type, fullPath, batchId } = fileInfo;
     return {
@@ -122,7 +130,6 @@ function createSettledFileInfo(fileInfo) {
         batchId: batchId !== null && batchId !== void 0 ? batchId : null
     };
 }
-exports.createSettledFileInfo = createSettledFileInfo;
 /**
  * This is a rather simple version. I may fix it later to make it more accurate.
  * I've looked at https://github.com/broofa/mime, however it doesn't has a esm
@@ -160,7 +167,6 @@ function matchType(name, mimeType, accept) {
         return false;
     });
 }
-exports.matchType = matchType;
 const download = (url, name) => {
     if (!url)
         return;

package/lib/upload/styles/light.d.ts

@@ -21,6 +21,12 @@ export declare const self: (vars: ThemeCommonVars) => {
     draggerTitleColor: string;
     draggerTextColor: string;
     labelColor: string;
+    widthSmall: string;
+    widthMedium: string;
+    widthLarge: string;
+    containerSecondary: string;
+    brandPrimary300: string;
+    elementsQuaternary: string;
 };
 export type UploadThemeVars = ReturnType<typeof self>;
 declare const uploadLight: import("../../_mixins").Theme<"Upload", {
@@ -45,6 +51,12 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
     draggerTitleColor: string;
     draggerTextColor: string;
     labelColor: string;
+    widthSmall: string;
+    widthMedium: string;
+    widthLarge: string;
+    containerSecondary: string;
+    brandPrimary300: string;
+    elementsQuaternary: string;
 }, {
     Button: import("../../_mixins").Theme<"Button", {
         heightTiny: string;

package/lib/upload/styles/light.js

@@ -7,7 +7,7 @@ const styles_2 = require("../../progress/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { staticGreen, staticRed, elementsQuaternary, elementsTertiary, elementsPrimary, textPrimary, opacityDisabled, containerPrimary, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, elementsQuinary } = vars;
+    const { staticGreen, staticRed, elementsQuaternary, elementsTertiary, elementsPrimary, textPrimary, opacityDisabled, containerPrimary, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, elementsQuinary, containerSecondary, brandPrimary300 } = vars;
     return {
         baseColor: containerPrimary,
         fontSize: fontBodyMedium,
@@ -31,7 +31,13 @@ const self = (vars) => {
         draggerIconColor: elementsPrimary,
         draggerTitleColor: textPrimary,
         draggerTextColor: textPrimary,
-        labelColor: textPrimary
+        labelColor: textPrimary,
+        widthSmall: '140px',
+        widthMedium: 'auto',
+        widthLarge: 'auto',
+        containerSecondary,
+        brandPrimary300,
+        elementsQuaternary
     };
 };
 exports.self = self;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.3.0";
+declare const _default: "1.4.0";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.3.0';
+exports.default = '1.4.0';

package/lib/watermark/src/Watermark.d.ts

@@ -273,22 +273,22 @@ declare const _default: import("vue").DefineComponent<{
         fontFamily: string;
     }, unknown>>>;
 }>>, {
-    readonly fontSize: number;
-    readonly fontStretch: string;
-    readonly fontStyle: "normal" | "italic" | "oblique" | `oblique ${number}deg`;
-    readonly fontVariant: string;
     readonly fontWeight: number;
+    readonly width: number;
+    readonly fontSize: number;
     readonly height: number;
     readonly lineHeight: number;
     readonly rotate: number;
-    readonly width: number;
+    readonly fontStretch: string;
+    readonly fontStyle: "normal" | "italic" | "oblique" | `oblique ${number}deg`;
+    readonly fontVariant: string;
     readonly zIndex: number;
-    readonly cross: boolean;
     readonly xGap: number;
     readonly yGap: number;
     readonly selectable: boolean;
     readonly fullscreen: boolean;
     readonly debug: boolean;
+    readonly cross: boolean;
     readonly yOffset: number;
     readonly xOffset: number;
     readonly imageOpacity: number;