@uzum-tech/ui 1.9.1 → 1.10.1

package/lib/crop/src/Crop.d.ts

@@ -0,0 +1,222 @@
+import { PropType } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+import { ViewMode } from './interface';
+export declare const cropProps: {
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+};
+export type CropProps = ExtractPublicPropTypes<typeof cropProps>;
+declare const _default: import("vue").DefineComponent<{
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+}, {
+    cropWrapperRef: import("vue").Ref<HTMLDivElement | undefined>;
+    cropImageRef: import("vue").Ref<HTMLImageElement | undefined>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-wrapper-border-radius': string;
+        '--u-wrapper-bg-color': string;
+        '--u-wrapper-width': string;
+        '--u-wrapper-height': string;
+        '--u-cropper-theme-color': string;
+        '--u-wrapper-margin': string;
+    }>;
+    confirmCrop: () => void;
+    cancelCrop: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => true;
+    confirm: (dataUrl: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    src: StringConstructor;
+    wrapperWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    wrapperHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    viewMode: {
+        type: PropType<ViewMode>;
+        default: number;
+    };
+    dragMode: {
+        type: PropType<"crop" | "move" | "none">;
+        default: string;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circleShape: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zoomable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cropperThemeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmButtonText: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Crop", {
+        wrapperBg: string;
+        wrapperBorderRadius: string;
+        wrapperMargin: string;
+    }, {}>>>;
+}>> & {
+    onConfirm?: ((dataUrl: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}, {
+    aspectRatio: number;
+    background: boolean;
+    wrapperWidth: string | number;
+    wrapperHeight: string | number;
+    viewMode: ViewMode;
+    dragMode: "none" | "move" | "crop";
+    circleShape: boolean;
+    zoomable: boolean;
+    cropperThemeColor: string;
+    cancelButtonText: string;
+    confirmButtonText: string;
+}, {}>;
+export default _default;

package/lib/crop/src/Crop.js

@@ -0,0 +1,163 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropProps = void 0;
+const vue_1 = require("vue");
+const cropperjs_1 = __importDefault(require("cropperjs"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const button_1 = require("../../button");
+const flex_1 = require("../../flex");
+exports.cropProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { src: String, wrapperWidth: {
+        type: [Number, String],
+        default: 'auto'
+    }, wrapperHeight: {
+        type: [Number, String],
+        default: 'auto'
+    }, viewMode: {
+        type: Number,
+        default: 0
+    }, dragMode: {
+        type: String,
+        default: 'none'
+    }, aspectRatio: {
+        type: Number,
+        default: NaN
+    }, background: {
+        type: Boolean,
+        default: true
+    }, circleShape: {
+        type: Boolean,
+        default: false
+    }, zoomable: {
+        type: Boolean,
+        default: false
+    }, cropperThemeColor: {
+        type: String,
+        default: '#fff'
+    }, cancelButtonText: {
+        type: String,
+        default: 'Cancel'
+    }, confirmButtonText: {
+        type: String,
+        default: 'Save'
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Crop',
+    inheritAttrs: false,
+    props: exports.cropProps,
+    emits: {
+        cancel: () => true,
+        confirm: (dataUrl) => true
+    },
+    setup(props, { emit }) {
+        const cropWrapperRef = (0, vue_1.ref)();
+        const cropImageRef = (0, vue_1.ref)();
+        const cropperInstance = (0, vue_1.ref)(null);
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Crop', '-crop', index_cssr_1.default, styles_1.cropLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const width = typeof props.wrapperWidth === 'string'
+                ? props.wrapperWidth.endsWith('px')
+                    ? props.wrapperWidth
+                    : `${props.wrapperWidth}px`
+                : `${props.wrapperWidth}px`;
+            const height = typeof props.wrapperHeight === 'string'
+                ? props.wrapperHeight.endsWith('px')
+                    ? props.wrapperHeight
+                    : `${props.wrapperHeight}px`
+                : `${props.wrapperHeight}px`;
+            const { self: { wrapperBorderRadius, wrapperBg, wrapperMargin } } = themeRef.value;
+            return {
+                '--u-wrapper-border-radius': wrapperBorderRadius,
+                '--u-wrapper-bg-color': wrapperBg,
+                '--u-wrapper-width': width,
+                '--u-wrapper-height': height,
+                '--u-cropper-theme-color': props.cropperThemeColor,
+                '--u-wrapper-margin': wrapperMargin
+            };
+        });
+        const initCrop = () => {
+            if (cropperInstance.value) {
+                destroyCrop();
+            }
+            if (props.src && cropWrapperRef.value && cropImageRef.value) {
+                cropperInstance.value = new cropperjs_1.default(cropImageRef.value, {
+                    viewMode: props.viewMode,
+                    dragMode: props.dragMode,
+                    aspectRatio: props.aspectRatio,
+                    background: props.background,
+                    guides: false,
+                    center: false,
+                    zoomable: props.zoomable
+                });
+            }
+        };
+        const destroyCrop = () => {
+            var _a;
+            (_a = cropperInstance.value) === null || _a === void 0 ? void 0 : _a.destroy();
+            cropperInstance.value = null;
+        };
+        const confirmCrop = () => {
+            var _a;
+            const sourceCanvas = (_a = cropperInstance.value) === null || _a === void 0 ? void 0 : _a.getCroppedCanvas();
+            if (sourceCanvas) {
+                if (props.circleShape) {
+                    const canvas = document.createElement('canvas');
+                    const context = canvas.getContext('2d');
+                    if (context) {
+                        const width = sourceCanvas.width;
+                        const height = sourceCanvas.height;
+                        canvas.width = width;
+                        canvas.height = height;
+                        context.imageSmoothingEnabled = true;
+                        context.drawImage(sourceCanvas, 0, 0, width, height);
+                        context.globalCompositeOperation = 'destination-in';
+                        context.beginPath();
+                        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+                        context.fill();
+                        emit('confirm', canvas.toDataURL());
+                    }
+                }
+                else {
+                    emit('confirm', sourceCanvas.toDataURL());
+                }
+            }
+        };
+        const cancelCrop = () => {
+            emit('cancel');
+        };
+        (0, vue_1.watch)(props, initCrop);
+        (0, vue_1.onMounted)(initCrop);
+        (0, vue_1.onBeforeUnmount)(destroyCrop);
+        return {
+            cropWrapperRef,
+            cropImageRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef,
+            confirmCrop,
+            cancelCrop
+        };
+    },
+    render() {
+        const { src, cssVars, circleShape, mergedClsPrefix, cancelButtonText, confirmButtonText, confirmCrop, cancelCrop } = this;
+        return ((0, vue_1.h)("div", { style: cssVars },
+            (0, vue_1.h)("div", { ref: "cropWrapperRef", class: [
+                    `${mergedClsPrefix}-crop-wrapper`,
+                    circleShape ? `${mergedClsPrefix}-crop-wrapper--circle` : null
+                ] },
+                (0, vue_1.h)("img", { ref: "cropImageRef", src: src, class: `${mergedClsPrefix}-crop-img` })),
+            (0, vue_1.h)(flex_1.UFlex, { justify: "end" }, {
+                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                    (0, vue_1.h)(button_1.UButton, { secondary: true, onClick: cancelCrop }, {
+                        default: () => cancelButtonText
+                    }),
+                    (0, vue_1.h)(button_1.UButton, { tertiary: true, onClick: confirmCrop }, {
+                        default: () => confirmButtonText
+                    })))
+            })));
+    }
+});

package/lib/crop/src/interface.d.ts

@@ -0,0 +1,6 @@
+export declare enum ViewMode {
+    v0 = 0,
+    v1 = 1,
+    v2 = 2,
+    v3 = 3
+}

package/lib/crop/src/interface.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewMode = void 0;
+var ViewMode;
+(function (ViewMode) {
+    ViewMode[ViewMode["v0"] = 0] = "v0";
+    ViewMode[ViewMode["v1"] = 1] = "v1";
+    ViewMode[ViewMode["v2"] = 2] = "v2";
+    ViewMode[ViewMode["v3"] = 3] = "v3";
+})(ViewMode || (exports.ViewMode = ViewMode = {}));

package/lib/crop/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;