vft 0.0.9 → 0.0.13

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

@@ -0,0 +1,470 @@
+import type { PropType as __PropType } from 'vue';
+import type { Options, Placement } from '@popperjs/core';
+import { type StyleValue } from 'vue';
+import { type Measurable } from 'vft/es/components/popper';
+import type { TooltipTriggerType } from './types';
+export interface ToolTipProps {
+    role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
+    showArrow?: boolean;
+    arrowOffset?: number;
+    virtualRef?: Measurable;
+    virtualTriggering?: boolean;
+    onMouseenter?: Function;
+    onMouseleave?: Function;
+    onClick?: Function;
+    onKeydown?: Function;
+    onFocus?: Function;
+    onBlur?: Function;
+    onContextmenu?: Function;
+    id?: string;
+    open?: boolean;
+    boundariesPadding?: number;
+    fallbackPlacements?: Placement[];
+    gpuAcceleration?: boolean;
+    offset?: number;
+    placement?: Placement;
+    popperOptions?: Partial<Options>;
+    strategy?: 'fixed' | 'absolute';
+    style?: StyleValue;
+    className?: ClassType;
+    effect?: 'light' | 'dark';
+    visible?: boolean;
+    enterable?: boolean;
+    pure?: boolean;
+    focusOnShow?: boolean;
+    trapping?: boolean;
+    popperClass?: ClassType;
+    popperStyle?: StyleValue;
+    referenceEl?: HTMLElement;
+    triggerTargetEl?: HTMLElement;
+    stopPopperMouseEvent?: boolean;
+    ariaLabel?: string;
+    zIndex?: number;
+    showAfter?: number;
+    hideAfter?: number;
+    appendTo?: HTMLElement | string;
+    content?: string;
+    rawContent?: boolean;
+    persistent?: boolean;
+    transition?: string;
+    teleported?: boolean;
+    disabled?: boolean;
+    trigger?: TooltipTriggerType;
+    triggerKeys?: string[];
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    role: {
+        type: __PropType<"dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined>;
+        required: false;
+    };
+    showArrow: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    arrowOffset: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    virtualRef: {
+        type: __PropType<Measurable | undefined>;
+        required: false;
+    };
+    virtualTriggering: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    onMouseenter: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onMouseleave: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onClick: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onKeydown: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onFocus: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onBlur: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onContextmenu: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    open: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    boundariesPadding: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    fallbackPlacements: {
+        type: __PropType<Placement[] | undefined>;
+        required: false;
+    };
+    gpuAcceleration: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    offset: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    placement: {
+        type: __PropType<Placement | undefined>;
+        required: false;
+    };
+    popperOptions: {
+        type: __PropType<Partial<Options> | undefined>;
+        required: false;
+    };
+    strategy: {
+        type: __PropType<"fixed" | "absolute" | undefined>;
+        required: false;
+    };
+    style: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    className: {
+        type: __PropType<ClassType | undefined>;
+        required: false;
+    };
+    effect: {
+        type: __PropType<"light" | "dark" | undefined>;
+        required: false;
+    };
+    visible: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    enterable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    pure: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    focusOnShow: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    trapping: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    popperClass: {
+        type: __PropType<ClassType | undefined>;
+        required: false;
+    };
+    popperStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    referenceEl: {
+        type: __PropType<HTMLElement | undefined>;
+        required: false;
+    };
+    triggerTargetEl: {
+        type: __PropType<HTMLElement | undefined>;
+        required: false;
+    };
+    stopPopperMouseEvent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    ariaLabel: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    showAfter: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    hideAfter: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    appendTo: {
+        type: __PropType<string | HTMLElement | undefined>;
+        required: false;
+    };
+    content: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    rawContent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    persistent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    transition: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    trigger: {
+        type: __PropType<TooltipTriggerType | undefined>;
+        required: false;
+    };
+    triggerKeys: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+}, {
+    /**
+     * @description el-popper component instance
+     */
+    popperRef: import("vue").Ref<any>;
+    /**
+     * @description el-tooltip-content component instance
+     */
+    contentRef: import("vue").Ref<any>;
+    /**
+     * @description validate current focus event is trigger inside el-tooltip-content
+     */
+    isFocusInsideContent: () => boolean | undefined;
+    /**
+     * @description update el-popper component instance
+     */
+    updatePopper: () => void;
+    /**
+     * @description expose onOpen function to mange el-tooltip open state
+     */
+    onOpen: (event?: Event | undefined) => void;
+    /**
+     * @description expose onOpen function to mange el-tooltip open state
+     */
+    onClose: (event?: Event | undefined) => void;
+    /**
+     * @description expose hide function
+     */
+    hide: (event?: Event | undefined) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open" | "before-show" | "before-hide" | "show" | "hide")[], "close" | "open" | "before-show" | "before-hide" | "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    role: {
+        type: __PropType<"dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined>;
+        required: false;
+    };
+    showArrow: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    arrowOffset: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    virtualRef: {
+        type: __PropType<Measurable | undefined>;
+        required: false;
+    };
+    virtualTriggering: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    onMouseenter: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onMouseleave: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onClick: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onKeydown: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onFocus: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onBlur: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    onContextmenu: {
+        type: __PropType<Function | undefined>;
+        required: false;
+    };
+    id: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    open: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    boundariesPadding: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    fallbackPlacements: {
+        type: __PropType<Placement[] | undefined>;
+        required: false;
+    };
+    gpuAcceleration: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    offset: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    placement: {
+        type: __PropType<Placement | undefined>;
+        required: false;
+    };
+    popperOptions: {
+        type: __PropType<Partial<Options> | undefined>;
+        required: false;
+    };
+    strategy: {
+        type: __PropType<"fixed" | "absolute" | undefined>;
+        required: false;
+    };
+    style: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    className: {
+        type: __PropType<ClassType | undefined>;
+        required: false;
+    };
+    effect: {
+        type: __PropType<"light" | "dark" | undefined>;
+        required: false;
+    };
+    visible: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    enterable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    pure: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    focusOnShow: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    trapping: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    popperClass: {
+        type: __PropType<ClassType | undefined>;
+        required: false;
+    };
+    popperStyle: {
+        type: __PropType<StyleValue | undefined>;
+        required: false;
+    };
+    referenceEl: {
+        type: __PropType<HTMLElement | undefined>;
+        required: false;
+    };
+    triggerTargetEl: {
+        type: __PropType<HTMLElement | undefined>;
+        required: false;
+    };
+    stopPopperMouseEvent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    ariaLabel: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    zIndex: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    showAfter: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    hideAfter: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    appendTo: {
+        type: __PropType<string | HTMLElement | undefined>;
+        required: false;
+    };
+    content: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    rawContent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    persistent: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    transition: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    teleported: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    trigger: {
+        type: __PropType<TooltipTriggerType | undefined>;
+        required: false;
+    };
+    triggerKeys: {
+        type: __PropType<string[] | undefined>;
+        required: false;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    "onBefore-show"?: ((...args: any[]) => any) | undefined;
+    "onBefore-hide"?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/es/components/tooltip/tooltip.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./tooltip.vue2.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=tooltip.vue.mjs.map

package/es/components/tooltip/tooltip.vue.mjs.map

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

package/es/components/tooltip/tooltip.vue2.mjs

@@ -0,0 +1,224 @@
+import { defineComponent as k, ref as r, computed as P, provide as I, readonly as S, unref as i, watch as M, onDeactivated as N, openBlock as f, createBlock as h, withCtx as g, createVNode as b, renderSlot as w, createCommentVNode as v, createElementBlock as B, toDisplayString as $ } from "vue";
+import { EVENT_CODE as C } from "@vft/constants";
+import { VftPopper as x } from "../popper/index.mjs";
+import { isBoolean as H } from "@vft/utils";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.mjs";
+import { useId as L } from "../../hooks/use-id/index.mjs";
+import { usePopperContainer as z } from "../../hooks/use-popper-container/index.mjs";
+import { useDelayedToggle as D } from "../../hooks/use-delayed-toggle/index.mjs";
+import "@vueuse/core";
+import "@vue/shared";
+import { TOOLTIP_INJECTION_KEY as K } from "./constants.mjs";
+import V from "./trigger.vue2.mjs";
+import J from "./content.vue2.mjs";
+import { useTooltipModelToggle as U } from "./utils.mjs";
+import Y from "../popper/arrow.vue2.mjs";
+const j = ["innerHTML"], q = { key: 1 }, G = k({
+  name: "vft-tooltip"
+}), ce = /* @__PURE__ */ k({
+  ...G,
+  props: {
+    role: { default: "tooltip" },
+    showArrow: { type: Boolean, default: !0 },
+    arrowOffset: { default: 5 },
+    virtualRef: null,
+    virtualTriggering: { type: Boolean },
+    onMouseenter: { type: Function },
+    onMouseleave: { type: Function },
+    onClick: { type: Function },
+    onKeydown: { type: Function },
+    onFocus: { type: Function },
+    onBlur: { type: Function },
+    onContextmenu: { type: Function },
+    id: null,
+    open: { type: Boolean },
+    boundariesPadding: { default: 0 },
+    fallbackPlacements: null,
+    gpuAcceleration: { type: Boolean, default: !0 },
+    offset: { default: 12 },
+    placement: { default: "bottom" },
+    popperOptions: { default: {} },
+    strategy: { default: "absolute" },
+    style: null,
+    className: null,
+    effect: { default: "dark" },
+    visible: { type: Boolean, default: null },
+    enterable: { type: Boolean, default: !0 },
+    pure: { type: Boolean },
+    focusOnShow: { type: Boolean, default: !1 },
+    trapping: { type: Boolean, default: !1 },
+    popperClass: null,
+    popperStyle: null,
+    referenceEl: null,
+    triggerTargetEl: null,
+    stopPopperMouseEvent: { type: Boolean, default: !0 },
+    ariaLabel: null,
+    zIndex: null,
+    showAfter: { default: 0 },
+    hideAfter: { default: 200 },
+    appendTo: null,
+    content: { default: "" },
+    rawContent: { type: Boolean, default: !1 },
+    persistent: { type: Boolean },
+    transition: { default: "vft-fade-in-linear" },
+    teleported: { type: Boolean, default: !0 },
+    disabled: { type: Boolean },
+    trigger: { default: "hover" },
+    triggerKeys: { default: [C.enter, C.space] }
+  },
+  emits: ["before-show", "before-hide", "show", "hide", "open", "close"],
+  setup(e, { expose: T, emit: a }) {
+    z();
+    const A = L(), u = r(), d = r(), m = () => {
+      var o;
+      const t = i(u);
+      t && ((o = t.popperInstanceRef) == null || o.update());
+    }, n = r(!1), l = r(), { show: E, hide: s, hasUpdateHandler: O } = U({
+      indicator: n,
+      toggleReason: l
+    }), { onOpen: c, onClose: p } = D({
+      showAfter: e.showAfter,
+      hideAfter: e.hideAfter,
+      open: E,
+      close: s
+    }), R = P(() => H(e.visible) && !O.value);
+    I(K, {
+      controlled: R,
+      id: A,
+      open: S(n),
+      trigger: e.trigger,
+      onOpen: (t) => {
+        c(t);
+      },
+      onClose: (t) => {
+        p(t);
+      },
+      onToggle: (t) => {
+        i(n) ? p(t) : c(t);
+      },
+      onShow: () => {
+        a("show", l.value);
+      },
+      onHide: () => {
+        a("hide", l.value);
+      },
+      onBeforeShow: () => {
+        a("before-show", l.value);
+      },
+      onBeforeHide: () => {
+        a("before-hide", l.value);
+      },
+      updatePopper: m
+    }), M(
+      () => e.disabled,
+      (t) => {
+        t && n.value && (n.value = !1);
+      }
+    );
+    const F = () => {
+      var o, y;
+      const t = (y = (o = d.value) == null ? void 0 : o.contentRef) == null ? void 0 : y.popperContentRef;
+      return t && t.contains(document.activeElement);
+    };
+    return N(() => n.value && s()), T({
+      /**
+       * @description el-popper component instance
+       */
+      popperRef: u,
+      /**
+       * @description el-tooltip-content component instance
+       */
+      contentRef: d,
+      /**
+       * @description validate current focus event is trigger inside el-tooltip-content
+       */
+      isFocusInsideContent: F,
+      /**
+       * @description update el-popper component instance
+       */
+      updatePopper: m,
+      /**
+       * @description expose onOpen function to mange el-tooltip open state
+       */
+      onOpen: c,
+      /**
+       * @description expose onOpen function to mange el-tooltip open state
+       */
+      onClose: p,
+      /**
+       * @description expose hide function
+       */
+      hide: s
+    }), (t, o) => (f(), h(i(x), {
+      ref_key: "popperRef",
+      ref: u,
+      role: e.role
+    }, {
+      default: g(() => [
+        b(V, {
+          disabled: e.disabled,
+          trigger: e.trigger,
+          "trigger-keys": e.triggerKeys,
+          "virtual-ref": e.virtualRef,
+          "virtual-triggering": e.virtualTriggering
+        }, {
+          default: g(() => [
+            t.$slots.default ? w(t.$slots, "default", { key: 0 }) : v("", !0)
+          ]),
+          _: 3
+        }, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
+        b(J, {
+          ref_key: "contentRef",
+          ref: d,
+          "aria-label": e.ariaLabel,
+          "boundaries-padding": e.boundariesPadding,
+          content: e.content,
+          disabled: e.disabled,
+          effect: e.effect,
+          enterable: e.enterable,
+          "fallback-placements": e.fallbackPlacements,
+          "hide-after": e.hideAfter,
+          "gpu-acceleration": e.gpuAcceleration,
+          offset: e.offset,
+          persistent: e.persistent,
+          "popper-class": e.popperClass,
+          "popper-style": e.popperStyle,
+          placement: e.placement,
+          "popper-options": e.popperOptions,
+          pure: e.pure,
+          "raw-content": e.rawContent,
+          "reference-el": e.referenceEl,
+          "trigger-target-el": e.triggerTargetEl,
+          "show-after": e.showAfter,
+          strategy: e.strategy,
+          teleported: e.teleported,
+          transition: e.transition,
+          "virtual-triggering": e.virtualTriggering,
+          "z-index": e.zIndex,
+          "append-to": e.appendTo
+        }, {
+          default: g(() => [
+            w(t.$slots, "content", {}, () => [
+              e.rawContent ? (f(), B("span", {
+                key: 0,
+                innerHTML: e.content
+              }, null, 8, j)) : (f(), B("span", q, $(e.content), 1))
+            ]),
+            e.showArrow ? (f(), h(i(Y), {
+              key: 0,
+              "arrow-offset": e.arrowOffset
+            }, null, 8, ["arrow-offset"])) : v("", !0)
+          ]),
+          _: 3
+        }, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
+      ]),
+      _: 3
+    }, 8, ["role"]));
+  }
+});
+export {
+  ce as default
+};
+//# sourceMappingURL=tooltip.vue2.mjs.map