vft 0.0.20 → 0.0.21

package/es/components/config-provider/config-provider.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as m, computed as u, watch as d, onActivated as f, onDeactivated as h, onBeforeUnmount as p, getCurrentInstance as v, openBlock as V, createElementBlock as g, normalizeClass as k, unref as a, normalizeStyle as C, renderSlot as b } from "vue";
+import { defineComponent as s, watch as r, computed as d, onActivated as f, onDeactivated as h, onBeforeUnmount as g, getCurrentInstance as p, openBlock as v, createElementBlock as C, normalizeClass as V, unref as o, normalizeStyle as b, renderSlot as k } from "vue";
 import { inBrowser as B, kebabCase as D } from "@vft/utils";
 import { useNamespace as E } from "../../hooks/use-namespace/index.mjs";
 import "@popperjs/core";
@@ -7,13 +7,14 @@ import "../../hooks/use-z-index/index.mjs";
 import "@vueuse/core";
 import "@vue/shared";
 import { provideGlobalConfig as L } from "./hooks/use-global-config.mjs";
-const s = (
+import { messageConfig as S } from "./constants.mjs";
+const i = (
   /* hoist-static*/
   E("config-provider")
-), S = m({
-  name: s.b()
-}), G = /* @__PURE__ */ m({
-  ...S,
+), T = s({
+  name: i.b()
+}), N = /* @__PURE__ */ s({
+  ...T,
   props: {
     theme: { default: "light" },
     themeVars: null,
@@ -22,12 +23,20 @@ const s = (
     iconPrefix: null,
     namespace: { default: "vft" },
     zIndex: null,
+    message: null,
     projectCfg: null
   },
   setup(t) {
-    const c = u(() => {
+    r(
+      () => t.message,
+      (e) => {
+        Object.assign(S, e ?? {});
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const c = d(() => {
       const e = t.theme === "dark";
-      return i({
+      return l({
         ...t.themeVars,
         ...e ? t.themeVarsDark : t.themeVarsLight
       });
@@ -35,33 +44,33 @@ const s = (
     if (B) {
       const e = () => {
         document.documentElement.classList.add(t.theme);
-      }, n = (o = t.theme) => {
-        document.documentElement.classList.remove(o);
+      }, n = (m = t.theme) => {
+        document.documentElement.classList.remove(m);
       };
-      d(
+      r(
         () => t.theme,
-        (o, r) => {
-          r && n(r), e();
+        (m, a) => {
+          a && n(a), e();
         },
         { immediate: !0 }
-      ), f(e), h(n), p(n);
+      ), f(e), h(n), g(n);
     }
-    function i(e) {
+    function l(e) {
       const n = {};
-      return Object.keys(e).forEach((o) => {
-        n[`--${t.namespace}-${D(o)}`] = e[o];
+      return Object.keys(e).forEach((m) => {
+        n[`--${t.namespace}-${D(m)}`] = e[m];
       }), n;
     }
-    const l = v();
-    return L(l.props), (e, n) => (V(), g("div", {
-      class: k(a(s).b()),
-      style: C(a(c))
+    const u = p();
+    return L(u.props), (e, n) => (v(), C("div", {
+      class: V(o(i).b()),
+      style: b(o(c))
     }, [
-      b(e.$slots, "default")
+      k(e.$slots, "default")
     ], 6));
   }
 });
 export {
-  G as default
+  N as default
 };
 //# sourceMappingURL=config-provider.vue2.mjs.map

package/es/components/config-provider/config-provider.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.vue2.mjs","sources":["../../../../../packages/components/config-provider/config-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('config-provider')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { inBrowser, kebabCase } from '@vft/utils';\nimport { computed, watch, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { provideGlobalConfig } from './hooks/use-global-config';\n// import type { MessageConfigContext } from '../message/message';\n// import { messageConfig } from './types';\n\ninterface ConfigProviderProps {\n  /** 主题风格 */\n  theme?: Theme;\n  /** 自定义主题变量 */\n  themeVars?: Record<string, Numberish>;\n  /** 仅在深色模式下生效的主题变量 */\n  themeVarsDark?: Record<string, Numberish>;\n  /** 仅在浅色模式下生效的主题变量 */\n  themeVarsLight?: Record<string, Numberish>;\n  /** 所有图标的类名前缀 */\n  iconPrefix?: string;\n  /** 组件公共命名 */\n  namespace?: string;\n  /** 设置所有弹窗类组件的 z-index */\n  zIndex?: number;\n  /** 可同时显示的消息最大数量 */\n  // message?: MessageConfigContext;\n  projectCfg?: Record<string, any>;\n}\n\ndefineProps({\n  \"theme\": { default: 'light' },\n  \"themeVars\": null,\n  \"themeVarsDark\": null,\n  \"themeVarsLight\": null,\n  \"iconPrefix\": null,\n  \"namespace\": { default: 'vft' },\n  \"zIndex\": null,\n  \"projectCfg\": null\n})\n\n\n\n;\n\n// 将外部传入的 message 的配置进行合并处理\n// watch(\n//   () => message,\n//   (val) => {\n//     Object.assign(messageConfig, val ?? {});\n//   },\n//   { immediate: true, deep: true }\n// );\n\n// 合并传入的主题变量传入到 style 中\nconst style = computed(() => {\n  const isDark = __props.theme === 'dark';\n  return mapThemeVarsToCSSVars({\n    ...__props.themeVars,\n    ...(isDark ? __props.themeVarsDark : __props.themeVarsLight)\n  });\n});\n\nif (inBrowser) {\n  const addTheme = () => {\n    document.documentElement.classList.add(__props.theme);\n  };\n  const removeTheme = (_theme = __props.theme) => {\n    document.documentElement.classList.remove(_theme);\n  };\n\n  // 监听 theme 主题的变化，移除旧的，添加新的在 document.body 上\n  watch(\n    () => __props.theme,\n    (newVal, oldVal) => {\n      if (oldVal) {\n        removeTheme(oldVal);\n      }\n      addTheme();\n    },\n    { immediate: true }\n  );\n\n  onActivated(addTheme);\n  onDeactivated(removeTheme);\n  onBeforeUnmount(removeTheme);\n}\n\nfunction mapThemeVarsToCSSVars(themeVars: Record<string, Numberish>) {\n  const cssVars: Record<string, Numberish> = {};\n  Object.keys(themeVars).forEach((key) => {\n    cssVars[`--${__props.namespace}-${kebabCase(key)}`] = themeVars[key];\n  });\n  return cssVars;\n}\n\nconst instance = getCurrentInstance()!;\n\nprovideGlobalConfig(instance.props);\n</script>\n\n<template>\n  <div :class=\"ns.b()\" :style=\"style\">\n    <slot />\n  </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","style","computed","isDark","__props","mapThemeVarsToCSSVars","inBrowser","addTheme","removeTheme","_theme","watch","newVal","oldVal","onActivated","onDeactivated","onBeforeUnmount","themeVars","cssVars","key","kebabCase","instance","getCurrentInstance","provideGlobalConfig"],"mappings":";;;;;;;;;AACA,MAAMA;AAAA;AAAA,EAAuBC,EAAa,iBAAiB;AAAA,GAG3DC,IAA6BC,EAAmB;AAAA,EAC9C,MAAMH,EAAG,EAAE;AACb,CAAC;;;;;;;;;;;;;AAsDK,UAAAI,IAAQC,EAAS,MAAM;AACrB,YAAAC,IAASC,EAAQ,UAAU;AACjC,aAAOC,EAAsB;AAAA,QAC3B,GAAGD,EAAQ;AAAA,QACX,GAAID,IAASC,EAAQ,gBAAgBA,EAAQ;AAAA,MAAA,CAC9C;AAAA,IAAA,CACF;AAED,QAAIE,GAAW;AACb,YAAMC,IAAW,MAAM;AACrB,iBAAS,gBAAgB,UAAU,IAAIH,EAAQ,KAAK;AAAA,MAAA,GAEhDI,IAAc,CAACC,IAASL,EAAQ,UAAU;AACrC,iBAAA,gBAAgB,UAAU,OAAOK,CAAM;AAAA,MAAA;AAIlD,MAAAC;AAAA,QACE,MAAMN,EAAQ;AAAA,QACd,CAACO,GAAQC,MAAW;AAClB,UAAIA,KACFJ,EAAYI,CAAM,GAEXL;QACX;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MAAA,GAGpBM,EAAYN,CAAQ,GACpBO,EAAcN,CAAW,GACzBO,EAAgBP,CAAW;AAAA,IAC7B;AAEA,aAASH,EAAsBW,GAAsC;AACnE,YAAMC,IAAqC,CAAA;AAC3C,oBAAO,KAAKD,CAAS,EAAE,QAAQ,CAACE,MAAQ;AAC9B,QAAAD,EAAA,KAAKb,EAAQ,aAAae,EAAUD,CAAG,GAAG,IAAIF,EAAUE,CAAG;AAAA,MAAA,CACpE,GACMD;AAAA,IACT;AAEA,UAAMG,IAAWC;AAEjB,WAAAC,EAAoBF,EAAS,KAAK;;;;;;;;"}
+{"version":3,"file":"config-provider.vue2.mjs","sources":["../../../../../packages/components/config-provider/config-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('config-provider')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n  name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { inBrowser, kebabCase } from '@vft/utils';\nimport { computed, watch, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { provideGlobalConfig } from './hooks/use-global-config';\nimport type { MessageConfigContext } from '@vft-ui/components/message';\nimport { messageConfig } from './constants';\n\ninterface ConfigProviderProps {\n  /** 主题风格 */\n  theme?: Theme;\n  /** 自定义主题变量 */\n  themeVars?: Record<string, Numberish>;\n  /** 仅在深色模式下生效的主题变量 */\n  themeVarsDark?: Record<string, Numberish>;\n  /** 仅在浅色模式下生效的主题变量 */\n  themeVarsLight?: Record<string, Numberish>;\n  /** 所有图标的类名前缀 */\n  iconPrefix?: string;\n  /** 组件公共命名 */\n  namespace?: string;\n  /** 设置所有弹窗类组件的 z-index */\n  zIndex?: number;\n  /** 可同时显示的消息最大数量 */\n  message?: MessageConfigContext;\n  projectCfg?: Record<string, any>;\n}\n\ndefineProps({\n  \"theme\": { default: 'light' },\n  \"themeVars\": null,\n  \"themeVarsDark\": null,\n  \"themeVarsLight\": null,\n  \"iconPrefix\": null,\n  \"namespace\": { default: 'vft' },\n  \"zIndex\": null,\n  \"message\": null,\n  \"projectCfg\": null\n})\n\n\n\n;\n\n// 将外部传入的 message 的配置进行合并处理\nwatch(\n  () => __props.message,\n  (val) => {\n    Object.assign(messageConfig, val ?? {});\n  },\n  { immediate: true, deep: true }\n);\n\n// 合并传入的主题变量传入到 style 中\nconst style = computed(() => {\n  const isDark = __props.theme === 'dark';\n  return mapThemeVarsToCSSVars({\n    ...__props.themeVars,\n    ...(isDark ? __props.themeVarsDark : __props.themeVarsLight)\n  });\n});\n\nif (inBrowser) {\n  const addTheme = () => {\n    document.documentElement.classList.add(__props.theme);\n  };\n  const removeTheme = (_theme = __props.theme) => {\n    document.documentElement.classList.remove(_theme);\n  };\n\n  // 监听 theme 主题的变化，移除旧的，添加新的在 document.body 上\n  watch(\n    () => __props.theme,\n    (newVal, oldVal) => {\n      if (oldVal) {\n        removeTheme(oldVal);\n      }\n      addTheme();\n    },\n    { immediate: true }\n  );\n\n  onActivated(addTheme);\n  onDeactivated(removeTheme);\n  onBeforeUnmount(removeTheme);\n}\n\nfunction mapThemeVarsToCSSVars(themeVars: Record<string, Numberish>) {\n  const cssVars: Record<string, Numberish> = {};\n  Object.keys(themeVars).forEach((key) => {\n    cssVars[`--${__props.namespace}-${kebabCase(key)}`] = themeVars[key];\n  });\n  return cssVars;\n}\n\nconst instance = getCurrentInstance()!;\n\nprovideGlobalConfig(instance.props);\n</script>\n\n<template>\n  <div :class=\"ns.b()\" :style=\"style\">\n    <slot />\n  </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","watch","__props","val","messageConfig","style","computed","isDark","mapThemeVarsToCSSVars","inBrowser","addTheme","removeTheme","_theme","newVal","oldVal","onActivated","onDeactivated","onBeforeUnmount","themeVars","cssVars","key","kebabCase","instance","getCurrentInstance","provideGlobalConfig"],"mappings":";;;;;;;;;;AACA,MAAMA;AAAA;AAAA,EAAuBC,EAAa,iBAAiB;AAAA,GAG3DC,IAA6BC,EAAmB;AAAA,EAC9C,MAAMH,EAAG,EAAE;AACb,CAAC;;;;;;;;;;;;;;AA8CD,IAAAI;AAAA,MACE,MAAMC,EAAQ;AAAA,MACd,CAACC,MAAQ;AACP,eAAO,OAAOC,GAAeD,KAAO,CAAE,CAAA;AAAA,MACxC;AAAA,MACA,EAAE,WAAW,IAAM,MAAM,GAAK;AAAA,IAAA;AAI1B,UAAAE,IAAQC,EAAS,MAAM;AACrB,YAAAC,IAASL,EAAQ,UAAU;AACjC,aAAOM,EAAsB;AAAA,QAC3B,GAAGN,EAAQ;AAAA,QACX,GAAIK,IAASL,EAAQ,gBAAgBA,EAAQ;AAAA,MAAA,CAC9C;AAAA,IAAA,CACF;AAED,QAAIO,GAAW;AACb,YAAMC,IAAW,MAAM;AACrB,iBAAS,gBAAgB,UAAU,IAAIR,EAAQ,KAAK;AAAA,MAAA,GAEhDS,IAAc,CAACC,IAASV,EAAQ,UAAU;AACrC,iBAAA,gBAAgB,UAAU,OAAOU,CAAM;AAAA,MAAA;AAIlD,MAAAX;AAAA,QACE,MAAMC,EAAQ;AAAA,QACd,CAACW,GAAQC,MAAW;AAClB,UAAIA,KACFH,EAAYG,CAAM,GAEXJ;QACX;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MAAA,GAGpBK,EAAYL,CAAQ,GACpBM,EAAcL,CAAW,GACzBM,EAAgBN,CAAW;AAAA,IAC7B;AAEA,aAASH,EAAsBU,GAAsC;AACnE,YAAMC,IAAqC,CAAA;AAC3C,oBAAO,KAAKD,CAAS,EAAE,QAAQ,CAACE,MAAQ;AAC9B,QAAAD,EAAA,KAAKjB,EAAQ,aAAamB,EAAUD,CAAG,GAAG,IAAIF,EAAUE,CAAG;AAAA,MAAA,CACpE,GACMD;AAAA,IACT;AAEA,UAAMG,IAAWC;AAEjB,WAAAC,EAAoBF,EAAS,KAAK;;;;;;;;"}

package/es/components/config-provider/constants.d.ts

@@ -1,4 +1,6 @@
 import type { ConfigProviderProps } from './types';
 import type { InjectionKey, Ref } from 'vue';
+import type { MessageConfigContext } from 'vft/es/components/message';
 export type ConfigProviderContext = Partial<ConfigProviderProps>;
 export declare const configProviderContextKey: InjectionKey<Ref<ConfigProviderContext>>;
+export declare const messageConfig: MessageConfigContext;

package/es/components/config-provider/constants.mjs

@@ -1,5 +1,6 @@
-const o = Symbol();
+const o = Symbol(), e = {};
 export {
-  o as configProviderContextKey
+  o as configProviderContextKey,
+  e as messageConfig
 };
 //# sourceMappingURL=constants.mjs.map

package/es/components/config-provider/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","sources":["../../../../../packages/components/config-provider/constants.ts"],"sourcesContent":["import type { ConfigProviderProps } from './types';\nimport type { InjectionKey, Ref } from 'vue';\n\nexport type ConfigProviderContext = Partial<ConfigProviderProps>\n\nexport const configProviderContextKey: InjectionKey<Ref<ConfigProviderContext>> = Symbol();\n"],"names":["configProviderContextKey"],"mappings":"AAKO,MAAMA,IAAqE,OAAO;"}
+{"version":3,"file":"constants.mjs","sources":["../../../../../packages/components/config-provider/constants.ts"],"sourcesContent":["import type { ConfigProviderProps } from './types';\nimport type { InjectionKey, Ref } from 'vue';\nimport type { MessageConfigContext } from '@vft-ui/components/message';\n\nexport type ConfigProviderContext = Partial<ConfigProviderProps>\n\nexport const configProviderContextKey: InjectionKey<Ref<ConfigProviderContext>> = Symbol();\n\nexport const messageConfig: MessageConfigContext = {};\n"],"names":["configProviderContextKey","messageConfig"],"mappings":"AAMO,MAAMA,IAAqE,OAAO,GAE5EC,IAAsC,CAAA;"}

package/es/components/config-provider/index.d.ts

@@ -27,6 +27,10 @@ export declare const VftConfigProvider: import("vft/es/utils").SFCWithInstall<im
         type: import("vue").PropType<number | undefined>;
         required: false;
     };
+    message: {
+        type: import("vue").PropType<import("..").MessageConfigContext | undefined>;
+        required: false;
+    };
     projectCfg: {
         type: import("vue").PropType<Record<string, any> | undefined>;
         required: false;
@@ -60,6 +64,10 @@ export declare const VftConfigProvider: import("vft/es/utils").SFCWithInstall<im
         type: import("vue").PropType<number | undefined>;
         required: false;
     };
+    message: {
+        type: import("vue").PropType<import("..").MessageConfigContext | undefined>;
+        required: false;
+    };
     projectCfg: {
         type: import("vue").PropType<Record<string, any> | undefined>;
         required: false;

package/es/components/config-provider/index.mjs

@@ -3,15 +3,16 @@ import "vue";
 import "@vue/shared";
 import "@vft/utils";
 import t from "./config-provider.vue2.mjs";
-import { configProviderContextKey as a } from "./constants.mjs";
-import { provideGlobalConfig as g, useGlobalComponentSettings as C, useGlobalConfig as d } from "./hooks/use-global-config.mjs";
+import { configProviderContextKey as s, messageConfig as a } from "./constants.mjs";
+import { provideGlobalConfig as C, useGlobalComponentSettings as d, useGlobalConfig as x } from "./hooks/use-global-config.mjs";
 const n = o(t);
 export {
   n as VftConfigProvider,
-  a as configProviderContextKey,
+  s as configProviderContextKey,
   n as default,
-  g as provideGlobalConfig,
-  C as useGlobalComponentSettings,
-  d as useGlobalConfig
+  a as messageConfig,
+  C as provideGlobalConfig,
+  d as useGlobalComponentSettings,
+  x as useGlobalConfig
 };
 //# sourceMappingURL=index.mjs.map

package/es/components/context-menu/context-menu.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as w, ref as u, computed as y, openBlock as s, createBlock as d, Transition as k, withCtx as C, withDirectives as b, createElementVNode as c, normalizeStyle as g, unref as m, withModifiers as M, createElementBlock as $, Fragment as z, renderList as B, vShow as E } from "vue";
+import { defineComponent as w, ref as u, computed as y, openBlock as m, createBlock as d, Transition as k, withCtx as C, withDirectives as b, createElementVNode as c, normalizeStyle as g, unref as p, withModifiers as M, createElementBlock as $, Fragment as z, renderList as B, vShow as E } from "vue";
 import { useTimeoutFn as S, useClickAway as A, useEventListener as a } from "@vft/use";
 import "../divider/index.mjs";
 import "../icon/index.mjs";
@@ -34,7 +34,14 @@ import "../qrcode/index.mjs";
 import "../overlay/index.mjs";
 import "../clamp/index.mjs";
 import "../clamp-toggle/index.mjs";
-const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
+import "../page-wrapper/index.mjs";
+import "../message/index.mjs";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import "@vueuse/core";
+import "@vue/shared";
+const H = { class: "vft-sub-menu" }, bt = /* @__PURE__ */ w({
   __name: "context-menu",
   props: {
     axis: null,
@@ -43,7 +50,7 @@ const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
     items: null
   },
   setup(o) {
-    let p = u();
+    let s = u();
     const f = y(() => {
       const { x: t, y: e } = o.axis || { x: 0, y: 0 }, i = (o.items || []).length * 40, n = o.width || 0, l = document.body, v = l.clientWidth < t + n ? t - n : t, h = l.clientHeight < e + i ? e - i : e;
       return {
@@ -58,7 +65,7 @@ const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
     let r = u(!1);
     S(() => {
       r.value = !0;
-    }, 0), A(p, () => {
+    }, 0), A(s, () => {
       r.value = !1;
     }, {
       listenerOptions: {
@@ -77,18 +84,18 @@ const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
       var e;
       t != null && t.disabled || ((e = t.handler) == null || e.call(t), r.value = !1);
     }
-    return (t, e) => (s(), d(k, { name: "vft-zoom-in-top" }, {
+    return (t, e) => (m(), d(k, { name: "vft-zoom-in-top" }, {
       default: C(() => [
         b(c("div", {
           ref_key: "contextMenuRef",
-          ref: p,
-          style: g(m(f)),
+          ref: s,
+          style: g(p(f)),
           onClick: e[0] || (e[0] = M(() => {
           }, ["stop"])),
           class: "vft-menu"
         }, [
           c("div", H, [
-            (s(!0), $(z, null, B(o.items, (i, n) => (s(), d(m(F), {
+            (m(!0), $(z, null, B(o.items, (i, n) => (m(), d(p(F), {
               onClick: (l) => x(i),
               index: n + i.text,
               title: i.text,
@@ -100,7 +107,7 @@ const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
             }, null, 8, ["onClick", "index", "title", "divider", "disabled", "icon"]))), 128))
           ])
         ], 4), [
-          [E, m(r)]
+          [E, p(r)]
         ])
       ]),
       _: 1
@@ -108,6 +115,6 @@ const H = { class: "vft-sub-menu" }, xt = /* @__PURE__ */ w({
   }
 });
 export {
-  xt as default
+  bt as default
 };
 //# sourceMappingURL=context-menu.vue2.mjs.map

package/es/components/context-menu/context-menu.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.vue2.mjs","sources":["../../../../../packages/components/context-menu/context-menu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useClickAway, useEventListener, useTimeoutFn } from '@vft/use';\nimport { computed, ref, type CSSProperties } from 'vue';\nimport type { Axis, ContextMenuItem } from './types';\nimport { VftMenuItem as MenuItem } from '@vft-ui/components';\n\ninterface Props {\n  axis?: Axis;\n  styles?: CSSProperties;\n  width?: number;\n  items?: ContextMenuItem[];\n}\n\ndefineProps({\n  \"axis\": null,\n  \"styles\": null,\n  \"width\": null,\n  \"items\": null\n})\n\nlet contextMenuRef = ref();\n\nconst getStyle = computed((): CSSProperties => {\n  const { x, y } = __props.axis || { x: 0, y: 0 };\n  const menuHeight = (__props.items || []).length * 40;\n  const menuWidth = __props.width || 0;\n  const body = document.body;\n\n  const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;\n  const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;\n  return {\n    zIndex: 3000,\n    ...__props.styles,\n    position: 'fixed',\n    width: `${__props.width}px`,\n    left: `${left + 1}px`,\n    top: `${top + 1}px`\n  };\n});\n\nlet show = ref(false);\n\nuseTimeoutFn(() => {\n  show.value = true;\n}, 0);\n\nuseClickAway(contextMenuRef, () => {\n  show.value = false;\n}, {\n  listenerOptions: {\n    capture: true\n  }\n});\n\nuseEventListener(window, 'scroll', () => {\n  show.value = false;\n}, {\n  capture: true\n});\n\nuseEventListener(window, 'drag', () => {\n  show.value = false;\n}, {\n  capture: true\n});\n\nfunction handleClick (item: ContextMenuItem) {\n  if (!item?.disabled) {\n    item.handler?.();\n    show.value = false;\n  }\n}\n</script>\n\n<template>\n  <transition name=\"vft-zoom-in-top\">\n    <div ref=\"contextMenuRef\" v-show=\"show\" :style=\"getStyle\" @click.stop class=\"vft-menu\">\n      <div class=\"vft-sub-menu\">\n        <menu-item v-for=\"(item, index) in items\"\n          @click=\"handleClick(item)\"\n          :index=\"index + item.text\"\n          :title=\"item.text\"\n          :divider=\"item.divider\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.iconCfg\"\n          isAloneUse\n          :key=\"index\" />\n      </div>\n    </div>\n  </transition>\n</template>\n\n"],"names":["contextMenuRef","ref","getStyle","computed","x","y","__props","menuHeight","menuWidth","body","left","top","show","useTimeoutFn","useClickAway","useEventListener","handleClick","item","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,QAAIA,IAAiBC;AAEf,UAAAC,IAAWC,EAAS,MAAqB;AACvC,YAAA,EAAE,GAAAC,GAAG,GAAAC,EAAM,IAAAC,EAAQ,QAAQ,EAAE,GAAG,GAAG,GAAG,KACtCC,KAAcD,EAAQ,SAAS,IAAI,SAAS,IAC5CE,IAAYF,EAAQ,SAAS,GAC7BG,IAAO,SAAS,MAEhBC,IAAOD,EAAK,cAAcL,IAAII,IAAYJ,IAAII,IAAYJ,GAC1DO,IAAMF,EAAK,eAAeJ,IAAIE,IAAaF,IAAIE,IAAaF;AAC3D,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAGC,EAAQ;AAAA,QACX,UAAU;AAAA,QACV,OAAO,GAAGA,EAAQ;AAAA,QAClB,MAAM,GAAGI,IAAO;AAAA,QAChB,KAAK,GAAGC,IAAM;AAAA,MAAA;AAAA,IAChB,CACD;AAEG,QAAAC,IAAOX,EAAI,EAAK;AAEpB,IAAAY,EAAa,MAAM;AACjB,MAAAD,EAAK,QAAQ;AAAA,OACZ,CAAC,GAEJE,EAAad,GAAgB,MAAM;AACjC,MAAAY,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,iBAAiB;AAAA,QACf,SAAS;AAAA,MACX;AAAA,IAAA,CACD,GAEgBG,EAAA,QAAQ,UAAU,MAAM;AACvC,MAAAH,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,SAAS;AAAA,IAAA,CACV,GAEgBG,EAAA,QAAQ,QAAQ,MAAM;AACrC,MAAAH,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,SAAS;AAAA,IAAA,CACV;AAED,aAASI,EAAaC,GAAuB;;AACvC,MAACA,KAAA,QAAAA,EAAM,cACTC,IAAAD,EAAK,YAAL,QAAAC,EAAA,KAAAD,IACAL,EAAK,QAAQ;AAAA,IAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"context-menu.vue2.mjs","sources":["../../../../../packages/components/context-menu/context-menu.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useClickAway, useEventListener, useTimeoutFn } from '@vft/use';\nimport { computed, ref, type CSSProperties } from 'vue';\nimport type { Axis, ContextMenuItem } from './types';\nimport { VftMenuItem as MenuItem } from '@vft-ui/components';\n\ninterface Props {\n  axis?: Axis;\n  styles?: CSSProperties;\n  width?: number;\n  items?: ContextMenuItem[];\n}\n\ndefineProps({\n  \"axis\": null,\n  \"styles\": null,\n  \"width\": null,\n  \"items\": null\n})\n\nlet contextMenuRef = ref();\n\nconst getStyle = computed((): CSSProperties => {\n  const { x, y } = __props.axis || { x: 0, y: 0 };\n  const menuHeight = (__props.items || []).length * 40;\n  const menuWidth = __props.width || 0;\n  const body = document.body;\n\n  const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;\n  const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;\n  return {\n    zIndex: 3000,\n    ...__props.styles,\n    position: 'fixed',\n    width: `${__props.width}px`,\n    left: `${left + 1}px`,\n    top: `${top + 1}px`\n  };\n});\n\nlet show = ref(false);\n\nuseTimeoutFn(() => {\n  show.value = true;\n}, 0);\n\nuseClickAway(contextMenuRef, () => {\n  show.value = false;\n}, {\n  listenerOptions: {\n    capture: true\n  }\n});\n\nuseEventListener(window, 'scroll', () => {\n  show.value = false;\n}, {\n  capture: true\n});\n\nuseEventListener(window, 'drag', () => {\n  show.value = false;\n}, {\n  capture: true\n});\n\nfunction handleClick (item: ContextMenuItem) {\n  if (!item?.disabled) {\n    item.handler?.();\n    show.value = false;\n  }\n}\n</script>\n\n<template>\n  <transition name=\"vft-zoom-in-top\">\n    <div ref=\"contextMenuRef\" v-show=\"show\" :style=\"getStyle\" @click.stop class=\"vft-menu\">\n      <div class=\"vft-sub-menu\">\n        <menu-item v-for=\"(item, index) in items\"\n          @click=\"handleClick(item)\"\n          :index=\"index + item.text\"\n          :title=\"item.text\"\n          :divider=\"item.divider\"\n          :disabled=\"item.disabled\"\n          :icon=\"item.iconCfg\"\n          isAloneUse\n          :key=\"index\" />\n      </div>\n    </div>\n  </transition>\n</template>\n\n"],"names":["contextMenuRef","ref","getStyle","computed","x","y","__props","menuHeight","menuWidth","body","left","top","show","useTimeoutFn","useClickAway","useEventListener","handleClick","item","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,QAAIA,IAAiBC;AAEf,UAAAC,IAAWC,EAAS,MAAqB;AACvC,YAAA,EAAE,GAAAC,GAAG,GAAAC,EAAM,IAAAC,EAAQ,QAAQ,EAAE,GAAG,GAAG,GAAG,KACtCC,KAAcD,EAAQ,SAAS,IAAI,SAAS,IAC5CE,IAAYF,EAAQ,SAAS,GAC7BG,IAAO,SAAS,MAEhBC,IAAOD,EAAK,cAAcL,IAAII,IAAYJ,IAAII,IAAYJ,GAC1DO,IAAMF,EAAK,eAAeJ,IAAIE,IAAaF,IAAIE,IAAaF;AAC3D,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAGC,EAAQ;AAAA,QACX,UAAU;AAAA,QACV,OAAO,GAAGA,EAAQ;AAAA,QAClB,MAAM,GAAGI,IAAO;AAAA,QAChB,KAAK,GAAGC,IAAM;AAAA,MAAA;AAAA,IAChB,CACD;AAEG,QAAAC,IAAOX,EAAI,EAAK;AAEpB,IAAAY,EAAa,MAAM;AACjB,MAAAD,EAAK,QAAQ;AAAA,OACZ,CAAC,GAEJE,EAAad,GAAgB,MAAM;AACjC,MAAAY,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,iBAAiB;AAAA,QACf,SAAS;AAAA,MACX;AAAA,IAAA,CACD,GAEgBG,EAAA,QAAQ,UAAU,MAAM;AACvC,MAAAH,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,SAAS;AAAA,IAAA,CACV,GAEgBG,EAAA,QAAQ,QAAQ,MAAM;AACrC,MAAAH,EAAK,QAAQ;AAAA,IAAA,GACZ;AAAA,MACD,SAAS;AAAA,IAAA,CACV;AAED,aAASI,EAAaC,GAAuB;;AACvC,MAACA,KAAA,QAAAA,EAAM,cACTC,IAAAD,EAAK,YAAL,QAAAC,EAAA,KAAAD,IACAL,EAAK,QAAQ;AAAA,IAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/index.d.ts

@@ -32,3 +32,6 @@ export * from './qrcode';
 export * from './overlay';
 export * from './clamp';
 export * from './clamp-toggle';
+export * from './page-wrapper';
+export * from './message';
+export * from './loading';

package/es/components/index.mjs

@@ -1,105 +1,121 @@
 import { VftDivider as r } from "./divider/index.mjs";
 import { VftIcon as f } from "./icon/index.mjs";
 import { VftAvatar as m } from "./avatar/index.mjs";
-import { VftEmpty as n } from "./empty/index.mjs";
-import { VftResult as V } from "./result/index.mjs";
-import { VftException as u } from "./exception/index.mjs";
-import { VftTabPane as l, VftTabs as g } from "./tabs/index.mjs";
-import { VftPopper as T } from "./popper/index.mjs";
-import { VftCollapseTransition as b } from "./collapse-transition/index.mjs";
-import { VftTooltip as c } from "./tooltip/index.mjs";
-import { VftPopover as M } from "./popover/index.mjs";
-import { VftMenu as v, VftMenuItem as D, VftMenuItemGroup as E, VftSubMenu as L } from "./menu/index.mjs";
-import { createContextMenu as S, destroyContextMenu as w } from "./context-menu/createContextMenu.mjs";
+import { VftEmpty as a } from "./empty/index.mjs";
+import { VftResult as i } from "./result/index.mjs";
+import { VftException as s } from "./exception/index.mjs";
+import { VftTabPane as u, VftTabs as l } from "./tabs/index.mjs";
+import { VftPopper as C } from "./popper/index.mjs";
+import { VftCollapseTransition as c } from "./collapse-transition/index.mjs";
+import { VftTooltip as L } from "./tooltip/index.mjs";
+import { VftPopover as b } from "./popover/index.mjs";
+import { VftMenu as M, VftMenuItem as D, VftMenuItemGroup as I, VftSubMenu as E } from "./menu/index.mjs";
+import { createContextMenu as G, destroyContextMenu as w } from "./context-menu/createContextMenu.mjs";
 import { useContextMenu as K } from "./context-menu/useContextMenu.mjs";
 import { VftMultipleTabs as k } from "./multiple-tabs/index.mjs";
 import { VftHeaderLayout as B } from "./header-layout/index.mjs";
 import { VftFooterLayout as O } from "./footer-layout/index.mjs";
-import { VftIframeLayout as h } from "./iframe-layout/index.mjs";
-import { VftRouterViewContent as q } from "./router-view-content/index.mjs";
-import { VftLogo as J } from "./logo/index.mjs";
-import { VftBackTop as U } from "./back-top/index.mjs";
+import { VftIframeLayout as W } from "./iframe-layout/index.mjs";
+import { VftRouterViewContent as j } from "./router-view-content/index.mjs";
+import { VftLogo as z } from "./logo/index.mjs";
+import { VftBackTop as N } from "./back-top/index.mjs";
 import { VftConfigProvider as X } from "./config-provider/index.mjs";
 import { VftDescriptions as Z, VftDescriptionsItem as _ } from "./descriptions/index.mjs";
 import { VftFullScreen as oo } from "./full-screen/index.mjs";
 import { VftIconText as ro } from "./icon-text/index.mjs";
 import { VftImage as fo } from "./image/index.mjs";
 import { VftInput as mo } from "./input/index.mjs";
-import { VftLink as no } from "./link/index.mjs";
-import { VftPagination as Vo } from "./pagination/index.mjs";
-import { VftTag as uo } from "./tag/index.mjs";
-import { VftSideMenu as lo } from "./side-menu/index.mjs";
+import { VftLink as ao } from "./link/index.mjs";
+import { VftPagination as io } from "./pagination/index.mjs";
+import { VftTag as so } from "./tag/index.mjs";
+import { VftSideMenu as uo } from "./side-menu/index.mjs";
 import { VftQrcode as Co } from "./qrcode/index.mjs";
-import { VftOverlay as bo } from "./overlay/index.mjs";
-import { VftClamp as co } from "./clamp/index.mjs";
-import { VftClampToggle as Mo } from "./clamp-toggle/index.mjs";
-import { EmptyEnum as vo } from "./empty/constants.mjs";
-import { TabsRootContextKey as Eo } from "./tabs/types.mjs";
-import { default as Go } from "./popper/arrow.vue2.mjs";
-import { default as wo } from "./popper/trigger.vue2.mjs";
-import { default as Ko } from "./popper/content.vue2.mjs";
-import { useTabDropdown as ko } from "./multiple-tabs/use/use-tab-dropdown.mjs";
-import { initAffixTabs as Bo, useTabsDrag as Ho } from "./multiple-tabs/use/use-multiple-tabs.mjs";
-import { configProviderContextKey as Qo } from "./config-provider/constants.mjs";
-import { provideGlobalConfig as jo, useGlobalComponentSettings as qo, useGlobalConfig as zo } from "./config-provider/hooks/use-global-config.mjs";
-import { paginationEmits as No } from "./pagination/pagination.mjs";
-import { elPaginationKey as Wo, usePagination as Xo } from "./pagination/usePagination.mjs";
+import { VftOverlay as co } from "./overlay/index.mjs";
+import { VftClamp as Lo } from "./clamp/index.mjs";
+import { VftClampToggle as bo } from "./clamp-toggle/index.mjs";
+import { VftPageWrapper as Mo } from "./page-wrapper/index.mjs";
+import { VftMessage as Io } from "./message/index.mjs";
+import { VftLoading as So } from "./loading/index.mjs";
+import { EmptyEnum as wo } from "./empty/constants.mjs";
+import { TabsRootContextKey as Ko } from "./tabs/types.mjs";
+import { default as ko } from "./popper/arrow.vue2.mjs";
+import { default as Bo } from "./popper/trigger.vue2.mjs";
+import { default as Oo } from "./popper/content.vue2.mjs";
+import { useTabDropdown as Wo } from "./multiple-tabs/use/use-tab-dropdown.mjs";
+import { initAffixTabs as jo, useTabsDrag as qo } from "./multiple-tabs/use/use-multiple-tabs.mjs";
+import { configProviderContextKey as Jo, messageConfig as No } from "./config-provider/constants.mjs";
+import { provideGlobalConfig as Xo, useGlobalComponentSettings as Yo, useGlobalConfig as Zo } from "./config-provider/hooks/use-global-config.mjs";
+import { paginationEmits as $o } from "./pagination/pagination.mjs";
+import { elPaginationKey as tt, usePagination as rt } from "./pagination/usePagination.mjs";
+import { messageDefaults as ft, messageTypes as pt } from "./message/types.mjs";
+import { vLoading as xt, createLoadingDirective as at, vLoading as nt } from "./loading/directive.mjs";
+import { Loading as Vt } from "./loading/service.mjs";
 export {
-  vo as EmptyEnum,
-  Eo as TabsRootContextKey,
+  wo as EmptyEnum,
+  Ko as TabsRootContextKey,
   m as VftAvatar,
-  U as VftBackTop,
-  co as VftClamp,
-  Mo as VftClampToggle,
-  b as VftCollapseTransition,
+  N as VftBackTop,
+  Lo as VftClamp,
+  bo as VftClampToggle,
+  c as VftCollapseTransition,
   X as VftConfigProvider,
   Z as VftDescriptions,
   _ as VftDescriptionsItem,
   r as VftDivider,
-  n as VftEmpty,
-  u as VftException,
+  a as VftEmpty,
+  s as VftException,
   O as VftFooterLayout,
   oo as VftFullScreen,
   B as VftHeaderLayout,
   f as VftIcon,
   ro as VftIconText,
-  h as VftIframeLayout,
+  W as VftIframeLayout,
   fo as VftImage,
   mo as VftInput,
-  no as VftLink,
-  J as VftLogo,
-  v as VftMenu,
+  ao as VftLink,
+  So as VftLoading,
+  xt as VftLoadingDirective,
+  Vt as VftLoadingService,
+  z as VftLogo,
+  M as VftMenu,
   D as VftMenuItem,
-  E as VftMenuItemGroup,
+  I as VftMenuItemGroup,
+  Io as VftMessage,
   k as VftMultipleTabs,
-  bo as VftOverlay,
-  Vo as VftPagination,
-  M as VftPopover,
-  T as VftPopper,
-  Go as VftPopperArrow,
-  Ko as VftPopperContent,
-  wo as VftPopperTrigger,
+  co as VftOverlay,
+  Mo as VftPageWrapper,
+  io as VftPagination,
+  b as VftPopover,
+  C as VftPopper,
+  ko as VftPopperArrow,
+  Oo as VftPopperContent,
+  Bo as VftPopperTrigger,
   Co as VftQrcode,
-  V as VftResult,
-  q as VftRouterViewContent,
-  lo as VftSideMenu,
-  L as VftSubMenu,
-  l as VftTabPane,
-  g as VftTabs,
-  uo as VftTag,
-  c as VftTooltip,
-  Qo as configProviderContextKey,
-  S as createContextMenu,
+  i as VftResult,
+  j as VftRouterViewContent,
+  uo as VftSideMenu,
+  E as VftSubMenu,
+  u as VftTabPane,
+  l as VftTabs,
+  so as VftTag,
+  L as VftTooltip,
+  Jo as configProviderContextKey,
+  G as createContextMenu,
+  at as createLoadingDirective,
   w as destroyContextMenu,
-  Wo as elPaginationKey,
-  Bo as initAffixTabs,
-  No as paginationEmits,
-  jo as provideGlobalConfig,
+  tt as elPaginationKey,
+  jo as initAffixTabs,
+  No as messageConfig,
+  ft as messageDefaults,
+  pt as messageTypes,
+  $o as paginationEmits,
+  Xo as provideGlobalConfig,
   K as useContextMenu,
-  qo as useGlobalComponentSettings,
-  zo as useGlobalConfig,
-  Xo as usePagination,
-  ko as useTabDropdown,
-  Ho as useTabsDrag
+  Yo as useGlobalComponentSettings,
+  Zo as useGlobalConfig,
+  rt as usePagination,
+  Wo as useTabDropdown,
+  qo as useTabsDrag,
+  nt as vLoading
 };
 //# sourceMappingURL=index.mjs.map

package/es/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/loading/directive.d.ts

@@ -0,0 +1,18 @@
+import type { Directive, DirectiveBinding, UnwrapRef } from 'vue';
+import type { LoadingOptions } from './types';
+import type { LoadingInstance } from './loading';
+declare const INSTANCE_KEY: unique symbol;
+export type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;
+export interface VriLoading extends HTMLElement {
+    [INSTANCE_KEY]?: {
+        instance: LoadingInstance;
+        options: LoadingOptions;
+    };
+}
+export declare const vLoading: Directive<VriLoading, LoadingBinding>;
+export declare function createLoadingDirective(defaultLoadingCfg?: UnwrapRef<LoadingOptions>): {
+    mounted(el: VriLoading, binding: DirectiveBinding<LoadingBinding>): void;
+    updated(el: VriLoading, binding: DirectiveBinding<LoadingBinding>): void;
+    unmounted(el: VriLoading): void;
+};
+export {};

package/es/components/loading/directive.mjs

@@ -0,0 +1,50 @@
+import { isRef as x, ref as V } from "vue";
+import { isObject as m, isString as k } from "@vft/utils";
+import { Loading as y } from "./service.mjs";
+const c = Symbol("VriLoading"), f = (l, o) => {
+  const e = o.instance, s = (a) => m(o.value) ? o.value[a] : void 0, p = (a) => {
+    const r = k(a) && (e == null ? void 0 : e[a]) || a;
+    return r && V(r);
+  }, t = (a) => p(s(a)), u = s("fullscreen") ?? o.modifiers.fullscreen, v = {
+    text: t("text"),
+    svg: t("svg"),
+    svgViewBox: t("svgViewBox"),
+    spinner: t("spinner"),
+    visible: t("visible"),
+    background: t("background"),
+    customClass: t("customClass"),
+    rotate: t("rotate"),
+    img: t("img"),
+    fullscreen: u,
+    target: s("target") ?? (u ? void 0 : l),
+    body: s("body") ?? o.modifiers.body,
+    lock: s("lock") ?? o.modifiers.lock
+  };
+  l[c] = {
+    options: v,
+    instance: y(v)
+  };
+}, B = (l, o) => {
+  for (const e of Object.keys(o))
+    x(o[e]) && (o[e].value = l[e]);
+}, I = E();
+function E(l) {
+  return {
+    mounted(o, e) {
+      e.value.visible === !1 ? e.value = void 0 : e.value = { ...l, ...e.value }, e.value && f(o, e);
+    },
+    updated(o, e) {
+      const s = o[c];
+      e.oldValue !== e.value && (e.value && !e.oldValue ? (e.value = { ...l, ...e.value }, f(o, e)) : e.value && e.oldValue ? m(e.value) && (e.value = { ...l, ...e.value }, B(e.value, s.options)) : s == null || s.instance.close());
+    },
+    unmounted(o) {
+      var e;
+      (e = o[c]) == null || e.instance.close();
+    }
+  };
+}
+export {
+  E as createLoadingDirective,
+  I as vLoading
+};
+//# sourceMappingURL=directive.mjs.map

package/es/components/loading/directive.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"directive.mjs","sources":["../../../../../packages/components/loading/directive.ts"],"sourcesContent":["import { isRef, ref } from 'vue';\nimport { isObject, isString } from '@vft/utils';\nimport { Loading } from './service';\nimport type { Directive, DirectiveBinding, UnwrapRef } from 'vue';\nimport type { LoadingOptions } from './types';\nimport type { LoadingInstance } from './loading';\n\nconst INSTANCE_KEY = Symbol('VriLoading');\n\nexport type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;\n\nexport interface VriLoading extends HTMLElement {\n  [INSTANCE_KEY]?: {\n    instance: LoadingInstance;\n    options: LoadingOptions;\n  };\n}\n\nconst createInstance = (el: VriLoading, binding: DirectiveBinding<LoadingBinding>) => {\n  const vm = binding.instance;\n\n  // @ts-ignore\n  const getBindingProp = <K extends keyof LoadingOptions>(key: K): LoadingOptions[K] => (isObject(binding.value) ? binding.value[key] : undefined);\n\n  const resolveExpression = (key: any) => {\n    // @ts-ignore\n    const data = (isString(key) && vm?.[key]) || key;\n    if (data) return ref(data);\n    else return data;\n  };\n\n  const getProp = <K extends keyof LoadingOptions>(name: K) => resolveExpression(getBindingProp(name));\n\n  const fullscreen = getBindingProp('fullscreen') ?? binding.modifiers.fullscreen;\n\n  const options: LoadingOptions = {\n    text: getProp('text'),\n    svg: getProp('svg'),\n    svgViewBox: getProp('svgViewBox'),\n    spinner: getProp('spinner'),\n    visible: getProp('visible'),\n    background: getProp('background'),\n    customClass: getProp('customClass'),\n    rotate: getProp('rotate'),\n    img: getProp('img'),\n    fullscreen,\n    target: getBindingProp('target') ?? (fullscreen ? undefined : el),\n    body: getBindingProp('body') ?? binding.modifiers.body,\n    lock: getBindingProp('lock') ?? binding.modifiers.lock\n  };\n\n  el[INSTANCE_KEY] = {\n    options,\n    instance: Loading(options)\n  };\n};\n\nconst updateOptions = (newOptions: UnwrapRef<LoadingOptions>, originalOptions: LoadingOptions) => {\n  for (const key of Object.keys(originalOptions)) {\n    // @ts-ignore\n    if (isRef(originalOptions[key])) originalOptions[key].value = newOptions[key];\n  }\n};\n\nexport const vLoading: Directive<VriLoading, LoadingBinding> = createLoadingDirective();\n\nexport function createLoadingDirective(defaultLoadingCfg?: UnwrapRef<LoadingOptions>) {\n  return {\n    mounted(el: VriLoading, binding: DirectiveBinding<LoadingBinding>) {\n      // @ts-ignore\n      if (binding.value.visible === false) {\n        binding.value = undefined;\n      } else {\n        binding.value = { ...defaultLoadingCfg, ...binding.value };\n      }\n\n      if (binding.value) {\n        createInstance(el, binding);\n      }\n    },\n    updated(el: VriLoading, binding: DirectiveBinding<LoadingBinding>) {\n      const instance = el[INSTANCE_KEY];\n      if (binding.oldValue !== binding.value) {\n        if (binding.value && !binding.oldValue) {\n          // @ts-ignore\n          binding.value = { ...defaultLoadingCfg, ...binding.value };\n\n          createInstance(el, binding);\n        } else if (binding.value && binding.oldValue) {\n          if (isObject(binding.value)) {\n            binding.value = { ...defaultLoadingCfg, ...binding.value };\n            updateOptions(binding.value, instance!.options);\n          }\n        } else {\n          instance?.instance.close();\n        }\n      }\n    },\n    unmounted(el: VriLoading) {\n      el[INSTANCE_KEY]?.instance.close();\n    }\n  };\n}\n"],"names":["INSTANCE_KEY","createInstance","el","binding","vm","getBindingProp","key","isObject","resolveExpression","data","isString","ref","getProp","name","fullscreen","options","Loading","updateOptions","newOptions","originalOptions","isRef","vLoading","createLoadingDirective","defaultLoadingCfg","instance","_a"],"mappings":";;;AAOA,MAAMA,IAAe,OAAO,YAAY,GAWlCC,IAAiB,CAACC,GAAgBC,MAA8C;AACpF,QAAMC,IAAKD,EAAQ,UAGbE,IAAiB,CAAiCC,MAA+BC,EAASJ,EAAQ,KAAK,IAAIA,EAAQ,MAAMG,CAAG,IAAI,QAEhIE,IAAoB,CAACF,MAAa;AAEtC,UAAMG,IAAQC,EAASJ,CAAG,MAAKF,KAAA,gBAAAA,EAAKE,OAASA;AACzC,WAAAG,KAAaE,EAAIF,CAAI;AAAA,EACb,GAGRG,IAAU,CAAiCC,MAAYL,EAAkBH,EAAeQ,CAAI,CAAC,GAE7FC,IAAaT,EAAe,YAAY,KAAKF,EAAQ,UAAU,YAE/DY,IAA0B;AAAA,IAC9B,MAAMH,EAAQ,MAAM;AAAA,IACpB,KAAKA,EAAQ,KAAK;AAAA,IAClB,YAAYA,EAAQ,YAAY;AAAA,IAChC,SAASA,EAAQ,SAAS;AAAA,IAC1B,SAASA,EAAQ,SAAS;AAAA,IAC1B,YAAYA,EAAQ,YAAY;AAAA,IAChC,aAAaA,EAAQ,aAAa;AAAA,IAClC,QAAQA,EAAQ,QAAQ;AAAA,IACxB,KAAKA,EAAQ,KAAK;AAAA,IAClB,YAAAE;AAAA,IACA,QAAQT,EAAe,QAAQ,MAAMS,IAAa,SAAYZ;AAAA,IAC9D,MAAMG,EAAe,MAAM,KAAKF,EAAQ,UAAU;AAAA,IAClD,MAAME,EAAe,MAAM,KAAKF,EAAQ,UAAU;AAAA,EAAA;AAGpD,EAAAD,EAAGF,CAAY,IAAI;AAAA,IACjB,SAAAe;AAAA,IACA,UAAUC,EAAQD,CAAO;AAAA,EAAA;AAE7B,GAEME,IAAgB,CAACC,GAAuCC,MAAoC;AAChG,aAAWb,KAAO,OAAO,KAAKa,CAAe;AAEvC,IAAAC,EAAMD,EAAgBb,CAAG,CAAC,MAAGa,EAAgBb,CAAG,EAAE,QAAQY,EAAWZ,CAAG;AAEhF,GAEae,IAAkDC,EAAuB;AAE/E,SAASA,EAAuBC,GAA+C;AAC7E,SAAA;AAAA,IACL,QAAQrB,GAAgBC,GAA2C;AAE7D,MAAAA,EAAQ,MAAM,YAAY,KAC5BA,EAAQ,QAAQ,SAEhBA,EAAQ,QAAQ,EAAE,GAAGoB,GAAmB,GAAGpB,EAAQ,SAGjDA,EAAQ,SACVF,EAAeC,GAAIC,CAAO;AAAA,IAE9B;AAAA,IACA,QAAQD,GAAgBC,GAA2C;AAC3D,YAAAqB,IAAWtB,EAAGF,CAAY;AAC5B,MAAAG,EAAQ,aAAaA,EAAQ,UAC3BA,EAAQ,SAAS,CAACA,EAAQ,YAE5BA,EAAQ,QAAQ,EAAE,GAAGoB,GAAmB,GAAGpB,EAAQ,SAEnDF,EAAeC,GAAIC,CAAO,KACjBA,EAAQ,SAASA,EAAQ,WAC9BI,EAASJ,EAAQ,KAAK,MACxBA,EAAQ,QAAQ,EAAE,GAAGoB,GAAmB,GAAGpB,EAAQ,SACrCc,EAAAd,EAAQ,OAAOqB,EAAU,OAAO,KAGhDA,KAAA,QAAAA,EAAU,SAAS;AAAA,IAGzB;AAAA,IACA,UAAUtB,GAAgB;;AACrB,OAAAuB,IAAAvB,EAAAF,CAAY,MAAZ,QAAAyB,EAAe,SAAS;AAAA,IAC7B;AAAA,EAAA;AAEJ;"}

package/es/components/loading/index.d.ts

@@ -0,0 +1,39 @@
+import { Loading } from './service';
+import { vLoading } from './directive';
+import type { App } from 'vue';
+export declare const VftLoading: {
+    install(app: App): void;
+    directive: import("vue").Directive<import("./directive").VriLoading, import("./directive").LoadingBinding>;
+    service: (options?: Partial<Omit<import("./types").LoadingOptionsResolved, "target" | "parent"> & {
+        target: string | HTMLElement;
+        body: boolean;
+    }>) => {
+        setText: (text: string) => void;
+        removeVriLoadingChild: () => void;
+        close: () => void;
+        handleAfterLeave: () => void;
+        vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $el: HTMLElement;
+        originalPosition: import("vue").Ref<string>;
+        originalOverflow: import("vue").Ref<string>;
+        visible: import("vue").Ref<boolean>;
+        parent: import("vue").Ref<import("./types").LoadingParentElement>;
+        background: import("vue").Ref<string>;
+        svg: import("vue").Ref<string>;
+        svgViewBox: import("vue").Ref<string>;
+        spinner: import("vue").Ref<string | boolean>;
+        img: import("vue").Ref<string | boolean>;
+        text: import("vue").Ref<string>;
+        fullscreen: import("vue").Ref<boolean>;
+        rotate: import("vue").Ref<string | boolean>;
+        lock: import("vue").Ref<boolean>;
+        customClass: import("vue").Ref<string>;
+        target: import("vue").Ref<HTMLElement>;
+        beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
+        closed?: import("vue").Ref<(() => void) | undefined> | undefined;
+    };
+};
+export default VftLoading;
+export { vLoading, vLoading as VftLoadingDirective, Loading as VftLoadingService };
+export * from './types';
+export { createLoadingDirective } from './directive';