xdesign-vue-next
Version:
XDesign Component for vue-next
283 lines (262 loc) • 10.5 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var imageLine = require('../../_chunks/dep-d2b45a10.js');
var imageViewer_base_ImageModalIcon = require('./ImageModalIcon.js');
var tooltip_index = require('../../tooltip/index.js');
var hooks_useConfig = require('../../hooks/useConfig.js');
var imageViewer_utils = require('../utils.js');
var hooks_useImagePreviewUrl = require('../../hooks/useImagePreviewUrl.js');
var configProvider_useConfig = require('../../config-provider/useConfig.js');
require('@babel/runtime/helpers/defineProperty');
require('../../hooks/tnode.js');
require('lodash/isFunction');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isString');
require('lodash/isObject');
require('lodash/cloneDeep');
require('../../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../../_common/js/global-config/default-config.js');
require('../../_common/js/global-config/locale/en_US.js');
require('../../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('../../tooltip/tooltip.js');
require('@babel/runtime/helpers/slicedToArray');
require('lodash/omit');
require('../../tooltip/props.js');
require('../../popup/props.js');
require('../../popup/index.js');
require('../../popup/popup.js');
require('@popperjs/core');
require('lodash/debounce');
require('../../hooks/useVModel.js');
require('../../utils/dom.js');
require('../../utils/easing.js');
require('../../_common/js/utils/set-style.js');
require('../../popup/container.js');
require('@babel/runtime/helpers/toConsumableArray');
require('../../hooks/useResizeObserver.js');
require('../../utils/withInstall.js');
require('../../tooltip/util.js');
require('../../_common/js/upload/utils.js');
require('../../_common/js/log/log.js');
const _hoisted_1$4 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2$4 = /*#__PURE__*/vue.createElementVNode("path", {
fill: "currentColor",
d: "M13 10h5l-6 6l-6-6h5V3h2v7Zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$4 = [
_hoisted_2$4
];
function render$4(_ctx, _cache) {
return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_3$4))
}
var __unplugin_components_5 = { name: 'ri-download2-line', render: render$4 };
/* vite-plugin-components disabled */
const _hoisted_1$3 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2$3 = /*#__PURE__*/vue.createElementVNode("path", {
fill: "currentColor",
d: "m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617Zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15ZM10 10V7h2v3h3v2h-3v3h-2v-3H7v-2h3Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$3 = [
_hoisted_2$3
];
function render$3(_ctx, _cache) {
return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$3, _hoisted_3$3))
}
var __unplugin_components_3 = { name: 'ri-zoom-in-line', render: render$3 };
/* vite-plugin-components disabled */
const _hoisted_1$2 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode("path", {
fill: "currentColor",
d: "m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617Zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15ZM7 10h8v2H7v-2Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$2 = [
_hoisted_2$2
];
function render$2(_ctx, _cache) {
return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_3$2))
}
var __unplugin_components_2 = { name: 'ri-zoom-out-line', render: render$2 };
/* vite-plugin-components disabled */
const _hoisted_1$1 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2$1 = /*#__PURE__*/vue.createElementVNode("path", {
fill: "currentColor",
d: "m20 10.586l1.828-1.829l1.415 1.415L19 14.414l-4.243-4.242l1.415-1.415L18 10.586V8a3 3 0 0 0-3-3h-4V3h4a5 5 0 0 1 5 5v2.586ZM13 9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h10Zm-1 2H4v8h8v-8Z"
}, null, -1 /* HOISTED */);
const _hoisted_3$1 = [
_hoisted_2$1
];
function render$1(_ctx, _cache) {
return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_3$1))
}
var __unplugin_components_1 = { name: 'ri-clockwise-line', render: render$1 };
/* vite-plugin-components disabled */
const _hoisted_1 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("path", {
fill: "currentColor",
d: "M16.05 12.05L21 17l-4.95 4.95l-1.414-1.415L17.172 18H4v-2h13.172l-2.536-2.535l1.414-1.414Zm-8.1-10l1.414 1.414l-2.536 2.535H20v2H6.828l2.536 2.536L7.95 11.95L3 7l4.95-4.95Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
_hoisted_2
];
function render(_ctx, _cache) {
return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, _hoisted_3))
}
var __unplugin_components_0 = { name: 'ri-arrow-left-right-line', render };
/* vite-plugin-components disabled */
var TImageViewerUtils = vue.defineComponent({
name: "XImageViewerUtils",
props: {
scale: Number,
onRotate: Function,
onZoomIn: Function,
onZoomOut: Function,
onMirror: Function,
onReset: Function,
currentImage: {
type: Object,
"default": function _default() {
return {};
}
}
},
setup: function setup(props) {
var classPrefix = hooks_useConfig.usePrefixClass();
var imageUrl = vue.computed(function () {
return props.currentImage.mainImage;
});
var _useImagePreviewUrl = hooks_useImagePreviewUrl.useImagePreviewUrl(imageUrl),
previewUrl = _useImagePreviewUrl.previewUrl;
var _useConfig = configProvider_useConfig.useConfig("imageViewer"),
globalConfig = _useConfig.globalConfig;
return function () {
var _globalConfig$value$m, _globalConfig$value$r, _globalConfig$value$o;
return vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils")
}, [vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils-content")
}, [vue.createVNode(tooltip_index.Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": (_globalConfig$value$m = globalConfig.value.mirrorTipText) !== null && _globalConfig$value$m !== void 0 ? _globalConfig$value$m : "\u955C\u50CF",
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"onClick": props.onMirror,
"icon": function icon() {
return vue.createVNode(__unplugin_components_0, {
"size": "medium"
}, null);
}
}, null)];
}
}), vue.createVNode(tooltip_index.Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": (_globalConfig$value$r = globalConfig.value.rotateTipText) !== null && _globalConfig$value$r !== void 0 ? _globalConfig$value$r : "\u65CB\u8F6C",
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"onClick": props.onRotate,
"icon": function icon() {
return vue.createVNode(__unplugin_components_1, {
"size": "medium"
}, null);
}
}, null)];
}
}), vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"icon": function icon() {
return vue.createVNode(__unplugin_components_2, {
"size": "medium"
}, null);
},
"onClick": props.onZoomOut
}, null), vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"class": "".concat(classPrefix.value, "-image-viewer__utils-scale"),
"size": "medium",
"label": "".concat(props.scale * 100, "%")
}, null), vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"icon": function icon() {
return vue.createVNode(__unplugin_components_3, {
"size": "medium"
}, null);
},
"onClick": props.onZoomIn
}, null), vue.createVNode(tooltip_index.Tooltip, {
"overlayClassName": "".concat(classPrefix.value, "-image-viewer__utils--tip"),
"content": (_globalConfig$value$o = globalConfig.value.originalSizeTipText) !== null && _globalConfig$value$o !== void 0 ? _globalConfig$value$o : "\u539F\u59CB\u5927\u5C0F",
"destroyOnClose": true,
"placement": "top",
"showArrow": true,
"theme": "default"
}, {
"default": function _default() {
return [vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__modal-icon")
}, [vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"icon": function icon() {
return vue.createVNode(imageLine.__unplugin_components_4, {
"size": "medium"
}, null);
},
"onClick": props.onReset
}, null)])];
}
}), props.currentImage.download && vue.createVNode(imageViewer_base_ImageModalIcon["default"], {
"icon": function icon() {
return vue.createVNode(__unplugin_components_5, {
"size": "medium"
}, null);
},
"onClick": function onClick() {
imageViewer_utils.downloadFile(previewUrl.value);
}
}, null)])]);
};
}
});
exports["default"] = TImageViewerUtils;
//# sourceMappingURL=ImageViewerUtils.js.map