@uzum-tech/ui 1.9.1 → 1.10.1

package/es/crop/src/Crop.js

@@ -0,0 +1,157 @@
+import { h, ref, watch, Fragment, computed, onMounted, defineComponent, onBeforeUnmount } from 'vue';
+import Cropper from 'cropperjs';
+import style from './styles/index.cssr';
+import { useConfig, useTheme } from '../../_mixins';
+import { cropLight } from '../styles';
+import { UButton } from '../../button';
+import { UFlex } from '../../flex';
+export const cropProps = Object.assign(Object.assign({}, 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'
+    } });
+export default defineComponent({
+    name: 'Crop',
+    inheritAttrs: false,
+    props: cropProps,
+    emits: {
+        cancel: () => true,
+        confirm: (dataUrl) => true
+    },
+    setup(props, { emit }) {
+        const cropWrapperRef = ref();
+        const cropImageRef = ref();
+        const cropperInstance = ref(null);
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme('Crop', '-crop', style, cropLight, props, mergedClsPrefixRef);
+        const cssVarsRef = 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 Cropper(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');
+        };
+        watch(props, initCrop);
+        onMounted(initCrop);
+        onBeforeUnmount(destroyCrop);
+        return {
+            cropWrapperRef,
+            cropImageRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef,
+            confirmCrop,
+            cancelCrop
+        };
+    },
+    render() {
+        const { src, cssVars, circleShape, mergedClsPrefix, cancelButtonText, confirmButtonText, confirmCrop, cancelCrop } = this;
+        return (h("div", { style: cssVars },
+            h("div", { ref: "cropWrapperRef", class: [
+                    `${mergedClsPrefix}-crop-wrapper`,
+                    circleShape ? `${mergedClsPrefix}-crop-wrapper--circle` : null
+                ] },
+                h("img", { ref: "cropImageRef", src: src, class: `${mergedClsPrefix}-crop-img` })),
+            h(UFlex, { justify: "end" }, {
+                default: () => (h(Fragment, null,
+                    h(UButton, { secondary: true, onClick: cancelCrop }, {
+                        default: () => cancelButtonText
+                    }),
+                    h(UButton, { tertiary: true, onClick: confirmCrop }, {
+                        default: () => confirmButtonText
+                    })))
+            })));
+    }
+});

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

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

package/es/crop/src/interface.js

@@ -0,0 +1,7 @@
+export 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 || (ViewMode = {}));

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

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

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

