fangguo-component 1.1.4 → 1.2.0

package/dist/components/viewImgPopover/index.d.ts

@@ -0,0 +1 @@
+export { default as FgViewImgPopover } from './ViewImgPopover.vue';

package/dist/components/viewImgPopover/index.js

@@ -0,0 +1,4 @@
+import { V } from "../../ViewImgPopover-b9PDEYbP.js";
+export {
+  V as FgViewImgPopover
+};

package/dist/components/viewImgPreview/ViewImgPreview.vue.d.ts

@@ -0,0 +1,50 @@
+import { OriginalToolbarItem, SimpleCustomTool, PreviewShowPayload } from './types';
+type __VLS_Props = {
+    visible?: boolean;
+    urlList?: string[];
+    initialIndex?: number;
+    infinite?: boolean;
+    zIndex?: number;
+    toolbarBgColor?: string;
+    toolbarIconColor?: string;
+    hideOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    teleported?: boolean;
+    zoomRate?: number;
+    scale?: number;
+    minScale?: number;
+    maxScale?: number;
+    showProgress?: boolean;
+    simpleExtraTools?: SimpleCustomTool[];
+    renderExtraTools?: import('vue').VNode | null;
+    originalToolbar?: OriginalToolbarItem[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    switch: (index: number) => any;
+    show: (payload: PreviewShowPayload) => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwitch?: (index: number) => any;
+    onShow?: (payload: PreviewShowPayload) => any;
+    onClose?: () => any;
+}>, {
+    scale: number;
+    zIndex: number;
+    infinite: boolean;
+    visible: boolean;
+    teleported: boolean;
+    closeOnPressEscape: boolean;
+    hideOnClickModal: boolean;
+    toolbarBgColor: string;
+    toolbarIconColor: string;
+    simpleExtraTools: SimpleCustomTool[];
+    renderExtraTools: import('vue').VNode | null;
+    originalToolbar: OriginalToolbarItem[];
+    zoomRate: number;
+    minScale: number;
+    maxScale: number;
+    showProgress: boolean;
+    initialIndex: number;
+    urlList: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/viewImgPreview/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FgViewImgPreview } from './ViewImgPreview.vue';
+export type { OriginalToolbarItem, SimpleCustomTool, ToolHandlerParams, ViewImgPreviewProps, ViewImgPreviewViewerOptions, PreviewShowPayload, } from './types';
+export { DEFAULT_ORIGINAL_TOOLBAR, DEFAULT_TOOLBAR_BG_COLOR, DEFAULT_TOOLBAR_ICON_COLOR, DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, DEFAULT_PREVIEW_TELEPORTED, DEFAULT_PREVIEW_INFINITE, DEFAULT_PREVIEW_ZOOM_RATE, DEFAULT_PREVIEW_SCALE, DEFAULT_PREVIEW_MIN_SCALE, DEFAULT_PREVIEW_MAX_SCALE, DEFAULT_PREVIEW_SHOW_PROGRESS, } from './types';

package/dist/components/viewImgPreview/index.js

@@ -0,0 +1,17 @@
+import { _ } from "../../ViewImgPreview.vue_vue_type_style_index_0_lang-CYuLovBR.js";
+import { D, a, b, c, d, e, f, g, h, i, j, k } from "../../types-BNFeGRer.js";
+export {
+  D as DEFAULT_ORIGINAL_TOOLBAR,
+  a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE,
+  b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL,
+  c as DEFAULT_PREVIEW_INFINITE,
+  d as DEFAULT_PREVIEW_MAX_SCALE,
+  e as DEFAULT_PREVIEW_MIN_SCALE,
+  f as DEFAULT_PREVIEW_SCALE,
+  g as DEFAULT_PREVIEW_SHOW_PROGRESS,
+  h as DEFAULT_PREVIEW_TELEPORTED,
+  i as DEFAULT_PREVIEW_ZOOM_RATE,
+  j as DEFAULT_TOOLBAR_BG_COLOR,
+  k as DEFAULT_TOOLBAR_ICON_COLOR,
+  _ as FgViewImgPreview
+};

package/dist/components/viewImgPreview/types.d.ts

@@ -0,0 +1,78 @@
+import { Component, VNode } from 'vue';
+import { ImageViewerAction } from 'element-plus';
+export type OriginalToolbarItem = "prev" | "next" | "fistImg" | "lastImg" | "zoomOut" | "zoomIn" | "anticlockwise" | "clockwise" | "reset";
+export interface ToolHandlerParams {
+    /** 当前图片 URL */
+    url: string;
+    /** 当前索引 */
+    index: number;
+    /** 原生 actions 方法，控制缩放旋转 */
+    actions: (action: ImageViewerAction, options?: Record<string, unknown>) => void;
+    /** 重置方法 */
+    reset: () => void;
+    /** 切换到上一张 */
+    prev: () => void;
+    /** 切换到下一张 */
+    next: () => void;
+    /** 切换到指定索引 */
+    setActiveItem: (index: number) => void;
+}
+export interface SimpleCustomTool extends Record<string, unknown> {
+    label: string;
+    icon: Component;
+    handler: (params: ToolHandlerParams) => void;
+}
+export declare const DEFAULT_ORIGINAL_TOOLBAR: OriginalToolbarItem[];
+/** 预览工具栏默认背景色（与 Element Plus ImageViewer 工具栏一致） */
+export declare const DEFAULT_TOOLBAR_BG_COLOR = "#606266";
+/** 预览工具栏默认图标色 */
+export declare const DEFAULT_TOOLBAR_ICON_COLOR = "#ffffff";
+/** ElImageViewer 预览默认：点击遮罩关闭 */
+export declare const DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL = false;
+/** ElImageViewer 预览默认：ESC 关闭 */
+export declare const DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE = true;
+/** ElImageViewer 预览默认：teleport 到 body（与 Element Plus 一致，避免在表格/transform 容器内铺满错位） */
+export declare const DEFAULT_PREVIEW_TELEPORTED = true;
+/** ElImageViewer 预览默认：无限循环 */
+export declare const DEFAULT_PREVIEW_INFINITE = true;
+/** ElImageViewer 预览默认：缩放速率 */
+export declare const DEFAULT_PREVIEW_ZOOM_RATE = 1.2;
+/** ElImageViewer 预览默认：初始缩放 */
+export declare const DEFAULT_PREVIEW_SCALE = 1;
+/** ElImageViewer 预览默认：最小缩放 */
+export declare const DEFAULT_PREVIEW_MIN_SCALE = 0.2;
+/** ElImageViewer 预览默认：最大缩放 */
+export declare const DEFAULT_PREVIEW_MAX_SCALE = 7;
+/** ElImageViewer 预览默认：显示进度 */
+export declare const DEFAULT_PREVIEW_SHOW_PROGRESS = false;
+/** 透传给 ElImageViewer 的预览配置（与 Element Plus ImageViewer 对齐） */
+export type ViewImgPreviewViewerOptions = {
+    hideOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    teleported?: boolean;
+    infinite?: boolean;
+    zIndex?: number;
+    zoomRate?: number;
+    scale?: number;
+    minScale?: number;
+    maxScale?: number;
+    showProgress?: boolean;
+};
+export type ViewImgPreviewProps = ViewImgPreviewViewerOptions & {
+    urlList: string[];
+    initialIndex?: number;
+    /** 预览工具栏背景色 */
+    toolbarBgColor?: string;
+    /** 预览工具栏图标/文字颜色 */
+    toolbarIconColor?: string;
+    simpleExtraTools?: SimpleCustomTool[];
+    renderExtraTools?: VNode | null;
+    originalToolbar?: OriginalToolbarItem[];
+};
+/** 预览层打开时回调参数 */
+export type PreviewShowPayload = {
+    /** 当前展示索引 */
+    index: number;
+    /** 预览图片列表 */
+    urlList: string[];
+};

package/dist/imgViewerStore-C5n16uYa.js

@@ -0,0 +1,241 @@
+import { reactive } from "vue";
+import { 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, i as DEFAULT_PREVIEW_ZOOM_RATE, h as DEFAULT_PREVIEW_TELEPORTED, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, k as DEFAULT_TOOLBAR_ICON_COLOR, j as DEFAULT_TOOLBAR_BG_COLOR, c as DEFAULT_PREVIEW_INFINITE } from "./types-BNFeGRer.js";
+const PREVIEW_BASE_Z_INDEX = 2e3;
+function getDialogZindex() {
+  const dialogs = Array.from(document.querySelectorAll(".el-overlay"));
+  let maxZIndex = 0;
+  dialogs.forEach((dialog) => {
+    const zIndex = Number.parseInt(window.getComputedStyle(dialog).zIndex, 10);
+    if (zIndex > maxZIndex) maxZIndex = zIndex;
+  });
+  return Math.max(maxZIndex, PREVIEW_BASE_Z_INDEX);
+}
+const state = reactive({
+  hostActivated: false,
+  showImgPreview: false,
+  previewImgList: [],
+  defImgPreviewIndex: 0,
+  infinite: DEFAULT_PREVIEW_INFINITE,
+  zIndex: 2e3,
+  toolbarBgColor: DEFAULT_TOOLBAR_BG_COLOR,
+  toolbarIconColor: DEFAULT_TOOLBAR_ICON_COLOR,
+  hideOnClickModal: DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL,
+  closeOnPressEscape: DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE,
+  teleported: DEFAULT_PREVIEW_TELEPORTED,
+  zoomRate: DEFAULT_PREVIEW_ZOOM_RATE,
+  scale: DEFAULT_PREVIEW_SCALE,
+  minScale: DEFAULT_PREVIEW_MIN_SCALE,
+  maxScale: DEFAULT_PREVIEW_MAX_SCALE,
+  showProgress: DEFAULT_PREVIEW_SHOW_PROGRESS,
+  simpleExtraTools: [],
+  renderExtraTools: null,
+  originalToolbar: [...DEFAULT_ORIGINAL_TOOLBAR],
+  onShow: null,
+  onClose: null,
+  onSwitch: null
+});
+function createImgViewerStore() {
+  return {
+    // 预览宿主是否已经被激活过
+    get hostActivated() {
+      return state.hostActivated;
+    },
+    // 显示预览层
+    get showImgPreview() {
+      return state.showImgPreview;
+    },
+    // 预览图片列表
+    get previewImgList() {
+      return state.previewImgList;
+    },
+    // 默认预览图片索引
+    get defImgPreviewIndex() {
+      return state.defImgPreviewIndex;
+    },
+    // 无限循环
+    get infinite() {
+      return state.infinite;
+    },
+    // 预览层 z-index
+    get zIndex() {
+      return state.zIndex;
+    },
+    // 工具栏背景色
+    get toolbarBgColor() {
+      return state.toolbarBgColor;
+    },
+    // 工具栏图标颜色
+    get toolbarIconColor() {
+      return state.toolbarIconColor;
+    },
+    // 点击蒙层关闭
+    get hideOnClickModal() {
+      return state.hideOnClickModal;
+    },
+    // 按下 ESC 关闭
+    get closeOnPressEscape() {
+      return state.closeOnPressEscape;
+    },
+    // 是否使用 teleport
+    get teleported() {
+      return state.teleported;
+    },
+    // 缩放率
+    get zoomRate() {
+      return state.zoomRate;
+    },
+    // 缩放比例
+    get scale() {
+      return state.scale;
+    },
+    // 最小缩放比例
+    get minScale() {
+      return state.minScale;
+    },
+    // 最大缩放比例
+    get maxScale() {
+      return state.maxScale;
+    },
+    // 是否显示进度
+    get showProgress() {
+      return state.showProgress;
+    },
+    // 自定义工具
+    get simpleExtraTools() {
+      return state.simpleExtraTools;
+    },
+    // 自定义工具栏
+    get renderExtraTools() {
+      return state.renderExtraTools;
+    },
+    // 内置工具栏
+    get originalToolbar() {
+      return state.originalToolbar;
+    },
+    /**
+     * 显示预览层
+     * @param options 配置选项
+     * @param options.previewImgList 预览图片列表
+     * @param options.defImgPreviewIndex 默认预览图片索引
+     * @param options.backgroundColor 背景颜色
+     * @param options.toolbarBgColor 工具栏背景颜色
+     * @param options.toolbarIconColor 工具栏图标颜色
+     * @param options.infinite 是否无限循环
+     * @param options.zIndex z-index
+     * @param options.hideOnClickModal 点击蒙层关闭
+     * @param options.closeOnPressEscape 按下 ESC 关闭
+     * @param options.teleported 是否使用 teleport
+     * @param options.zoomRate 缩放率
+     * @param options.scale 缩放比例
+     * @param options.minScale 最小缩放比例
+     * @param options.maxScale 最大缩放比例
+     * @param options.showProgress 是否显示进度
+     * @param options.simpleExtraTools 自定义工具
+     * @param options.renderExtraTools 自定义工具栏
+     * @param options.originalToolbar 内置工具栏
+     * @param options.onShow 预览层打开时回调
+     * @param options.onClose 预览层关闭时回调
+     * @param options.onSwitch 预览切换图片时回调
+     */
+    showImgViewer(options = {}) {
+      const {
+        previewImgList = [],
+        defImgPreviewIndex = 0,
+        backgroundColor = "",
+        toolbarBgColor,
+        toolbarIconColor,
+        infinite = DEFAULT_PREVIEW_INFINITE,
+        zIndex,
+        hideOnClickModal = DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL,
+        closeOnPressEscape = DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE,
+        teleported = DEFAULT_PREVIEW_TELEPORTED,
+        zoomRate = DEFAULT_PREVIEW_ZOOM_RATE,
+        scale = DEFAULT_PREVIEW_SCALE,
+        minScale = DEFAULT_PREVIEW_MIN_SCALE,
+        maxScale = DEFAULT_PREVIEW_MAX_SCALE,
+        showProgress = DEFAULT_PREVIEW_SHOW_PROGRESS,
+        simpleExtraTools = [],
+        renderExtraTools = null,
+        originalToolbar = [...DEFAULT_ORIGINAL_TOOLBAR],
+        onShow,
+        onClose,
+        onSwitch
+      } = options;
+      state.zIndex = zIndex != null ? zIndex : getDialogZindex() + 1;
+      if (previewImgList.length) {
+        state.previewImgList = previewImgList;
+      }
+      if (defImgPreviewIndex != null) {
+        state.defImgPreviewIndex = defImgPreviewIndex;
+      }
+      const bgColor = toolbarBgColor || backgroundColor;
+      state.toolbarBgColor = bgColor || DEFAULT_TOOLBAR_BG_COLOR;
+      state.toolbarIconColor = toolbarIconColor || DEFAULT_TOOLBAR_ICON_COLOR;
+      state.infinite = infinite;
+      state.hideOnClickModal = hideOnClickModal;
+      state.closeOnPressEscape = closeOnPressEscape;
+      state.teleported = teleported;
+      state.zoomRate = zoomRate;
+      state.scale = scale;
+      state.minScale = minScale;
+      state.maxScale = maxScale;
+      state.showProgress = showProgress;
+      state.simpleExtraTools = simpleExtraTools;
+      state.renderExtraTools = renderExtraTools;
+      state.originalToolbar = originalToolbar;
+      state.onShow = onShow != null ? onShow : null;
+      state.onClose = onClose != null ? onClose : null;
+      state.onSwitch = onSwitch != null ? onSwitch : null;
+      state.hostActivated = true;
+      state.showImgPreview = true;
+    },
+    // 隐藏预览层
+    hideImgViewer() {
+      state.showImgPreview = false;
+      state.onShow = null;
+      state.onClose = null;
+      state.onSwitch = null;
+    },
+    /**
+     * 设置默认预览图片索引
+     * @param defImgPreviewIndex 目标索引
+     */
+    setDefImgPreviewIndex(defImgPreviewIndex) {
+      state.defImgPreviewIndex = defImgPreviewIndex;
+    },
+    /**
+     * 设置是否无限循环
+     * @param bol 是否无限循环
+     */
+    setInfinite(bol) {
+      state.infinite = bol;
+    },
+    /**
+     * 设置预览层 z-index
+     * @param index z-index 数值
+     */
+    setZindex(index) {
+      state.zIndex = index;
+    }
+  };
+}
+let storeInstance = null;
+function useImgViewerStore() {
+  if (!storeInstance) {
+    storeInstance = createImgViewerStore();
+  }
+  return storeInstance;
+}
+function ImgViewerStore() {
+  return useImgViewerStore();
+}
+function useImgViewerState() {
+  return state;
+}
+export {
+  ImgViewerStore as I,
+  PREVIEW_BASE_Z_INDEX as P,
+  useImgViewerStore as a,
+  getDialogZindex as g,
+  useImgViewerState as u
+};