vft 0.0.50 → 0.0.53

package/es/components/image-viewer/image-viewer.vue2.js

@@ -0,0 +1,296 @@
+import { defineComponent as Z, ref as h, effectScope as ee, computed as p, watch as R, nextTick as te, onMounted as ne, openBlock as z, createBlock as oe, Teleport as ae, createVNode as d, Transition as se, withCtx as ie, createElementVNode as c, normalizeClass as l, unref as e, normalizeStyle as S, withModifiers as le, createElementBlock as E, Fragment as V, createCommentVNode as re, renderList as ce, withDirectives as ue, vShow as fe, renderSlot as de } from "vue";
+import { isNumber as H, useEventListener as I } from "@vueuse/core";
+import { throttle as T } from "lodash";
+import { useNamespace as me } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import { useZIndex as ve } from "../../hooks/use-z-index/index.js";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { EVENT_CODE as w } from "@vft/constants";
+import { VftIcon as v } from "../icon/index.js";
+const ke = ["src"], s = (
+  /* hoist-static*/
+  me("image-viewer")
+), be = Z({
+  name: s.b()
+}), Xe = /* @__PURE__ */ Z({
+  ...be,
+  props: {
+    urlList: { default: [] },
+    zIndex: null,
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: !0 },
+    hideOnClickModal: { type: Boolean, default: !1 },
+    teleported: { type: Boolean, default: !1 },
+    closeOnPressEscape: { type: Boolean, default: !0 },
+    zoomRate: { default: 1.2 }
+  },
+  emits: {
+    close: () => !0,
+    switch: (o) => H(o)
+  },
+  setup(o, { expose: A, emit: X }) {
+    const { nextZIndex: P } = ve(), C = h(), Y = h([]), O = ee(), b = h(!0), m = h(o.initialIndex), i = h({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: !1
+    }), W = p(() => o.urlList.length <= 1), $ = p(() => m.value === 0), M = p(() => m.value === o.urlList.length - 1), j = p(() => o.urlList[m.value]), q = p(() => {
+      const { scale: t, deg: n, offsetX: a, offsetY: r, enableTransition: x } = i.value;
+      let u = a / t, f = r / t;
+      switch (n % 360) {
+        case 90:
+        case -270:
+          [u, f] = [f, -u];
+          break;
+        case 180:
+        case -180:
+          [u, f] = [-u, -f];
+          break;
+        case 270:
+        case -90:
+          [u, f] = [-f, u];
+          break;
+      }
+      const g = {
+        transform: `scale(${t}) rotate(${n}deg) translate(${u}px, ${f}px)`,
+        transition: x ? "transform .3s" : ""
+      };
+      return g.maxWidth = g.maxHeight = "100%", g;
+    }), G = p(() => H(o.zIndex) ? o.zIndex : P());
+    function y() {
+      K(), X("close");
+    }
+    function J() {
+      const t = T((a) => {
+        switch (a.code) {
+          case w.esc:
+            o.closeOnPressEscape && y();
+            break;
+          case w.space:
+            B();
+            break;
+          case w.left:
+            D();
+            break;
+          case w.up:
+            k("zoomIn");
+            break;
+          case w.right:
+            F();
+            break;
+          case w.down:
+            k("zoomOut");
+            break;
+        }
+      }), n = T((a) => {
+        const r = a.deltaY || a.deltaX;
+        k(r < 0 ? "zoomIn" : "zoomOut", {
+          zoomRate: o.zoomRate,
+          enableTransition: !1
+        });
+      });
+      O.run(() => {
+        I(document, "keydown", t), I(document, "wheel", n);
+      });
+    }
+    function K() {
+      O.stop();
+    }
+    function Q() {
+      b.value = !1;
+    }
+    function U(t) {
+      b.value = !1, t.target.alt = "加载失败";
+    }
+    function _(t) {
+      if (b.value || t.button !== 0 || !C.value)
+        return;
+      i.value.enableTransition = !1;
+      const { offsetX: n, offsetY: a } = i.value, r = t.pageX, x = t.pageY, u = T((g) => {
+        i.value = {
+          ...i.value,
+          offsetX: n + g.pageX - r,
+          offsetY: a + g.pageY - x
+        };
+      }), f = I(document, "mousemove", u);
+      I(document, "mouseup", () => {
+        f();
+      }), t.preventDefault();
+    }
+    function N() {
+      i.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: !1
+      };
+    }
+    function B() {
+      b.value || N();
+    }
+    function L(t) {
+      const n = o.urlList.length;
+      m.value = (t + n) % n;
+    }
+    function D() {
+      $.value && !o.infinite || L(m.value - 1);
+    }
+    function F() {
+      M.value && !o.infinite || L(m.value + 1);
+    }
+    function k(t, n = {}) {
+      if (b.value)
+        return;
+      const { rotateDeg: a, enableTransition: r } = {
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...n
+      };
+      switch (t) {
+        case "zoomOut":
+          i.value.scale > 0.2 && (i.value.scale = Number.parseFloat(
+            (i.value.scale / o.zoomRate).toFixed(3)
+          ));
+          break;
+        case "zoomIn":
+          i.value.scale < 7 && (i.value.scale = Number.parseFloat(
+            (i.value.scale * o.zoomRate).toFixed(3)
+          ));
+          break;
+        case "clockwise":
+          i.value.deg += a;
+          break;
+        case "anticlockwise":
+          i.value.deg -= a;
+          break;
+      }
+      i.value.enableTransition = r;
+    }
+    return R(j, () => {
+      te(() => {
+        const t = Y.value[0];
+        t != null && t.complete || (b.value = !0);
+      });
+    }), R(m, (t) => {
+      N(), X("switch", t);
+    }), ne(() => {
+      var t, n;
+      J(), (n = (t = C.value) == null ? void 0 : t.focus) == null || n.call(t);
+    }), A({
+      /** @description manually switch image */
+      setActiveItem: L
+    }), (t, n) => (z(), oe(ae, {
+      to: "body",
+      disabled: !o.teleported
+    }, [
+      d(se, {
+        name: "viewer-fade",
+        appear: ""
+      }, {
+        default: ie(() => [
+          c("div", {
+            ref_key: "wrapper",
+            ref: C,
+            tabindex: -1,
+            class: l(e(s).e("wrapper")),
+            style: S({ zIndex: e(G) })
+          }, [
+            c("div", {
+              class: l(e(s).e("mask")),
+              onClick: n[0] || (n[0] = le((a) => o.hideOnClickModal && y(), ["self"]))
+            }, null, 2),
+            c("span", {
+              class: l([e(s).e("btn"), e(s).e("close")]),
+              onClick: y
+            }, [
+              d(e(v), { icon: "ico-ep:close" })
+            ], 2),
+            e(W) ? re("", !0) : (z(), E(V, { key: 0 }, [
+              c("span", {
+                class: l([
+                  e(s).e("btn"),
+                  e(s).e("prev"),
+                  e(s).is("disabled", !o.infinite && e($))
+                ]),
+                onClick: D
+              }, [
+                d(e(v), { icon: "ico-ep:arrow-left" })
+              ], 2),
+              c("span", {
+                class: l([
+                  e(s).e("btn"),
+                  e(s).e("next"),
+                  e(s).is("disabled", !o.infinite && e(M))
+                ]),
+                onClick: F
+              }, [
+                d(e(v), { icon: "ico-ep:arrow-right" })
+              ], 2)
+            ], 64)),
+            c("div", {
+              class: l([e(s).e("btn"), e(s).e("actions")])
+            }, [
+              c("div", {
+                class: l(e(s).e("actions__inner"))
+              }, [
+                d(e(v), {
+                  icon: "ico-ep:zoom-out",
+                  onClick: n[1] || (n[1] = (a) => k("zoomOut"))
+                }),
+                d(e(v), {
+                  icon: "ico-ep:zoom-in",
+                  onClick: n[2] || (n[2] = (a) => k("zoomIn"))
+                }),
+                c("i", {
+                  class: l(e(s).e("actions__divider"))
+                }, null, 2),
+                d(e(v), {
+                  icon: "ico-ep:scale-to-original",
+                  onClick: B
+                }),
+                c("i", {
+                  class: l(e(s).e("actions__divider"))
+                }, null, 2),
+                d(e(v), {
+                  icon: "ico-ep:refresh-left",
+                  onClick: n[3] || (n[3] = (a) => k("anticlockwise"))
+                }),
+                d(e(v), {
+                  icon: "ico-ep:refresh-right",
+                  onClick: n[4] || (n[4] = (a) => k("clockwise"))
+                })
+              ], 2)
+            ], 2),
+            c("div", {
+              class: l(e(s).e("canvas"))
+            }, [
+              (z(!0), E(V, null, ce(o.urlList, (a, r) => ue((z(), E("img", {
+                ref_for: !0,
+                ref: (x) => Y.value[r] = x,
+                key: a,
+                src: a,
+                style: S(e(q)),
+                class: l(e(s).e("img")),
+                onLoad: Q,
+                onError: U,
+                onMousedown: _
+              }, null, 46, ke)), [
+                [fe, r === m.value]
+              ])), 128))
+            ], 2),
+            de(t.$slots, "default")
+          ], 6)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  Xe as default
+};

package/es/components/image-viewer/index.d.ts

@@ -0,0 +1,77 @@
+export declare const VftImageViewer: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    urlList: {
+        type: import("vue").PropType<string[] | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    initialIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    infinite: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    zoomRate: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+}, {
+    setActiveItem: (index: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => true;
+    switch: (index: number) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    urlList: {
+        type: import("vue").PropType<string[] | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    initialIndex: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+    infinite: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeOnPressEscape: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    zoomRate: {
+        type: import("vue").PropType<number | undefined>;
+        required: false;
+    };
+}>> & {
+    onClose?: (() => any) | undefined;
+    onSwitch?: ((index: number) => any) | undefined;
+}, {}>> & Record<string, any>;
+export default VftImageViewer;
+export * from './types';

package/es/components/image-viewer/index.js

@@ -0,0 +1,12 @@
+import { withInstall as t } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import m from "./image-viewer.vue2.js";
+const s = t(m);
+export {
+  s as VftImageViewer,
+  s as default
+};

package/es/components/image-viewer/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-image-viewer.css";

package/es/components/image-viewer/style/index.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/image-viewer.scss";

package/es/components/image-viewer/types.d.ts

@@ -0,0 +1 @@
+export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';

package/es/components/index.d.ts

@@ -46,6 +46,7 @@ export * from './virtual-list';
 export * from './select-v2';
 export * from './verify-code';
 export * from './table';
+export * from './image-viewer';
 export * from './md-container';
 export * from './md-comment';
 export * from './md-tabs';

package/es/components/index.js

@@ -0,0 +1,215 @@
+import { VftDivider as r } from "./divider/index.js";
+import { VftIcon as f, VftIcon as p } from "./icon/index.js";
+import { VftAvatar as x } from "./avatar/index.js";
+import { VftEmpty as i } from "./empty/index.js";
+import { VftResult as n } from "./result/index.js";
+import { VftTabPane as d, VftTabs as u } from "./tabs/index.js";
+import { VftPopper as c } from "./popper/index.js";
+import { VftCollapseTransition as g } from "./collapse-transition/index.js";
+import { VftTooltip as b } from "./tooltip/index.js";
+import { VftPopover as D } from "./popover/index.js";
+import { VftMenu as M, VftMenuItem as T, VftMenuItemGroup as S, VftSubMenu as v } from "./menu/index.js";
+import { createContextMenu as G, destroyContextMenu as w } from "./context-menu/createContextMenu.js";
+import { useContextMenu as z } from "./context-menu/useContextMenu.js";
+import { VftMultipleTabs as h } from "./multiple-tabs/index.js";
+import { VftHeaderLayout as k } from "./header-layout/index.js";
+import { VftFooterLayout as B } from "./footer-layout/index.js";
+import { VftIframeLayout as O } from "./iframe-layout/index.js";
+import { VftRouterViewContent as _ } from "./router-view-content/index.js";
+import { VftLogo as j } from "./logo/index.js";
+import { VftBackTop as J } from "./back-top/index.js";
+import { VftConfigProvider as Y } from "./config-provider/index.js";
+import { VftDescriptions as U, VftDescriptionsItem as X } from "./descriptions/index.js";
+import { VftFullScreen as $ } from "./full-screen/index.js";
+import { VftIconText as to } from "./icon-text/index.js";
+import { VftImage as eo } from "./image/index.js";
+import { VftInput as po } from "./input/index.js";
+import { VftLink as xo } from "./link/index.js";
+import { VftPagination as io } from "./pagination/index.js";
+import { VftTag as no } from "./tag/index.js";
+import { VftSideMenu as uo } from "./side-menu/index.js";
+import { VftQrcode as co } from "./qrcode/index.js";
+import { VftOverlay as go } from "./overlay/index.js";
+import { VftClamp as bo } from "./clamp/index.js";
+import { VftClampToggle as Do } from "./clamp-toggle/index.js";
+import { VftPageWrapper as Mo } from "./page-wrapper/index.js";
+import { VftException as So } from "./exception/index.js";
+import { VftSearch as Lo } from "./search/index.js";
+import { VftForm as wo, VftFormItem as Ko } from "./form/index.js";
+import { VftButton as Fo, VftButtonGroup as ho } from "./button/index.js";
+import { VftCheckbox as ko, VftCheckboxButton as Ao, VftCheckboxGroup as Bo } from "./checkbox/index.js";
+import { VftRadio as Oo, VftRadioButton as No, VftRadioGroup as _o } from "./radio/index.js";
+import { VftSwitch as jo } from "./switch/index.js";
+import { VftColorPicker as Jo } from "./color-picker/index.js";
+import { VftScrollbar as Yo } from "./scrollbar/index.js";
+import { VftDropdown as Uo, VftDropdownItem as Xo, VftDropdownMenu as Zo } from "./dropdown/index.js";
+import { default as ot } from "./virtual-list/components/fixed-size-list.js";
+import { default as rt } from "./virtual-list/components/dynamic-size-list.js";
+import { default as ft } from "./virtual-list/components/fixed-size-grid.js";
+import { default as mt } from "./virtual-list/components/dynamic-size-grid.js";
+import { virtualizedGridProps as at, virtualizedListProps as it, virtualizedProps as Vt, virtualizedScrollbarProps as nt } from "./virtual-list/props.js";
+import { VftSelectV2 as dt } from "./select-v2/index.js";
+import { VftVerifyCode as lt } from "./verify-code/index.js";
+import { VftTable as Ct } from "./table/index.js";
+import { VftImageViewer as It } from "./image-viewer/index.js";
+import { VftMdContainer as yt } from "./md-container/index.js";
+import { VftMdComment as Pt } from "./md-comment/index.js";
+import { VftMdTabs as Tt } from "./md-tabs/index.js";
+import { VftMdVuePlayground as vt } from "./md-vue-playground/index.js";
+import { VftMdCodeDemo as Gt } from "./md-code-demo/index.js";
+import { VftMdCodeTabs as Kt } from "./md-code-tabs/index.js";
+import { VftMessage as Ft, VftMessage as ht } from "./message/index.js";
+import { VftLoading as kt } from "./loading/index.js";
+import { EmptyEnum as Bt } from "./empty/constants.js";
+import { TabsRootContextKey as Ot } from "./tabs/types.js";
+import { default as _t } from "./popper/arrow.vue2.js";
+import { default as jt } from "./popper/trigger.vue2.js";
+import { default as Jt } from "./popper/content.vue2.js";
+import { useTabDropdown as Yt } from "./multiple-tabs/use/use-tab-dropdown.js";
+import { initAffixTabs as Ut, useTabsDrag as Xt } from "./multiple-tabs/use/use-multiple-tabs.js";
+import { configProviderContextKey as $t, messageConfig as or } from "./config-provider/constants.js";
+import { provideGlobalConfig as rr, useGlobalComponentSettings as er, useGlobalConfig as fr } from "./config-provider/hooks/use-global-config.js";
+import { usePagination as mr, vftPaginationKey as xr } from "./pagination/usePagination.js";
+import { formItemValidateStates as ir } from "./form/types.js";
+import { formContextKey as nr, formItemContextKey as sr } from "./form/constants.js";
+import { useDisabled as ur, useFormDisabled as lr, useFormSize as cr, useSize as Cr } from "./form/hooks/use-form-common-props.js";
+import { useFormItem as Ir, useFormItemInputId as br } from "./form/hooks/use-form-item.js";
+import { buttonGroupContextKey as Dr } from "./button/constants.js";
+import { checkboxGroupContextKey as Mr } from "./checkbox/constants.js";
+import { radioGroupKey as Sr } from "./radio/constants.js";
+import { BAR_MAP as Lr, GAP as Gr, renderThumbStyle as wr } from "./scrollbar/util.js";
+import { scrollbarContextKey as zr } from "./scrollbar/constants.js";
+import { DROPDOWN_INJECTION_KEY as hr } from "./dropdown/tokens.js";
+import { VftCollection as kr, VftCollectionItem as Ar } from "./dropdown/types.js";
+import { OnlyChild as Er } from "./slot/only-child.js";
+import { default as Nr } from "./dropdown/dropdown-item-impl.vue.js";
+import { selectV2InjectionKey as Wr } from "./select-v2/token.js";
+import { messageDefaults as Hr, messageTypes as Jr } from "./message/types.js";
+import { vLoading as Yr, createLoadingDirective as qr, vLoading as Ur } from "./loading/directive.js";
+import { Loading as Zr } from "./loading/service.js";
+export {
+  Lr as BAR_MAP,
+  hr as DROPDOWN_INJECTION_KEY,
+  mt as DynamicSizeGrid,
+  rt as DynamicSizeList,
+  Bt as EmptyEnum,
+  ft as FixedSizeGrid,
+  ot as FixedSizeList,
+  Gr as GAP,
+  f as Icon,
+  Ft as Message,
+  Ot as TabsRootContextKey,
+  x as VftAvatar,
+  J as VftBackTop,
+  Fo as VftButton,
+  ho as VftButtonGroup,
+  ko as VftCheckbox,
+  Ao as VftCheckboxButton,
+  Bo as VftCheckboxGroup,
+  bo as VftClamp,
+  Do as VftClampToggle,
+  g as VftCollapseTransition,
+  Jo as VftColorPicker,
+  Y as VftConfigProvider,
+  U as VftDescriptions,
+  X as VftDescriptionsItem,
+  r as VftDivider,
+  Uo as VftDropdown,
+  kr as VftDropdownCollection,
+  Ar as VftDropdownCollectionItem,
+  Xo as VftDropdownItem,
+  Nr as VftDropdownItemImpl,
+  Zo as VftDropdownMenu,
+  i as VftEmpty,
+  So as VftException,
+  B as VftFooterLayout,
+  wo as VftForm,
+  Ko as VftFormItem,
+  $ as VftFullScreen,
+  k as VftHeaderLayout,
+  p as VftIcon,
+  to as VftIconText,
+  O as VftIframeLayout,
+  eo as VftImage,
+  It as VftImageViewer,
+  po as VftInput,
+  xo as VftLink,
+  kt as VftLoading,
+  Yr as VftLoadingDirective,
+  Zr as VftLoadingService,
+  j as VftLogo,
+  Gt as VftMdCodeDemo,
+  Kt as VftMdCodeTabs,
+  Pt as VftMdComment,
+  yt as VftMdContainer,
+  Tt as VftMdTabs,
+  vt as VftMdVuePlayground,
+  M as VftMenu,
+  T as VftMenuItem,
+  S as VftMenuItemGroup,
+  ht as VftMessage,
+  h as VftMultipleTabs,
+  Er as VftOnlyChild,
+  go as VftOverlay,
+  Mo as VftPageWrapper,
+  io as VftPagination,
+  D as VftPopover,
+  c as VftPopper,
+  _t as VftPopperArrow,
+  Jt as VftPopperContent,
+  jt as VftPopperTrigger,
+  co as VftQrcode,
+  Oo as VftRadio,
+  No as VftRadioButton,
+  _o as VftRadioGroup,
+  n as VftResult,
+  _ as VftRouterViewContent,
+  Yo as VftScrollbar,
+  Lo as VftSearch,
+  dt as VftSelectV2,
+  uo as VftSideMenu,
+  v as VftSubMenu,
+  jo as VftSwitch,
+  d as VftTabPane,
+  Ct as VftTable,
+  u as VftTabs,
+  no as VftTag,
+  b as VftTooltip,
+  lt as VftVerifyCode,
+  Dr as buttonGroupContextKey,
+  Mr as checkboxGroupContextKey,
+  $t as configProviderContextKey,
+  G as createContextMenu,
+  qr as createLoadingDirective,
+  w as destroyContextMenu,
+  nr as formContextKey,
+  sr as formItemContextKey,
+  ir as formItemValidateStates,
+  Ut as initAffixTabs,
+  or as messageConfig,
+  Hr as messageDefaults,
+  Jr as messageTypes,
+  rr as provideGlobalConfig,
+  Sr as radioGroupKey,
+  wr as renderThumbStyle,
+  zr as scrollbarContextKey,
+  Wr as selectV2InjectionKey,
+  z as useContextMenu,
+  ur as useDisabled,
+  lr as useFormDisabled,
+  Ir as useFormItem,
+  br as useFormItemInputId,
+  cr as useFormSize,
+  er as useGlobalComponentSettings,
+  fr as useGlobalConfig,
+  mr as usePagination,
+  Cr as useSize,
+  Yt as useTabDropdown,
+  Xt as useTabsDrag,
+  Ur as vLoading,
+  xr as vftPaginationKey,
+  at as virtualizedGridProps,
+  it as virtualizedListProps,
+  Vt as virtualizedProps,
+  nt as virtualizedScrollbarProps
+};