fangguo-component 1.1.5 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +57 -0
  2. package/dist/{ErrorImage-Ao9kEEUg.js → ErrorImage-CFVt1ht_.js} +2 -2
  3. package/dist/FgCascader.css +24 -0
  4. package/dist/{FgCascader.vue_vue_type_style_index_0_lang-CM8FxFLJ.js → FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js} +45 -4
  5. package/dist/{HSelect-BFkWiCFi.js → HSelect-DgFjd08Y.js} +3 -3
  6. package/dist/{HSelectAll.vue_vue_type_script_setup_true_lang-BZX7ch2I.js → HSelectAll.vue_vue_type_script_setup_true_lang-C6qzdQT-.js} +1 -1
  7. package/dist/{HSelectSJ-DZmtdyjF.js → HSelectSJ-DOFUzTZV.js} +3 -3
  8. package/dist/ImgViewerHost.vue_vue_type_script_setup_true_lang-DBs42WOq.js +53 -0
  9. package/dist/LazyPopover-7ebuh-QG.js +188 -0
  10. package/dist/LazyPopover.css +5 -0
  11. package/dist/{SelectTree-DHbWogEU.js → SelectTree-DUH92Iwr.js} +2 -2
  12. package/dist/{TextCopy-th0FAxwl.js → TextCopy-lpbeqOUI.js} +1 -1
  13. package/dist/ViewImg-DXhF20SL.js +254 -0
  14. package/dist/ViewImg.css +56 -0
  15. package/dist/ViewImgPopover-QblZG0z5.js +343 -0
  16. package/dist/ViewImgPopover.css +106 -0
  17. package/dist/ViewImgPreview.css +132 -0
  18. package/dist/ViewImgPreview.vue_vue_type_style_index_0_lang-C2i0p5IK.js +316 -0
  19. package/dist/{common-B1nSpTGn.js → common-D0EYVGB2.js} +1 -1
  20. package/dist/components/cascader/index.js +1 -1
  21. package/dist/components/errorImage/index.js +2 -2
  22. package/dist/components/hSelect/index.js +1 -1
  23. package/dist/components/hSelectAll/index.js +1 -1
  24. package/dist/components/hSelectSJ/index.js +1 -1
  25. package/dist/components/imgViewerHost/ImgViewerHost.vue.d.ts +2 -0
  26. package/dist/components/imgViewerHost/imgViewerStore.d.ts +199 -0
  27. package/dist/components/imgViewerHost/index.d.ts +4 -0
  28. package/dist/components/imgViewerHost/index.js +10 -0
  29. package/dist/components/imgViewerHost/utils.d.ts +4 -0
  30. package/dist/components/index.d.ts +4 -0
  31. package/dist/components/index.js +49 -18
  32. package/dist/components/lazyPopover/LazyPopover.vue.d.ts +12 -15
  33. package/dist/components/lazyPopover/index.js +2 -2
  34. package/dist/components/selectTree/index.js +1 -1
  35. package/dist/components/textCopy/index.js +1 -1
  36. package/dist/components/viewImg/ViewImg.vue.d.ts +149 -0
  37. package/dist/components/viewImg/index.d.ts +1 -0
  38. package/dist/components/viewImg/index.js +4 -0
  39. package/dist/components/viewImgPopover/ViewImgPopover.vue.d.ts +726 -0
  40. package/dist/components/viewImgPopover/index.d.ts +1 -0
  41. package/dist/components/viewImgPopover/index.js +4 -0
  42. package/dist/components/viewImgPreview/ViewImgPreview.vue.d.ts +53 -0
  43. package/dist/components/viewImgPreview/index.d.ts +3 -0
  44. package/dist/components/viewImgPreview/index.js +21 -0
  45. package/dist/components/viewImgPreview/types.d.ts +93 -0
  46. package/dist/imgViewerStore-DK3zvGf4.js +247 -0
  47. package/dist/{index-DzdLpetc.js → index-BtQgIf7F.js} +1414 -1402
  48. package/dist/{index-uQXqC9BF.js → index-Ce_edAQB.js} +44 -13
  49. package/dist/{index-BPnixsfc.js → index-Qkq7I01c.js} +15 -1
  50. package/dist/index.d.ts +17 -3
  51. package/dist/index.js +114 -67
  52. package/dist/montageImgUrl-CwgYnB2h.js +204 -0
  53. package/dist/tools/ImageParserUtils/index.js +346 -346
  54. package/dist/tools/common/index.js +1 -1
  55. package/dist/tools/imgUrl/config.d.ts +10 -0
  56. package/dist/tools/imgUrl/index.d.ts +4 -0
  57. package/dist/tools/imgUrl/index.js +16 -0
  58. package/dist/tools/imgUrl/montageImgUrl.d.ts +15 -0
  59. package/dist/tools/imgUrl/networkAdaptive.d.ts +7 -0
  60. package/dist/tools/index.d.ts +1 -0
  61. package/dist/tools/index.js +29 -15
  62. package/dist/types-Ccn_sb6f.js +49 -0
  63. package/package.json +1 -1
  64. package/dist/LazyPopover.vue_vue_type_script_setup_true_lang-B2vtU4f4.js +0 -34