@@ -0,0 +1,333 @@
+import { c, cB, cM } from '../../../_utils/cssr';
+// vars:
+// --u-wrapper-border-radius
+// --u-wrapper-bg-color
+// --u-wrapper-width
+// --u-wrapper-height
+// --u-cropper-theme-color
+// --u-wrapper-margin
+export default c([c([c('.cropper-container', {
+  direction: 'ltr',
+  fontSize: '0',
+  lineHeight: '0',
+  position: 'relative',
+  msTouchAction: 'none',
+  touchAction: 'none',
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none'
+}, [c('img', {
+  backfaceVisibility: 'hidden',
+  display: 'block',
+  height: '100%',
+  imageOrientation: '0deg',
+  maxHeight: 'none !important',
+  maxWidth: 'none !important',
+  minHeight: '0 !important',
+  minWidth: '0 !important',
+  width: '100%'
+})]), c('.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal', {
+  bottom: '0',
+  left: '0',
+  position: 'absolute',
+  right: '0',
+  top: '0'
+}), c('.cropper-wrap-box, .cropper-canvas', {
+  overflow: 'hidden'
+}), c('.cropper-drag-box', {
+  backgroundColor: '#fff',
+  opacity: '0'
+}), c('.cropper-modal', {
+  backgroundColor: '#000',
+  opacity: '0.5'
+}), c('.cropper-view-box', {
+  display: 'block',
+  height: '100%',
+  outline: '1px solid #39f',
+  outlineColor: 'rgba(51, 153, 255, 0.75)',
+  overflow: 'hidden',
+  width: '100%'
+}), c('.cropper-dashed', {
+  border: '0 dashed #eee',
+  display: 'block',
+  opacity: '0.5',
+  position: 'absolute'
+}, [c('&.dashed-h', {
+  borderBottomWidth: '1px',
+  borderTopWidth: '1px',
+  height: 'calc(100% / 3)',
+  left: '0',
+  top: 'calc(100% / 3)',
+  width: '100%'
+}), c('&.dashed-v', {
+  borderLeftWidth: '1px',
+  borderRightWidth: '1px',
+  height: '100%',
+  left: 'calc(100% / 3)',
+  top: '0',
+  width: 'calc(100% / 3)'
+})]), c('.cropper-center', {
+  display: 'block',
+  height: '0',
+  left: '50%',
+  opacity: '0.75',
+  position: 'absolute',
+  top: '50%',
+  width: '0'
+}, [c('&::before, &::after', {
+  backgroundColor: '#eee',
+  content: '" "',
+  display: 'block',
+  position: 'absolute'
+}), c('&::before', {
+  height: '1px',
+  left: '-3px',
+  top: '0',
+  width: '7px'
+}), c('&::after', {
+  height: '7px',
+  left: '0',
+  top: '-3px',
+  width: '1px'
+})]), c('.cropper-face, .cropper-line, .cropper-point', {
+  display: 'block',
+  height: '100%',
+  opacity: '0.1',
+  position: 'absolute',
+  width: '100%'
+}), c('.cropper-face', {
+  backgroundColor: '#fff',
+  left: '0',
+  top: '0'
+}), c('.cropper-line', {
+  backgroundColor: '#39f'
+}, [c('&.line-e', {
+  cursor: 'ew-resize',
+  right: '-3px',
+  top: '0',
+  width: '5px'
+}), c('&.line-n', {
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0',
+  top: '-3px'
+}), c('&.line-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  top: '0',
+  width: '5px'
+}), c('&.line-s', {
+  bottom: '-3px',
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0'
+})]), c('.cropper-point', {
+  backgroundColor: '#39f',
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+}, [c('&.point-e', {
+  cursor: 'ew-resize',
+  marginTop: '-3px',
+  right: '-3px',
+  top: '50%'
+}), c('&.point-n', {
+  cursor: 'ns-resize',
+  left: '50%',
+  marginLeft: '-3px',
+  top: '-3px'
+}), c('&.point-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  marginTop: '-3px',
+  top: '50%'
+}), c('&.point-s', {
+  bottom: '-3px',
+  cursor: 's-resize',
+  left: '50%',
+  marginLeft: '-3px'
+}), c('&.point-ne', {
+  cursor: 'nesw-resize',
+  right: '-3px',
+  top: '-3px'
+}), c('&.point-nw', {
+  cursor: 'nwse-resize',
+  left: '-3px',
+  top: '-3px'
+}), c('&.point-sw', {
+  bottom: '-3px',
+  cursor: 'nesw-resize',
+  left: '-3px'
+}), c('&.point-se', {
+  bottom: '-3px',
+  cursor: 'nwse-resize',
+  height: '20px',
+  opacity: '1',
+  right: '-3px',
+  width: '20px'
+}, [c('&::before', {
+  backgroundColor: '#39f',
+  bottom: '-50%',
+  content: '" "',
+  display: 'block',
+  height: '200%',
+  opacity: '0',
+  position: 'absolute',
+  right: '-50%',
+  width: '200%'
+})])]), c('@media (min-width: 768px)', [c('.cropper-point.point-se', {
+  height: '15px',
+  width: '15px'
+})]), c('@media (min-width: 992px)', [c('.cropper-point.point-se', {
+  height: '10px',
+  width: '10px'
+})]), c('@media (min-width: 1200px)', [c('.cropper-point.point-se', {
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+})]), c('.cropper-invisible', {
+  opacity: '0'
+}), c('.cropper-bg', {
+  backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")'
+}), c('.cropper-hide', {
+  display: 'block',
+  height: '0',
+  position: 'absolute',
+  width: '0'
+}), c('.cropper-hidden', {
+  display: 'none !important'
+}), c('.cropper-move', {
+  cursor: 'move'
+}), c('.cropper-crop', {
+  cursor: 'crosshair'
+}), c('.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point', {
+  cursor: 'not-allowed'
+})]), cB('crop-wrapper', `
+ overflow: hidden;
+ background-color: var(--u-wrapper-bg-color);
+ border-radius: var(--u-wrapper-border-radius);
+ width: var(--u-wrapper-width);
+ height: var(--u-wrapper-height);
+ margin: var(--u-wrapper-margin);
+ `, [cM('circle', '', [c(`.cropper-view-box, 
+ .cropper-face`, `
+ border-radius: 50%;
+ `)]), c('.cropper-view-box', `
+ outline: 0;
+ box-shadow: 0 0 0 1px var(--u-cropper-theme-color);
+ `), c(`.cropper-line,
+ .cropper-point`, `
+ background-color: var(--u-cropper-theme-color);
+ `), c(`
+ .point-e,
+ .point-n,
+ .point-w,
+ .point-s
+ `, `
+ display: none;
+ `), c('.point-se', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-sw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-nw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), c('.point-ne', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [c('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), c('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)])]), cB('crop-img', `
+ display: block;
+ max-width: 100%;
+ `)]);

