vft 0.0.50 → 0.0.53

package/es/components/menu/use-menu-css-var.js

@@ -0,0 +1,19 @@
+import { computed as t } from "vue";
+import { useNamespace as m } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+const d = (p, r) => {
+  const o = m("menu");
+  return t(() => o.cssVarBlock({
+    level: `${r}`
+  }));
+};
+export {
+  d as useMenuCssVar
+};

package/es/components/message/message.vue.d.ts

@@ -1,6 +1,22 @@
 import type { PropType as __PropType } from 'vue';
 import { type VNode } from 'vue';
 import type { MessageType } from './types';
+export interface MessageProps {
+    customClass?: string;
+    center?: boolean;
+    dangerouslyUseHTMLString?: boolean;
+    duration: number;
+    icon?: string;
+    id: string;
+    message?: string | VNode | (() => VNode);
+    onClose?: Function;
+    showClose?: boolean;
+    type: MessageType;
+    offset: number;
+    zIndex?: number;
+    grouping?: boolean;
+    repeatNum?: number;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     customClass: {
         type: __PropType<string | undefined>;

package/es/components/message/message.vue2.js

@@ -0,0 +1,130 @@
+import { defineComponent as R, ref as y, computed as i, onMounted as V, watch as H, openBlock as l, createBlock as $, Transition as D, unref as e, withCtx as F, withDirectives as P, createElementVNode as U, normalizeClass as c, normalizeStyle as Z, createElementBlock as f, createVNode as k, normalizeProps as j, guardReactiveProps as A, createCommentVNode as B, renderSlot as G, toDisplayString as q, withModifiers as J, vShow as K } from "vue";
+import { EVENT_CODE as Q } from "@vft/constants";
+import { isObject as W } from "@vft/utils";
+import { useResizeObserver as X, useTimeoutFn as Y } from "@vueuse/core";
+import { useEventListener as _ } from "@vft/use";
+import "../config-provider/index.js";
+import { getLastOffset as ee, getOffsetOrSpace as te } from "./instance.js";
+import { VftIcon as M } from "../icon/index.js";
+import { useGlobalComponentSettings as ne } from "../config-provider/hooks/use-global-config.js";
+const oe = ["id"], se = ["innerHTML"], ie = ["onClick"], ye = /* @__PURE__ */ R({
+  __name: "message",
+  props: {
+    customClass: null,
+    center: { type: Boolean },
+    dangerouslyUseHTMLString: { type: Boolean },
+    duration: null,
+    icon: null,
+    id: null,
+    message: { type: [String, null, Function] },
+    onClose: { type: Function },
+    showClose: { type: Boolean },
+    type: null,
+    offset: null,
+    zIndex: null,
+    grouping: { type: Boolean },
+    repeatNum: null
+  },
+  emits: ["destroy"],
+  setup(t, { expose: S }) {
+    const n = t, { ns: o, zIndex: b } = ne("message"), { currentZIndex: L, nextZIndex: x } = b, m = y(), r = y(!1), p = y(0);
+    let a;
+    const T = /* @__PURE__ */ new Map([
+      ["success", { icon: "ico-ep:success-filled" }],
+      ["error", { icon: "ico-ep:circle-close-filled" }],
+      ["warning", { icon: "ico-ep:warning-filled" }]
+    ]), v = i(() => (n.icon ? W(n.icon) ? n.icon : { icon: n.icon } : "") || T.get(n.type) || ""), z = i(() => {
+      const s = n.type;
+      return { [o.bm("icon", s)]: s };
+    }), O = i(() => ee(n.id)), C = i(
+      () => te(n.id, n.offset) + O.value
+    ), E = i(() => p.value + C.value), I = i(() => ({
+      top: `${C.value}px`,
+      zIndex: L.value
+    }));
+    function d() {
+      n.duration !== 0 && ({ stop: a } = Y(() => {
+        u();
+      }, n.duration));
+    }
+    function h() {
+      a == null || a();
+    }
+    function u() {
+      r.value = !1;
+    }
+    function N({ code: s }) {
+      s === Q.esc && u();
+    }
+    return V(() => {
+      d(), x(), r.value = !0;
+    }), H(
+      () => n.repeatNum,
+      () => {
+        h(), d();
+      }
+    ), _(document, "keydown", N), X(m, () => {
+      p.value = m.value.getBoundingClientRect().height;
+    }), S({
+      visible: r,
+      bottom: E,
+      close: u
+    }), (s, w) => (l(), $(D, {
+      name: e(o).b("fade"),
+      onBeforeLeave: t.onClose,
+      onAfterLeave: w[0] || (w[0] = (g) => s.$emit("destroy"))
+    }, {
+      default: F(() => {
+        var g;
+        return [
+          P(U("div", {
+            id: t.id,
+            ref_key: "messageRef",
+            ref: m,
+            class: c([
+              e(o).b(),
+              { [e(o).m(t.type)]: t.type && !t.icon },
+              e(o).is("center", t.center),
+              e(o).is("closable", t.showClose),
+              t.customClass
+            ]),
+            style: Z(e(I)),
+            role: "alert",
+            onMouseenter: h,
+            onMouseleave: d
+          }, [
+            (g = e(v)) != null && g.icon ? (l(), f("div", {
+              key: 0,
+              class: c([e(o).e("icon"), e(z)])
+            }, [
+              k(e(M), j(A(e(v))), null, 16)
+            ], 2)) : B("", !0),
+            G(s.$slots, "default", {}, () => [
+              t.dangerouslyUseHTMLString ? (l(), f("p", {
+                key: 1,
+                class: c(e(o).e("content")),
+                innerHTML: t.message
+              }, null, 10, se)) : (l(), f("p", {
+                key: 0,
+                class: c(e(o).e("content"))
+              }, q(t.message), 3))
+            ]),
+            t.showClose ? (l(), f("div", {
+              key: 1,
+              class: c(e(o).e("closeBtn")),
+              onClick: J(u, ["stop"])
+            }, [
+              k(e(M), { icon: "ico-ep:circle-close" })
+            ], 10, ie)) : B("", !0)
+          ], 46, oe), [
+            [K, r.value]
+          ])
+        ];
+      }),
+      _: 3
+    }, 8, ["name", "onBeforeLeave"]));
+  }
+});
+export {
+  ye as default
+};

package/es/components/message/method.js

@@ -0,0 +1,94 @@
+import { render as f, createVNode as T } from "vue";
+import { isClient as v } from "@vueuse/core";
+import { isNumber as b, isString as u, isVNode as h, isFunction as a, isElement as y } from "@vft/utils";
+import { debugWarn as C } from "../../utils/error.js";
+import "lodash";
+import "../../utils/ns-cover.js";
+import E from "./message.vue2.js";
+import { messageTypes as _, messageDefaults as z } from "./types.js";
+import { instances as i } from "./instance.js";
+import "../config-provider/index.js";
+import { messageConfig as g } from "../config-provider/constants.js";
+let M = 1;
+const x = (e) => {
+  const n = !e || u(e) || h(e) || a(e) ? { message: e } : e, o = {
+    ...z,
+    ...n
+  };
+  if (!o.appendTo)
+    o.appendTo = document.body;
+  else if (u(o.appendTo)) {
+    let s = document.querySelector(o.appendTo);
+    y(s) || (C("VftMessage", "the appendTo option is not an HTMLElement. Falling back to document.body."), s = document.body), o.appendTo = s;
+  }
+  return o;
+}, N = (e) => {
+  const n = i.indexOf(e);
+  if (n === -1)
+    return;
+  i.splice(n, 1);
+  const { handler: o } = e;
+  o.close();
+}, V = ({ appendTo: e, ...n }, o) => {
+  const s = `message_${M++}`, r = n.onClose, c = document.createElement("div"), t = {
+    ...n,
+    id: s,
+    onClose: () => {
+      r == null || r(), N(d);
+    },
+    // 清除 message element 防止内存泄漏
+    onDestroy: () => {
+      f(null, c);
+    }
+  }, l = T(E, t, a(t.message) || h(t.message) ? { default: a(t.message) ? t.message : () => t.message } : null);
+  l.appContext = o || p._context, f(l, c), e.appendChild(c.firstElementChild);
+  const m = l.component, d = {
+    id: s,
+    vnode: l,
+    vm: m,
+    handler: {
+      // instead of calling the onClose function directly,
+      // setting this value so that we can have the full lifecycle
+      // for out component, so that all closing steps will not be skipped.
+      close: () => {
+        m.exposed.visible.value = !1;
+      }
+    },
+    props: l.component.props
+  };
+  return d;
+}, p = (e = {}, n) => {
+  if (!v)
+    return { close: () => {
+    } };
+  if (b(g.max) && i.length >= g.max)
+    return { close: () => {
+    } };
+  const o = x(e);
+  if (o.grouping && i.length) {
+    const r = i.find(({ vnode: c }) => {
+      var t;
+      return ((t = c.props) == null ? void 0 : t.message) === o.message;
+    });
+    if (r)
+      return r.props.repeatNum += 1, r.props.type = o.type, r.handler;
+  }
+  const s = V(o, n);
+  return i.push(s), s.handler;
+};
+_.forEach((e) => {
+  p[e] = (n = {}, o) => {
+    const s = x(n);
+    return p({ ...s, type: e }, o);
+  };
+});
+function A(e) {
+  for (const n of i)
+    (!e || e === n.props.type) && n.handler.close();
+}
+p.closeAll = A;
+p._context = null;
+export {
+  A as closeAll,
+  p as default
+};

package/es/components/multiple-tabs/multiple-tabs.vue2.js

@@ -0,0 +1,200 @@
+import { defineComponent as P, ref as h, computed as b, watchEffect as E, unref as r, openBlock as x, createElementBlock as R, normalizeClass as H, normalizeStyle as K, createVNode as C, withCtx as S, Fragment as F, renderList as U, createBlock as $ } from "vue";
+import { useRouterHelper as j, getRouterKeyPath as c, listenerRouteChange as q } from "@vft/router";
+import { useMultipleTabStore as G, useTabs as J } from "@vft/store";
+import { useRefs as L } from "@vft/use";
+import "@vft/utils";
+import "lodash";
+import "@vueuse/core";
+import { generateCssVars as _ } from "../../utils/ns-cover.js";
+import O from "hotkeys-js";
+import { useRouter as Q, onBeforeRouteLeave as W } from "vue-router";
+import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import "../divider/index.js";
+import "../icon/index.js";
+import "../avatar/index.js";
+import "../empty/index.js";
+import "../result/index.js";
+import { VftTabs as Y, VftTabPane as Z } from "../tabs/index.js";
+import "../popper/index.js";
+import "../collapse-transition/index.js";
+import "../tooltip/index.js";
+import "../popover/index.js";
+import "../menu/index.js";
+import { initAffixTabs as tt, useTabsDrag as et } from "./use/use-multiple-tabs.js";
+import "../header-layout/index.js";
+import "../footer-layout/index.js";
+import "../iframe-layout/index.js";
+import "../router-view-content/index.js";
+import "../logo/index.js";
+import "../back-top/index.js";
+import "../config-provider/index.js";
+import "../descriptions/index.js";
+import "../full-screen/index.js";
+import "../icon-text/index.js";
+import "../image/index.js";
+import "../input/index.js";
+import "../link/index.js";
+import "../pagination/index.js";
+import "../tag/index.js";
+import "../side-menu/index.js";
+import "../qrcode/index.js";
+import "../overlay/index.js";
+import "../clamp/index.js";
+import "../clamp-toggle/index.js";
+import "../page-wrapper/index.js";
+import "../exception/index.js";
+import "../search/index.js";
+import "../form/index.js";
+import "../button/index.js";
+import "../checkbox/index.js";
+import "../radio/index.js";
+import "../switch/index.js";
+import "../color-picker/index.js";
+import "../scrollbar/index.js";
+import "../dropdown/index.js";
+import "../virtual-list/components/fixed-size-list.js";
+import "../virtual-list/components/dynamic-size-list.js";
+import "../virtual-list/components/fixed-size-grid.js";
+import "../virtual-list/components/dynamic-size-grid.js";
+import "../virtual-list/props.js";
+import "../select-v2/index.js";
+import "../verify-code/index.js";
+import "../table/index.js";
+import "../image-viewer/index.js";
+import "../md-container/index.js";
+import "../md-comment/index.js";
+import "../md-tabs/index.js";
+import "../md-vue-playground/index.js";
+import "../md-code-demo/index.js";
+import "../md-code-tabs/index.js";
+import "../message/index.js";
+import ot from "./tab-content.vue2.js";
+const M = (
+  /* hoist-static*/
+  X("multiple-tabs")
+), rt = P({
+  name: M.b()
+}), _e = /* @__PURE__ */ P({
+  ...rt,
+  props: {
+    tabsStyle: null,
+    contextMenuStyle: null,
+    canDrag: { type: Boolean }
+  },
+  setup(f) {
+    const i = tt();
+    f.canDrag && et(i);
+    const u = G(), n = h(""), a = h(0), d = h(), v = Q(), { go: g } = j(), s = b(() => u.getTabList.filter((t) => {
+      var e;
+      return !((e = t.meta) != null && e.hideTab);
+    }));
+    E(() => {
+      var t;
+      if (n.value) {
+        const e = s.value.findIndex((o) => c(o) === n.value);
+        e === -1 ? a.value = ((t = s.value) == null ? void 0 : t.length) - 1 : a.value = e, a.value = a.value < (i == null ? void 0 : i.length) ? (i == null ? void 0 : i.length) - 1 : a.value;
+      }
+    }), W(() => {
+      d.value = r(v.currentRoute);
+    }), q((t) => {
+      var y;
+      if (!t || (y = t.meta) != null && y.hasTokenToRoot)
+        return;
+      const { meta: e = {} } = t, { currentActivePath: o, hideTab: m } = e, l = m ? o : null, p = c(t);
+      if (n.value !== p && (n.value = p), l) {
+        let T = v.getRoutes().find((D) => D.path === o);
+        T && u.addTab(T, r(d), a.value, t);
+      } else
+        u.addTab(r(t), r(d), a.value);
+    });
+    function k(t) {
+      var m, l;
+      if (n.value === t.paneName)
+        return;
+      const e = s.value[t.attrs.index];
+      n.value = t.paneName;
+      const o = (l = (m = e == null ? void 0 : e.meta) == null ? void 0 : m.hideActiveRoute) == null ? void 0 : l.fullPath;
+      g(o || e.fullPath || e.path);
+    }
+    function B(t) {
+      u.closeTabByKey(t, v);
+    }
+    const [I, N] = L();
+    function w(t) {
+      const e = t.pane.attrs.index, o = t.event;
+      I.value[e].handleContext(o);
+    }
+    const V = b(() => ({ ..._({
+      padding: "4px 0 0",
+      "header-height": "26px",
+      "item-color": "#5C5C5C",
+      "item-bg-color": "#f8f8f8",
+      "font-size": "13px",
+      "item-padding": "0 10px",
+      "close-icon-left": "8px",
+      "item-distance": "10px",
+      "item-max-width": "348px",
+      "scroll-padding": "0 20px",
+      "header-margin": "0 0 0 8px"
+    }, "tabs"), ...f.tabsStyle })), { closeCurrent: A } = J();
+    O("command+e, ctrl+e", function() {
+      return A(), !1;
+    });
+    const z = b(() => ({
+      ..._({
+        border: "1px solid #dcdfe6",
+        "sub-item-height": "40px",
+        "item-min-width": "150px"
+      }, "menu"),
+      ...f.contextMenuStyle
+    }));
+    return (t, e) => (x(), R("div", {
+      class: H(r(M).b()),
+      style: K(r(V))
+    }, [
+      C(r(Y), {
+        "model-value": n.value,
+        "onUpdate:modelValue": e[0] || (e[0] = (o) => n.value = o),
+        type: "card",
+        onTabClick: k,
+        onTabRemove: B,
+        onTabContextMenu: w,
+        closeIconCfg: { color: "white" }
+      }, {
+        default: S(() => [
+          (x(!0), R(F, null, U(r(s), (o, m) => {
+            var l;
+            return x(), $(r(Z), {
+              key: r(c)(o) + m,
+              closable: !((l = o.meta) != null && l.affix),
+              index: m,
+              name: r(c)(o)
+            }, {
+              label: S(() => {
+                var p;
+                return [
+                  C(ot, {
+                    contextMenuStyle: r(z),
+                    affixNum: (p = r(i)) == null ? void 0 : p.length,
+                    ref_for: !0,
+                    ref: r(N)(m),
+                    tabItem: o
+                  }, null, 8, ["contextMenuStyle", "affixNum", "tabItem"])
+                ];
+              }),
+              _: 2
+            }, 1032, ["closable", "index", "name"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["model-value"])
+    ], 6));
+  }
+});
+export {
+  _e as default
+};

package/es/components/multiple-tabs/tab-content.vue2.js

@@ -0,0 +1,102 @@
+import { defineComponent as l, computed as u, openBlock as c, createElementBlock as s, unref as r, withModifiers as f, toDisplayString as x } from "vue";
+import "@vft/utils";
+import "@vft/use";
+import "../divider/index.js";
+import "../icon/index.js";
+import "../avatar/index.js";
+import "../empty/index.js";
+import "../result/index.js";
+import "../tabs/index.js";
+import "../popper/index.js";
+import "../collapse-transition/index.js";
+import "../tooltip/index.js";
+import "../popover/index.js";
+import "../menu/index.js";
+import "./multiple-tabs.vue2.js";
+import { useTabDropdown as b } from "./use/use-tab-dropdown.js";
+import "vue-router";
+import "@vft/store";
+import "../header-layout/index.js";
+import "../footer-layout/index.js";
+import "../iframe-layout/index.js";
+import "../router-view-content/index.js";
+import "../logo/index.js";
+import "../back-top/index.js";
+import "../config-provider/index.js";
+import "../descriptions/index.js";
+import "../full-screen/index.js";
+import "../icon-text/index.js";
+import "../image/index.js";
+import "../input/index.js";
+import "../link/index.js";
+import "../pagination/index.js";
+import "../tag/index.js";
+import "../side-menu/index.js";
+import "../qrcode/index.js";
+import "../overlay/index.js";
+import "../clamp/index.js";
+import "../clamp-toggle/index.js";
+import "../page-wrapper/index.js";
+import "../exception/index.js";
+import "../search/index.js";
+import "../form/index.js";
+import "../button/index.js";
+import "../checkbox/index.js";
+import "../radio/index.js";
+import "../switch/index.js";
+import "../color-picker/index.js";
+import "../scrollbar/index.js";
+import "../dropdown/index.js";
+import "../virtual-list/components/fixed-size-list.js";
+import "../virtual-list/components/dynamic-size-list.js";
+import "../virtual-list/components/fixed-size-grid.js";
+import "../virtual-list/components/dynamic-size-grid.js";
+import "../virtual-list/props.js";
+import "../select-v2/index.js";
+import "../verify-code/index.js";
+import "../table/index.js";
+import "../image-viewer/index.js";
+import "../md-container/index.js";
+import "../md-comment/index.js";
+import "../md-tabs/index.js";
+import "../md-vue-playground/index.js";
+import "../md-code-demo/index.js";
+import "../md-code-tabs/index.js";
+import "../message/index.js";
+import "../config-provider/hooks/use-global-config.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { useContextMenu as d } from "../context-menu/useContextMenu.js";
+const C = ["title", "onContextmenu"], Ht = /* @__PURE__ */ l({
+  __name: "tab-content",
+  props: {
+    tabItem: null,
+    affixNum: null,
+    contextMenuStyle: null
+  },
+  setup(t, { expose: p }) {
+    const [e] = d(), m = u(() => t.tabItem.meta && t.tabItem.meta.title), { getDropMenuList: n, handleContextMenu: a } = b(t.tabItem, t.affixNum);
+    function i(o) {
+      a(t.tabItem)(o), e({
+        event: o,
+        styles: t.contextMenuStyle,
+        items: n.value
+      });
+    }
+    return p({
+      handleContext: i
+    }), (o, M) => (c(), s("span", {
+      title: r(m),
+      class: "vft-multiple-tabs__title",
+      onContextmenu: f(i, ["stop"])
+    }, x(r(m)), 41, C));
+  }
+});
+export {
+  Ht as default
+};

package/es/components/overlay/overlay.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent as i, useSlots as x, createVNode as y, renderSlot as u, h as r } from "vue";
+import { useNamespace as v } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import { noop as a } from "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+const c = (
+  /* hoist-static*/
+  v("overlay")
+), C = i({
+  name: c.b()
+}), q = /* @__PURE__ */ i({
+  ...C,
+  props: {
+    mask: { type: Boolean },
+    onlyNode: { type: Boolean },
+    customMaskEvent: { type: Boolean },
+    overlayClass: null,
+    zIndex: null
+  },
+  emits: ["click"],
+  setup(o, { emit: d }) {
+    const m = (t) => {
+      if (!t)
+        return { onClick: a, onMousedown: a, onMouseup: a };
+      let s = !1, l = !1;
+      return { onClick: (e) => {
+        s && l && t(e), s = l = !1;
+      }, onMousedown: (e) => {
+        s = e.target === e.currentTarget;
+      }, onMouseup: (e) => {
+        l = e.target === e.currentTarget;
+      } };
+    }, n = x(), p = (t) => {
+      d("click", t);
+    }, { onClick: f, onMousedown: M, onMouseup: k } = m(o.customMaskEvent ? void 0 : p);
+    return () => o.mask ? y(
+      "div",
+      {
+        class: [c.b(), o.overlayClass],
+        style: {
+          zIndex: o.zIndex
+        },
+        onClick: f,
+        onMousedown: M,
+        onMouseup: k
+      },
+      [u(n, "default")],
+      14,
+      ["onClick", "onMouseup", "onMousedown"]
+    ) : o.onlyNode ? r(
+      "div",
+      {},
+      [u(n, "default")]
+    ) : r(
+      "div",
+      {
+        class: o.overlayClass,
+        style: {
+          zIndex: o.zIndex,
+          position: "fixed",
+          top: "0px",
+          right: "0px",
+          bottom: "0px",
+          left: "0px"
+        }
+      },
+      [u(n, "default")]
+    );
+  }
+});
+export {
+  q as default
+};

package/es/components/page-wrapper/page-wrapper.vue2.js

@@ -0,0 +1,44 @@
+import { defineComponent as s, openBlock as n, createElementBlock as a, normalizeClass as o, unref as e, createElementVNode as r, toDisplayString as m, renderSlot as c } from "vue";
+import { useNamespace as u } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { useRouterHelper as d } from "@vft/router";
+const t = (
+  /* hoist-static*/
+  u("page-wrapper")
+), f = s({
+  name: t.b()
+}), x = /* @__PURE__ */ s({
+  ...f,
+  props: {
+    title: null
+  },
+  setup(p) {
+    const { getTitle: i } = d();
+    return (l, _) => (n(), a("div", {
+      class: o(e(t).b())
+    }, [
+      r("div", {
+        class: o(e(t).e("header"))
+      }, [
+        r("span", {
+          class: o(e(t).e("title"))
+        }, m(p.title || e(i)), 3)
+      ], 2),
+      r("div", {
+        class: o(e(t).e("content"))
+      }, [
+        c(l.$slots, "default")
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  x as default
+};