@@ -0,0 +1,106 @@
1
+ .fg-view-img-popover__reference[data-v-868c46fb] {
2
+ position: relative;
3
+ display: block;
4
+ width: 100%;
5
+ height: 100%;
6
+ }
7
+ .fg-view-img-popover__preview-icon[data-v-868c46fb] {
8
+ position: absolute;
9
+ top: 4px;
10
+ right: 4px;
11
+ z-index: 1;
12
+ line-height: 1;
13
+ color: var(--el-text-color-primary);
14
+ cursor: pointer;
15
+ }
16
+ .fg-view-img-popover__preview-icon[data-v-868c46fb]:hover {
17
+ color: var(--el-color-primary);
18
+ }
19
+ .fg-view-img-popover__hover-image[data-v-868c46fb] {
20
+ display: block;
21
+ vertical-align: top;
22
+ background: #7f7f7f;
23
+ }
24
+ .fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__inner {
25
+ width: 100%;
26
+ height: 100%;
27
+ object-fit: contain;
28
+ }
29
+ .fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__placeholder,
30
+ .fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__error {
31
+ position: absolute;
32
+ inset: 0;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ background: #f5f7fa;
37
+ line-height: 1.4;
38
+ }
39
+ .fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__error-default {
40
+ width: 100%;
41
+ height: 100%;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ color: #909399;
46
+ font-size: 13px;
47
+ text-align: center;
48
+ }
49
+ .fg-view-img-popover__hover-image[data-v-868c46fb] .fg-view-img__error-text {
50
+ color: #909399;
51
+ font-size: 13px;
52
+ line-height: 1.4;
53
+ text-align: center;
54
+ }
55
+ .fg-view-img-popover__hover-error[data-v-868c46fb] {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ width: 100%;
60
+ background: #f5f7fa;
61
+ color: #909399;
62
+ font-size: 13px;
63
+ line-height: 1.4;
64
+ text-align: center;
65
+ }.fg-view-img-popover__reference {
66
+ display: block;
67
+ width: 100%;
68
+ height: 100%;
69
+ max-width: 100%;
70
+ }
71
+ .fg-view-img-popover__trigger {
72
+ display: block;
73
+ width: 100%;
74
+ height: 100%;
75
+ max-width: 100%;
76
+ }
77
+ .fg-view-img-popover.el-popper {
78
+ box-sizing: border-box;
79
+ display: flex;
80
+ justify-content: center;
81
+ align-items: center;
82
+ overflow: hidden;
83
+ }
84
+ .fg-view-img-popover.el-popper .fg-lazy-popover__content {
85
+ display: flex;
86
+ justify-content: center;
87
+ align-items: center;
88
+ width: 100%;
89
+ max-width: 100%;
90
+ max-height: 100%;
91
+ line-height: 0;
92
+ }
93
+ .fg-view-img-popover.el-popper .fg-view-img-popover__watermark {
94
+ display: block;
95
+ width: 100%;
96
+ height: 380px;
97
+ max-width: 100%;
98
+ max-height: 380px;
99
+ }
100
+ .fg-view-img-popover.el-popper .fg-view-img-popover__watermark .el-watermark__content {
101
+ display: block;
102
+ width: 100%;
103
+ height: 100%;
104
+ max-width: 100%;
105
+ max-height: 100%;
106
+ }
@@ -0,0 +1,132 @@
1
+ @charset "UTF-8";
2
+ .fg-view-img-preview__toolbar-capture {
3
+ display: none;
4
+ }
5
+
6
+ /* 无工具项时隐藏底部工具栏容器 */
7
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__actions {
8
+ display: none !important;
9
+ }
10
+
11
+ /* 未配置切换按钮或仅单图时隐藏左右箭头(关闭按钮不受影响) */
12
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__prev,
13
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__next {
14
+ display: none !important;
15
+ }
16
+
17
+ /* 多图且配置了 prev/next 等时,显式展示左右箭头 */
18
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__prev,
19
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__next {
20
+ display: inline-flex !important;
21
+ visibility: visible !important;
22
+ opacity: 1 !important;
23
+ }
24
+
25
+ /* 仅展示左侧箭头 */
26
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__prev {
27
+ display: inline-flex !important;
28
+ visibility: visible !important;
29
+ opacity: 1 !important;
30
+ }
31
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__next {
32
+ display: none !important;
33
+ }
34
+
35
+ /* 仅展示右侧箭头 */
36
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__next {
37
+ display: inline-flex !important;
38
+ visibility: visible !important;
39
+ opacity: 1 !important;
40
+ }
41
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__prev {
42
+ display: none !important;
43
+ }
44
+
45
+ /* 保证预览图在视口内居中适配(避免业务全局 img { width/height: 100% } 导致铺满) */
46
+ .el-image-viewer__wrapper .el-image-viewer__canvas {
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ width: 100%;
51
+ height: 100%;
52
+ }
53
+ .el-image-viewer__wrapper .el-image-viewer__img {
54
+ max-width: 100% !important;
55
+ max-height: 100% !important;
56
+ object-fit: contain !important;
57
+ }
58
+
59
+ /* 画布置于蒙层之上 */
60
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__mask,
61
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__mask,
62
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__mask,
63
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__mask,
64
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__mask {
65
+ z-index: 1;
66
+ }
67
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__canvas,
68
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__canvas,
69
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__canvas,
70
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__canvas,
71
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__canvas {
72
+ z-index: 2;
73
+ }
74
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__img,
75
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__img,
76
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__img,
77
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__img,
78
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__img {
79
+ z-index: 2;
80
+ }
81
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__btn,
82
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__close,
83
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav .el-image-viewer__actions,
84
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__btn,
85
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__close,
86
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-prev .el-image-viewer__actions,
87
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__btn,
88
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__close,
89
+ .el-image-viewer__wrapper.fg-view-img-preview--has-nav-next .el-image-viewer__actions,
90
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__btn,
91
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-nav .el-image-viewer__close,
92
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__btn,
93
+ .el-image-viewer__wrapper.fg-view-img-preview--hide-toolbar .el-image-viewer__close {
94
+ z-index: 3;
95
+ }
96
+ .el-image-viewer__wrapper .el-image-viewer__img.fg-view-img-preview__img--broken {
97
+ position: absolute;
98
+ z-index: 2;
99
+ max-width: 100%;
100
+ max-height: 100%;
101
+ object-fit: contain;
102
+ }
103
+
104
+ /* 自定义工具栏样式 */
105
+ .el-image-viewer__actions:has(.fg-view-img-preview__toolbar) {
106
+ height: auto;
107
+ padding: 0;
108
+ background-color: transparent !important;
109
+ border: none;
110
+ }
111
+ .el-image-viewer__actions__inner:has(.fg-view-img-preview__toolbar) {
112
+ width: auto;
113
+ height: auto;
114
+ padding: 0;
115
+ gap: 0;
116
+ color: inherit;
117
+ }
118
+ .fg-view-img-preview__toolbar {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ gap: 16px;
123
+ padding: 8px 16px;
124
+ border-radius: 22px;
125
+ color: var(--fg-view-img-toolbar-color, #ffffff);
126
+ background-color: var(--fg-view-img-toolbar-bg, #606266);
127
+ }
128
+ .fg-view-img-preview__action {
129
+ font-size: 23px;
130
+ color: var(--fg-view-img-toolbar-color, #ffffff);
131
+ cursor: pointer;
132
+ }
@@ -0,0 +1,316 @@
1
+ import { defineComponent, shallowRef, watch, nextTick, computed, openBlock, createBlock, unref, withCtx, createElementVNode, toDisplayString, createElementBlock, normalizeStyle, Fragment, renderList, resolveDynamicComponent, createCommentVNode } from "vue";
2
+ import { ElImageViewer, ElIcon } from "element-plus";
3
+ import { Refresh, RefreshRight, RefreshLeft, ZoomIn, ZoomOut, DArrowRight, DArrowLeft, Right, Back } from "@element-plus/icons-vue";
4
+ import { h as DEFAULT_PREVIEW_SIDE_NAV, D as DEFAULT_ORIGINAL_TOOLBAR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, j as DEFAULT_PREVIEW_ZOOM_RATE, i as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, l as DEFAULT_TOOLBAR_ICON_COLOR, k as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE, r as resolvePreviewSideNav } from "./types-Ccn_sb6f.js";
5
+ import './ViewImgPreview.css';const _hoisted_1 = {
6
+ class: "fg-view-img-preview__toolbar-capture",
7
+ "aria-hidden": "true"
8
+ };
9
+ const _sfc_main = /* @__PURE__ */ defineComponent({
10
+ __name: "ViewImgPreview",
11
+ props: {
12
+ visible: { type: Boolean, default: false },
13
+ urlList: { default: () => [] },
14
+ initialIndex: { default: 0 },
15
+ infinite: { type: Boolean, default: DEFAULT_PREVIEW_INFINITE },
16
+ zIndex: { default: 2e3 },
17
+ toolbarBgColor: { default: DEFAULT_TOOLBAR_BG_COLOR },
18
+ toolbarIconColor: { default: DEFAULT_TOOLBAR_ICON_COLOR },
19
+ hideOnClickModal: { type: Boolean, default: DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL },
20
+ closeOnPressEscape: { type: Boolean, default: DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE },
21
+ teleported: { type: Boolean, default: DEFAULT_PREVIEW_TELEPORTED },
22
+ zoomRate: { default: DEFAULT_PREVIEW_ZOOM_RATE },
23
+ scale: { default: DEFAULT_PREVIEW_SCALE },
24
+ minScale: { default: DEFAULT_PREVIEW_MIN_SCALE },
25
+ maxScale: { default: DEFAULT_PREVIEW_MAX_SCALE },
26
+ showProgress: { type: Boolean, default: DEFAULT_PREVIEW_SHOW_PROGRESS },
27
+ simpleExtraTools: { default: () => [] },
28
+ renderExtraTools: { default: null },
29
+ originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] },
30
+ previewSideNav: { type: [Boolean, String], default: DEFAULT_PREVIEW_SIDE_NAV }
31
+ },
32
+ emits: ["close", "switch", "show"],
33
+ setup(__props, { emit: __emit }) {
34
+ const props = __props;
35
+ const emit = __emit;
36
+ const toolbarCtx = shallowRef(null);
37
+ let resetTimer;
38
+ function captureToolbar(toolbar) {
39
+ toolbarCtx.value = toolbar;
40
+ return "";
41
+ }
42
+ function syncViewerWrapperFlags() {
43
+ const wrapper = document.querySelector(".el-image-viewer__wrapper");
44
+ if (!wrapper) return;
45
+ wrapper.classList.remove(
46
+ "fg-view-img-preview--hide-toolbar",
47
+ "fg-view-img-preview--hide-nav",
48
+ "fg-view-img-preview--has-nav",
49
+ "fg-view-img-preview--has-nav-prev",
50
+ "fg-view-img-preview--has-nav-next"
51
+ );
52
+ if (!props.visible) return;
53
+ if (!showToolbar.value) wrapper.classList.add("fg-view-img-preview--hide-toolbar");
54
+ const sideNav = resolvedSideNav.value;
55
+ if (sideNav === "none") wrapper.classList.add("fg-view-img-preview--hide-nav");
56
+ else if (sideNav === "both") wrapper.classList.add("fg-view-img-preview--has-nav");
57
+ else if (sideNav === "prev") wrapper.classList.add("fg-view-img-preview--has-nav-prev");
58
+ else wrapper.classList.add("fg-view-img-preview--has-nav-next");
59
+ }
60
+ function resetViewerOnce() {
61
+ var _a;
62
+ (_a = toolbarCtx.value) == null ? void 0 : _a.reset();
63
+ }
64
+ function scheduleResetOnce() {
65
+ if (resetTimer) clearTimeout(resetTimer);
66
+ nextTick(() => {
67
+ syncViewerWrapperFlags();
68
+ resetViewerOnce();
69
+ });
70
+ resetTimer = setTimeout(() => {
71
+ syncViewerWrapperFlags();
72
+ resetViewerOnce();
73
+ }, 50);
74
+ }
75
+ function centerBrokenViewerImage() {
76
+ const img = document.querySelector(".el-image-viewer__wrapper .el-image-viewer__img");
77
+ if (!img || !img.complete) return;
78
+ const broken = img.naturalWidth === 0 || img.naturalHeight === 0;
79
+ if (!broken) return;
80
+ img.classList.add("fg-view-img-preview__img--broken");
81
+ img.style.left = "50%";
82
+ img.style.top = "50%";
83
+ img.style.transform = "translate(-50%, -50%) scale(1)";
84
+ }
85
+ function clearBrokenViewerImageStyles() {
86
+ const img = document.querySelector(".el-image-viewer__wrapper .el-image-viewer__img");
87
+ if (!img) return;
88
+ img.classList.remove("fg-view-img-preview__img--broken");
89
+ img.style.removeProperty("left");
90
+ img.style.removeProperty("top");
91
+ img.style.removeProperty("transform");
92
+ }
93
+ function bindViewerImageEvents() {
94
+ const img = document.querySelector(".el-image-viewer__wrapper .el-image-viewer__img");
95
+ if (!img) return;
96
+ const onLoad = () => {
97
+ nextTick(() => {
98
+ clearBrokenViewerImageStyles();
99
+ scheduleResetOnce();
100
+ });
101
+ };
102
+ const onError = () => {
103
+ nextTick(centerBrokenViewerImage);
104
+ };
105
+ if (img.complete) {
106
+ if (img.naturalWidth === 0 || img.naturalHeight === 0) onError();
107
+ else onLoad();
108
+ return;
109
+ }
110
+ img.addEventListener("load", onLoad, { once: true });
111
+ img.addEventListener("error", onError, { once: true });
112
+ }
113
+ function handleSwitch(index) {
114
+ emit("switch", index);
115
+ nextTick(() => {
116
+ syncViewerWrapperFlags();
117
+ clearBrokenViewerImageStyles();
118
+ bindViewerImageEvents();
119
+ scheduleResetOnce();
120
+ });
121
+ }
122
+ watch(
123
+ () => props.visible,
124
+ (visible, wasVisible) => {
125
+ if (!visible) {
126
+ toolbarCtx.value = null;
127
+ if (resetTimer) clearTimeout(resetTimer);
128
+ syncViewerWrapperFlags();
129
+ return;
130
+ }
131
+ if (!wasVisible) {
132
+ emit("show", {
133
+ index: props.initialIndex,
134
+ urlList: [...props.urlList]
135
+ });
136
+ }
137
+ nextTick(() => {
138
+ syncViewerWrapperFlags();
139
+ bindViewerImageEvents();
140
+ scheduleResetOnce();
141
+ });
142
+ }
143
+ );
144
+ const showToolbar = computed(
145
+ () => props.originalToolbar.length > 0 || props.simpleExtraTools.length > 0 || !!props.renderExtraTools
146
+ );
147
+ const resolvedSideNav = computed(
148
+ () => resolvePreviewSideNav(
149
+ props.previewSideNav,
150
+ props.urlList.length,
151
+ props.originalToolbar,
152
+ props.simpleExtraTools.length > 0 || !!props.renderExtraTools
153
+ )
154
+ );
155
+ watch(
156
+ [showToolbar, resolvedSideNav, () => props.urlList.length],
157
+ () => {
158
+ if (props.visible) nextTick(syncViewerWrapperFlags);
159
+ }
160
+ );
161
+ const toolbarStyle = computed(() => ({
162
+ "--fg-view-img-toolbar-bg": props.toolbarBgColor,
163
+ "--fg-view-img-toolbar-color": props.toolbarIconColor
164
+ }));
165
+ const renderExtraToolsComponent = computed(() => {
166
+ if (!props.renderExtraTools) return null;
167
+ return {
168
+ render: () => props.renderExtraTools
169
+ };
170
+ });
171
+ const toolbarActions = {
172
+ prev: {
173
+ icon: Back,
174
+ title: "上一张",
175
+ handler: ({ prev }) => prev()
176
+ },
177
+ next: {
178
+ icon: Right,
179
+ title: "下一张",
180
+ handler: ({ next }) => next()
181
+ },
182
+ fistImg: {
183
+ icon: DArrowLeft,
184
+ title: "第一张",
185
+ handler: ({ setActiveItem }) => setActiveItem(0)
186
+ },
187
+ lastImg: {
188
+ icon: DArrowRight,
189
+ title: "最后一张",
190
+ handler: ({ setActiveItem }) => setActiveItem(Math.max(props.urlList.length - 1, 0))
191
+ },
192
+ zoomOut: {
193
+ icon: ZoomOut,
194
+ title: "缩小",
195
+ handler: ({ actions }) => actions("zoomOut")
196
+ },
197
+ zoomIn: {
198
+ icon: ZoomIn,
199
+ title: "放大",
200
+ handler: ({ actions }) => actions("zoomIn")
201
+ },
202
+ anticlockwise: {
203
+ icon: RefreshLeft,
204
+ title: "逆时针",
205
+ handler: ({ actions }) => actions("anticlockwise")
206
+ },
207
+ clockwise: {
208
+ icon: RefreshRight,
209
+ title: "顺时针",
210
+ handler: ({ actions }) => actions("clockwise")
211
+ },
212
+ reset: {
213
+ icon: Refresh,
214
+ title: "重置",
215
+ handler: ({ reset }) => reset()
216
+ }
217
+ };
218
+ function buildToolParams(toolbar) {
219
+ var _a;
220
+ return {
221
+ url: (_a = props.urlList[toolbar.activeIndex]) != null ? _a : "",
222
+ index: toolbar.activeIndex,
223
+ actions: toolbar.actions,
224
+ reset: toolbar.reset,
225
+ prev: toolbar.prev,
226
+ next: toolbar.next,
227
+ setActiveItem: toolbar.setActiveItem
228
+ };
229
+ }
230
+ function handleSimpleToolClick(tool, toolbar) {
231
+ toolbarCtx.value = toolbar;
232
+ tool.handler(buildToolParams(toolbar));
233
+ }
234
+ function hasToolbarAction(toolKey) {
235
+ return !!toolbarActions[toolKey];
236
+ }
237
+ function getToolbarTitle(toolKey) {
238
+ var _a, _b;
239
+ return (_b = (_a = toolbarActions[toolKey]) == null ? void 0 : _a.title) != null ? _b : "";
240
+ }
241
+ function getToolbarIcon(toolKey) {
242
+ var _a;
243
+ return (_a = toolbarActions[toolKey]) == null ? void 0 : _a.icon;
244
+ }
245
+ function runToolbarAction(toolKey, toolbar) {
246
+ var _a;
247
+ toolbarCtx.value = toolbar;
248
+ (_a = toolbarActions[toolKey]) == null ? void 0 : _a.handler(toolbar);
249
+ }
250
+ function handleClose() {
251
+ emit("close");
252
+ }
253
+ return (_ctx, _cache) => {
254
+ return __props.visible ? (openBlock(), createBlock(unref(ElImageViewer), {
255
+ key: 0,
256
+ "url-list": __props.urlList,
257
+ "initial-index": __props.initialIndex,
258
+ infinite: __props.infinite,
259
+ "z-index": __props.zIndex,
260
+ "hide-on-click-modal": __props.hideOnClickModal,
261
+ "close-on-press-escape": __props.closeOnPressEscape,
262
+ teleported: __props.teleported,
263
+ "zoom-rate": __props.zoomRate,
264
+ scale: __props.scale,
265
+ "min-scale": __props.minScale,
266
+ "max-scale": __props.maxScale,
267
+ "show-progress": __props.showProgress,
268
+ onClose: handleClose,
269
+ onSwitch: handleSwitch
270
+ }, {
271
+ toolbar: withCtx((toolbar) => [
272
+ createElementVNode("div", _hoisted_1, toDisplayString(captureToolbar(toolbar)), 1),
273
+ showToolbar.value ? (openBlock(), createElementBlock("div", {
274
+ key: 0,
275
+ class: "fg-view-img-preview__toolbar",
276
+ style: normalizeStyle(toolbarStyle.value)
277
+ }, [
278
+ (openBlock(true), createElementBlock(Fragment, null, renderList(__props.originalToolbar, (toolKey) => {
279
+ return openBlock(), createElementBlock(Fragment, { key: toolKey }, [
280
+ hasToolbarAction(toolKey) ? (openBlock(), createBlock(unref(ElIcon), {
281
+ key: 0,
282
+ class: "fg-view-img-preview__action",
283
+ title: getToolbarTitle(toolKey),
284
+ onClick: ($event) => runToolbarAction(toolKey, toolbar)
285
+ }, {
286
+ default: withCtx(() => [
287
+ (openBlock(), createBlock(resolveDynamicComponent(getToolbarIcon(toolKey))))
288
+ ]),
289
+ _: 2
290
+ }, 1032, ["title", "onClick"])) : createCommentVNode("", true)
291
+ ], 64);
292
+ }), 128)),
293
+ (openBlock(true), createElementBlock(Fragment, null, renderList(__props.simpleExtraTools, (tool) => {
294
+ return openBlock(), createBlock(unref(ElIcon), {
295
+ key: tool.label,
296
+ class: "fg-view-img-preview__action",
297
+ title: tool.label,
298
+ onClick: ($event) => handleSimpleToolClick(tool, toolbar)
299
+ }, {
300
+ default: withCtx(() => [
301
+ (openBlock(), createBlock(resolveDynamicComponent(tool.icon)))
302
+ ]),
303
+ _: 2
304
+ }, 1032, ["title", "onClick"]);
305
+ }), 128)),
306
+ __props.renderExtraTools ? (openBlock(), createBlock(resolveDynamicComponent(renderExtraToolsComponent.value), { key: 0 })) : createCommentVNode("", true)
307
+ ], 4)) : createCommentVNode("", true)
308
+ ]),
309
+ _: 1
310
+ }, 8, ["url-list", "initial-index", "infinite", "z-index", "hide-on-click-modal", "close-on-press-escape", "teleported", "zoom-rate", "scale", "min-scale", "max-scale", "show-progress"])) : createCommentVNode("", true);
311
+ };
312
+ }
313
+ });
314
+ export {
315
+ _sfc_main as _
316
+ };
@@ -38,7 +38,7 @@ var __async = (__this, __arguments, generator) => {
38
38
  });
