xdesign-vue-next
Version:
XDesign Component for vue-next
329 lines (310 loc) • 12.1 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { createElementVNode, openBlock, createElementBlock, defineComponent, computed, createVNode } from 'vue';
import { _ as __unplugin_components_4 } from '../../_chunks/dep-aa9e0b15.mjs';
import TImageViewerIcon from './ImageModalIcon.mjs';
import { Tooltip } from '../../tooltip/index.mjs';
import { usePrefixClass } from '../../hooks/useConfig.mjs';
import { downloadFile } from '../utils.mjs';
import '../../hooks/index.mjs';
import { useImagePreviewUrl } from '../../hooks/useImagePreviewUrl.mjs';
import { useConfig } from '../../config-provider/useConfig.mjs';
import '../../_chunks/dep-f9e836af.mjs';
import '../../_chunks/dep-82805301.mjs';
import '../../hooks/tnode.mjs';
import '../../_chunks/dep-1cc1c24f.mjs';
import '../../_chunks/dep-10a947a6.mjs';
import '../../_chunks/dep-b75d8d74.mjs';
import '../../_chunks/dep-6ad18815.mjs';
import '../../_chunks/dep-a628549d.mjs';
import '../../_chunks/dep-4903a8a8.mjs';
import '../../_chunks/dep-a95026f2.mjs';
import '../../_chunks/dep-068e912d.mjs';
import '../../_chunks/dep-7dcfa37a.mjs';
import '../../_chunks/dep-addc2a84.mjs';
import '../../_chunks/dep-f4eba04c.mjs';
import '../../_chunks/dep-735bcd0d.mjs';
import '../../_chunks/dep-765678ef.mjs';
import '../../_chunks/dep-8db27830.mjs';
import '../../_chunks/dep-ae4bffa5.mjs';
import '../../utils/render-tnode.mjs';
import '../../_chunks/dep-9d7ebc32.mjs';
import '../../_chunks/dep-69963a8c.mjs';
import '../../_chunks/dep-6e7b37b8.mjs';
import '../../_chunks/dep-e1ab85c5.mjs';
import '../../_chunks/dep-5f0e0453.mjs';
import '../../_chunks/dep-db381ece.mjs';
import '../../_chunks/dep-5755c21c.mjs';
import '../../_chunks/dep-8d1c9a23.mjs';
import '../../_chunks/dep-dafada74.mjs';
import '../../_chunks/dep-0e832fc7.mjs';
import '../../_chunks/dep-11fa9c2c.mjs';
import '../../_chunks/dep-91ac8f71.mjs';
import '../../_chunks/dep-c4737535.mjs';
import '../../_chunks/dep-81c83986.mjs';
import '../../_chunks/dep-6aa0223b.mjs';
import '../../_chunks/dep-7f239c43.mjs';
import '../../_chunks/dep-6f04869e.mjs';
import '../../_chunks/dep-d32fbbb3.mjs';
import '../../_chunks/dep-71f84cf2.mjs';
import '../../_chunks/dep-03412fab.mjs';
import '../../_chunks/dep-205ff58d.mjs';
import '../../_chunks/dep-b09f48fa.mjs';
import '../../_chunks/dep-26bf361a.mjs';
import '../../_chunks/dep-3ec3335a.mjs';
import '../../_chunks/dep-ed4e7c50.mjs';
import '../../_chunks/dep-a666b9ad.mjs';
import '../../_common/js/global-config/default-config.mjs';
import '../../_common/js/global-config/locale/en_US.mjs';
import '../../config-provider/type.mjs';
import '../../tooltip/tooltip.mjs';
import '../../_chunks/dep-32d4c595.mjs';
import '../../_chunks/dep-89b966f4.mjs';
import '../../_chunks/dep-60f1d7ee.mjs';
import '../../_chunks/dep-fa6608fd.mjs';
import '../../_chunks/dep-e901316d.mjs';
import '../../_chunks/dep-b57a2815.mjs';
import '../../_chunks/dep-983ce253.mjs';
import '../../tooltip/props.mjs';
import '../../popup/props.mjs';
import '../../popup/index.mjs';
import '../../popup/popup.mjs';
import '@popperjs/core';
import '../../_chunks/dep-0c786bea.mjs';
import '../../_chunks/dep-e727a519.mjs';
import '../../hooks/useVModel.mjs';
import '../../utils/dom.mjs';
import '../../utils/easing.mjs';
import '../../_common/js/utils/set-style.mjs';
import '../../popup/container.mjs';
import '../../_chunks/dep-5bec687c.mjs';
import '../../hooks/useResizeObserver.mjs';
import '../../hooks/icon.mjs';
import '../../hooks/slot.mjs';
import '../../hooks/useCommonClassName.mjs';
import '../../hooks/useDefaultValue.mjs';
import '../../hooks/useDestroyOnClose.mjs';
import '../../hooks/useKeepAnimation.mjs';
import '../../hooks/useRipple.mjs';
import '../../utils/set-style.mjs';
import '../../hooks/useVirtualScroll.mjs';
import '../../_common/js/upload/utils.mjs';
import '../../_common/js/log/log.mjs';
import '../../utils/withInstall.mjs';
import './style/css.mjs';
import '../../popup/type.mjs';
import '../../tooltip/util.mjs';
import '../../tooltip/type.mjs';
const _hoisted_1$4 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2$4 = /*#__PURE__*/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 (openBlock(), 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__*/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 (openBlock(), 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__*/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 (openBlock(), 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__*/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 (openBlock(), 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__*/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 (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}
var __unplugin_components_0 = { name: 'ri-arrow-left-right-line', render };
/* vite-plugin-components disabled */
var TImageViewerUtils = 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 = usePrefixClass();
var imageUrl = computed(function () {
return props.currentImage.mainImage;
});
var _useImagePreviewUrl = useImagePreviewUrl(imageUrl),
previewUrl = _useImagePreviewUrl.previewUrl;
var _useConfig = useConfig("imageViewer"),
globalConfig = _useConfig.globalConfig;
return function () {
var _globalConfig$value$m, _globalConfig$value$r, _globalConfig$value$o;
return createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils")
}, [createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__utils-content")
}, [createVNode(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 [createVNode(TImageViewerIcon, {
"onClick": props.onMirror,
"icon": function icon() {
return createVNode(__unplugin_components_0, {
"size": "medium"
}, null);
}
}, null)];
}
}), createVNode(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 [createVNode(TImageViewerIcon, {
"onClick": props.onRotate,
"icon": function icon() {
return createVNode(__unplugin_components_1, {
"size": "medium"
}, null);
}
}, null)];
}
}), createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(__unplugin_components_2, {
"size": "medium"
}, null);
},
"onClick": props.onZoomOut
}, null), createVNode(TImageViewerIcon, {
"class": "".concat(classPrefix.value, "-image-viewer__utils-scale"),
"size": "medium",
"label": "".concat(props.scale * 100, "%")
}, null), createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(__unplugin_components_3, {
"size": "medium"
}, null);
},
"onClick": props.onZoomIn
}, null), createVNode(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 [createVNode("div", {
"class": "".concat(classPrefix.value, "-image-viewer__modal-icon")
}, [createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(__unplugin_components_4, {
"size": "medium"
}, null);
},
"onClick": props.onReset
}, null)])];
}
}), props.currentImage.download && createVNode(TImageViewerIcon, {
"icon": function icon() {
return createVNode(__unplugin_components_5, {
"size": "medium"
}, null);
},
"onClick": function onClick() {
downloadFile(previewUrl.value);
}
}, null)])]);
};
}
});
export { TImageViewerUtils as default };
//# sourceMappingURL=ImageViewerUtils.mjs.map