package/es/crop/styles/_common.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    wrapperMargin: string;
+};
+export default _default;

package/es/crop/styles/_common.js

@@ -0,0 +1,3 @@
+export default {
+    wrapperMargin: '0 0 20px'
+};

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

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

package/es/crop/styles/dark.js

@@ -0,0 +1,9 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const cropDark = {
+    name: 'Crop',
+    common: commonDark,
+    peers: {},
+    self
+};
+export default cropDark;

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

@@ -0,0 +1,3 @@
+export { default as cropDark } from './dark';
+export { default as cropLight } from './light';
+export type { CropTheme, CropThemeVars } from './light';

package/es/crop/styles/index.js

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

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

@@ -0,0 +1,14 @@
+import { ThemeCommonVars } from '../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+};
+export type CropThemeVars = ReturnType<typeof self>;
+declare const cropLight: import("../../_mixins").Theme<"Crop", {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+}, {}>;
+export default cropLight;
+export type CropTheme = typeof cropLight;

package/es/crop/styles/light.js

@@ -0,0 +1,14 @@
+import { createTheme } from '../../_mixins';
+import { commonLight } from '../../_styles/common';
+import commonVars from './_common';
+export const self = (vars) => {
+    const { elementsSenary, borderRadiusLarge } = vars;
+    return Object.assign(Object.assign({}, commonVars), { wrapperBg: elementsSenary, wrapperBorderRadius: borderRadiusLarge });
+};
+const cropLight = createTheme({
+    name: 'Crop',
+    common: commonLight,
+    peers: {},
+    self
+});
+export default cropLight;

package/es/date-picker/src/panel/panelMonth.d.ts

@@ -51,8 +51,8 @@ declare const _default: import("vue").DefineComponent<{
             readonly onRender?: (() => void) | undefined;
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
-            readonly onClear?: Function | undefined;
             readonly onUpdateValue: OnPanelUpdateValue;
+            readonly onClear?: Function | undefined;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;

package/es/date-picker/src/panel/panelYear.d.ts

@@ -51,8 +51,8 @@ declare const _default: import("vue").DefineComponent<{
             readonly onRender?: (() => void) | undefined;
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
-            readonly onClear?: Function | undefined;
             readonly onUpdateValue: OnPanelUpdateValue;
+            readonly onClear?: Function | undefined;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;