39
39
  };
40
40
  import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./_commonjsHelpers-DnzVkjQg.js";
41
- import { c as commonjsRequire, r as requireCryptoBrowserify } from "./index-DzdLpetc.js";
41
+ import { c as commonjsRequire, r as requireCryptoBrowserify } from "./index-BtQgIf7F.js";
42
42
  import { ElMessage } from "element-plus";
43
43
  var cryptoJs$1 = { exports: {} };
44
44
  var core$1 = { exports: {} };
@@ -1,4 +1,4 @@
1
- import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-CM8FxFLJ.js";
1
+ import { _ } from "../../FgCascader.vue_vue_type_style_index_0_lang-CstlYwHs.js";
2
2
  export {
3
3
  _ as FgCascader
4
4
  };
@@ -1,4 +1,4 @@
1
- import { E } from "../../ErrorImage-Ao9kEEUg.js";
1
+ import { F } from "../../ErrorImage-CFVt1ht_.js";
2
2
  export {
3
- E as FgErrorImage
3
+ F as FgErrorImage
4
4
  };
@@ -1,4 +1,4 @@
1
- import { H } from "../../HSelect-BFkWiCFi.js";
1
+ import { H } from "../../HSelect-DgFjd08Y.js";
2
2
  export {
3
3
  H as FgHSelect
4
4
  };
@@ -1,4 +1,4 @@
1
- import { _ } from "../../HSelectAll.vue_vue_type_script_setup_true_lang-BZX7ch2I.js";
1
+ import { _ } from "../../HSelectAll.vue_vue_type_script_setup_true_lang-C6qzdQT-.js";
2
2
  export {
3
3
  _ as FgHSelectAll
4
4
  };
@@ -1,4 +1,4 @@
1
- import { H } from "../../HSelectSJ-DZmtdyjF.js";
1
+ import { H } from "../../HSelectSJ-DOFUzTZV.js";
2
2
  export {
3
3
  H as FgHSelectSJ
4
4
  };
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
2
+ export default _default;