@will-ui/vue 1.0.0

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,536 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    trigger: {
+        default: string;
+        type: import('vue').PropType<import('../..').TriggerType>;
+    };
+    bind: {
+        type: import('vue').PropType<"v-if" | "v-show">;
+        default: string;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    placement: {
+        type: import('vue').PropType<import('../..').PlacementType>;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offset: {
+        type: import('vue').PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    arrowOffset: {
+        type: import('vue').PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    triggerAttrs: {
+        type: ObjectConstructor;
+    };
+    triggerTag: {
+        type: StringConstructor;
+        default: string;
+    };
+    nearby: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    canCloseByClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exclude: {
+        type: import('vue').PropType<HTMLElement[]>;
+        default: () => any[];
+    };
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    layerCssVar: {
+        type: import('vue').PropType<import('../layer').LayerCssVarType>;
+        default: () => {};
+    };
+    layerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+    };
+    layerStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    cssVars: {
+        type: import('vue').PropType<import('../../util').CssVars>;
+        default: any;
+    };
+    immediate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adjustPosition: {
+        type: import('vue').PropType<import('../..').AdjustmentPosition>;
+        default: string;
+    };
+    clickOutside: FunctionConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    trigger: {
+        default: string;
+        type: import('vue').PropType<import('../..').TriggerType>;
+    };
+    bind: {
+        type: import('vue').PropType<"v-if" | "v-show">;
+        default: string;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    placement: {
+        type: import('vue').PropType<import('../..').PlacementType>;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offset: {
+        type: import('vue').PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    arrowOffset: {
+        type: import('vue').PropType<{
+            x: number;
+            y: number;
+        }>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    triggerAttrs: {
+        type: ObjectConstructor;
+    };
+    triggerTag: {
+        type: StringConstructor;
+        default: string;
+    };
+    nearby: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    canCloseByClickOutside: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exclude: {
+        type: import('vue').PropType<HTMLElement[]>;
+        default: () => any[];
+    };
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    layerCssVar: {
+        type: import('vue').PropType<import('../layer').LayerCssVarType>;
+        default: () => {};
+    };
+    layerClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+    };
+    layerStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    cssVars: {
+        type: import('vue').PropType<import('../../util').CssVars>;
+        default: any;
+    };
+    immediate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adjustPosition: {
+        type: import('vue').PropType<import('../..').AdjustmentPosition>;
+        default: string;
+    };
+    clickOutside: FunctionConstructor;
+}>> & Readonly<{}>, {
+    trigger: import('../..').TriggerType;
+    size: number;
+    placement: "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "center" | "client-center";
+    adjustPosition: import('../..').AdjustmentPosition;
+    gap: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+    arrowOffset: {
+        x: number;
+        y: number;
+    };
+    show: boolean;
+    transitionName: string;
+    cssVars: import('../../util').CssVars;
+    disabled: boolean;
+    bind: "v-if" | "v-show";
+    manual: boolean;
+    exclude: HTMLElement[];
+    hasMask: boolean;
+    triggerTag: string;
+    nearby: boolean;
+    canCloseByClickOutside: boolean;
+    hasArrow: boolean;
+    layerCssVar: import('../layer').LayerCssVarType;
+    layerStyle: Record<string, any>;
+    immediate: boolean;
+    realTime: boolean;
+}, {}, {
+    Layer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        bind: {
+            type: import('vue').PropType<"v-if" | "v-show">;
+            default: string;
+        };
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        manual: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        placement: {
+            type: import('vue').PropType<import('../..').PlacementType>;
+            default: string;
+        };
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offset: {
+            type: import('vue').PropType<{
+                x: number;
+                y: number;
+            }>;
+            default: () => {
+                x: number;
+                y: number;
+            };
+        };
+        arrowOffset: {
+            type: import('vue').PropType<{
+                x: number;
+                y: number;
+            }>;
+            default: () => {
+                x: number;
+                y: number;
+            };
+        };
+        trigger: {
+            type: import('vue').PropType<import('../..').TriggerType>;
+            default: string;
+        };
+        triggerAttrs: {
+            type: ObjectConstructor;
+        };
+        triggerTag: {
+            type: StringConstructor;
+            default: string;
+        };
+        nearby: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        canCloseByClickOutside: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        exclude: {
+            type: import('vue').PropType<HTMLElement[]>;
+            default: () => any[];
+        };
+        transitionName: {
+            type: StringConstructor;
+            default: string;
+        };
+        hasArrow: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hasMask: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        layerCssVar: {
+            type: import('vue').PropType<import('../layer').LayerCssVarType>;
+            default: () => {};
+        };
+        layerClass: {
+            type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        };
+        layerStyle: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        size: {
+            type: NumberConstructor;
+            default: any;
+        };
+        cssVars: {
+            type: import('vue').PropType<import('../../util').CssVars>;
+            default: any;
+        };
+        immediate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        realTime: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        adjustPosition: {
+            type: import('vue').PropType<import('../..').AdjustmentPosition>;
+            default: string;
+        };
+        clickOutside: FunctionConstructor;
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        'update:show': (v: boolean) => true;
+        'get-trigger-rect': (rect: import('../..').RectType) => true;
+        'get-layer-size': (size: {
+            width: number;
+            height: number;
+        }) => true;
+        'get-layer-element': (elem: HTMLElement) => true;
+        'after-enter': (elem: Element) => true;
+        'before-enter': (elem: Element) => true;
+        enter: (elem: Element) => true;
+        'before-leave': (elem: Element) => true;
+        'after-leave': (elem: Element) => true;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        bind: {
+            type: import('vue').PropType<"v-if" | "v-show">;
+            default: string;
+        };
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        manual: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        placement: {
+            type: import('vue').PropType<import('../..').PlacementType>;
+            default: string;
+        };
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offset: {
+            type: import('vue').PropType<{
+                x: number;
+                y: number;
+            }>;
+            default: () => {
+                x: number;
+                y: number;
+            };
+        };
+        arrowOffset: {
+            type: import('vue').PropType<{
+                x: number;
+                y: number;
+            }>;
+            default: () => {
+                x: number;
+                y: number;
+            };
+        };
+        trigger: {
+            type: import('vue').PropType<import('../..').TriggerType>;
+            default: string;
+        };
+        triggerAttrs: {
+            type: ObjectConstructor;
+        };
+        triggerTag: {
+            type: StringConstructor;
+            default: string;
+        };
+        nearby: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        canCloseByClickOutside: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        exclude: {
+            type: import('vue').PropType<HTMLElement[]>;
+            default: () => any[];
+        };
+        transitionName: {
+            type: StringConstructor;
+            default: string;
+        };
+        hasArrow: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        hasMask: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        layerCssVar: {
+            type: import('vue').PropType<import('../layer').LayerCssVarType>;
+            default: () => {};
+        };
+        layerClass: {
+            type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        };
+        layerStyle: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        size: {
+            type: NumberConstructor;
+            default: any;
+        };
+        cssVars: {
+            type: import('vue').PropType<import('../../util').CssVars>;
+            default: any;
+        };
+        immediate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        realTime: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        adjustPosition: {
+            type: import('vue').PropType<import('../..').AdjustmentPosition>;
+            default: string;
+        };
+        clickOutside: FunctionConstructor;
+    }>> & Readonly<{
+        "onUpdate:show"?: (v: boolean) => any;
+        onEnter?: (elem: Element) => any;
+        "onAfter-enter"?: (elem: Element) => any;
+        "onAfter-leave"?: (elem: Element) => any;
+        "onGet-trigger-rect"?: (rect: import('../..').RectType) => any;
+        "onGet-layer-size"?: (size: {
+            width: number;
+            height: number;
+        }) => any;
+        "onGet-layer-element"?: (elem: HTMLElement) => any;
+        "onBefore-enter"?: (elem: Element) => any;
+        "onBefore-leave"?: (elem: Element) => any;
+    }>, {
+        trigger: import('../..').TriggerType;
+        size: number;
+        placement: "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "center" | "client-center";
+        adjustPosition: import('../..').AdjustmentPosition;
+        gap: number;
+        offset: {
+            x: number;
+            y: number;
+        };
+        arrowOffset: {
+            x: number;
+            y: number;
+        };
+        show: boolean;
+        transitionName: string;
+        cssVars: import('../../util').CssVars;
+        disabled: boolean;
+        bind: "v-if" | "v-show";
+        manual: boolean;
+        exclude: HTMLElement[];
+        hasMask: boolean;
+        triggerTag: string;
+        nearby: boolean;
+        canCloseByClickOutside: boolean;
+        hasArrow: boolean;
+        layerCssVar: import('../layer').LayerCssVarType;
+        layerStyle: Record<string, any>;
+        immediate: boolean;
+        realTime: boolean;
+    }, {}, {}, {
+        clickOutside: import('vue').ObjectDirective<any, any, string, any>;
+    }, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,51 @@
+import Layer_default, { LayerProps } from "../layer/Layer.js";
+import { computed, createVNode, defineComponent, useAttrs, useSlots } from "vue";
+//#region components/tooltip/Tooltip.tsx
+var Tooltip_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	components: { Layer: Layer_default },
+	name: "Tooltip",
+	props: {
+		...LayerProps,
+		trigger: {
+			...LayerProps.trigger,
+			default: "hover"
+		}
+	},
+	setup(props) {
+		const d = 6;
+		const translate = computed(() => {
+			const p = props.placement;
+			let t = "";
+			if (p.indexOf("left") > -1) t = `translateX(-6px)`;
+			else if (p.indexOf("right") > -1) t = `translateX(${d}px)`;
+			else if (p.indexOf("bottom") > -1) t = `translateY(${d}px)`;
+			else if (p.indexOf("top") > -1) t = `translateY(-6px)`;
+			return t;
+		});
+		const layerOptions = computed(() => {
+			const varStyle = {
+				"--_layer-border-color": "var(--w-tooltip-border-color)",
+				"--_layer-background-color": "var(--w-tooltip-background-color)",
+				"--_layer-color": "var(--w-tooltip-color)",
+				"--_layer-transform": translate.value,
+				...props.layerCssVar
+			};
+			return {
+				...useAttrs(),
+				...props,
+				trigger: props.manual ? "click" : props.trigger,
+				layerCssVar: varStyle,
+				layerClass: ["w-tooltip"],
+				transitionName: "w-translate"
+			};
+		});
+		return () => {
+			return createVNode(Layer_default, layerOptions.value, useSlots());
+		};
+	}
+});
+//#endregion
+export { Tooltip_default as default };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["computed","defineComponent","useAttrs","useSlots","createVNode","_createVNode","Layer","LayerProps","inheritAttrs","components","name","props","trigger","default","setup","d","translate","p","placement","t","indexOf","layerOptions","varStyle","value","layerCssVar","manual","layerClass","transitionName"],"sources":["../../../components/tooltip/Tooltip.tsx"],"sourcesContent":["import { ref, computed, defineComponent, useAttrs, useSlots } from \"vue\"\r\nimport Layer, { LayerProps } from \"../layer\"\r\n\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  components: { Layer },\r\n  name: \"Tooltip\",\r\n  props: {\r\n    ...LayerProps,\r\n    trigger: {\r\n      ...LayerProps.trigger,\r\n      default: \"hover\",\r\n    },\r\n  },\r\n  setup(props) {\r\n    const d = 6\r\n    const translate = computed(() => {\r\n      const p = props.placement\r\n      let t = \"\"\r\n      if (p.indexOf(\"left\") > -1) {\r\n        t = `translateX(${-1 * d}px)`\r\n      } else if (p.indexOf(\"right\") > -1) {\r\n        t = `translateX(${d}px)`\r\n      } else if (p.indexOf(\"bottom\") > -1) {\r\n        t = `translateY(${d}px)`\r\n      } else if (p.indexOf(\"top\") > -1) {\r\n        t = `translateY(${-1 * d}px)`\r\n      }\r\n      return t\r\n    })\r\n    const layerOptions = computed(() => {\r\n      const varStyle = {\r\n        '--_layer-border-color': 'var(--w-tooltip-border-color)',\r\n        '--_layer-background-color': 'var(--w-tooltip-background-color)',\r\n        '--_layer-color': 'var(--w-tooltip-color)',\r\n        '--_layer-transform': translate.value,\r\n        ...props.layerCssVar,\r\n      }\r\n      return {\r\n        ...useAttrs(),\r\n        ...props,\r\n        trigger: props.manual ? \"click\" : props.trigger,\r\n        layerCssVar: varStyle,\r\n        layerClass: [\"w-tooltip\"],\r\n        transitionName: \"w-translate\",\r\n      }\r\n    })\r\n    return () => {\r\n      return <Layer {...layerOptions.value} v-slots={useSlots()} />\r\n    }\r\n  },\r\n})\r\n"],"mappings":";;;AAGA,IAAA,kBAAeC,gCAAgB;CAC7BO,cAAc;CACdC,YAAY,EAAEH,OAAAA,cAAM;CACpBI,MAAM;CACNC,OAAO;EACL,GAAGJ;EACHK,SAAS;GACP,GAAGL,WAAWK;GACdC,SAAS;EACX;CACF;CACAC,MAAMH,OAAO;EACX,MAAMI,IAAI;EACV,MAAMC,YAAYhB,eAAe;GAC/B,MAAMiB,IAAIN,MAAMO;GAChB,IAAIC,IAAI;GACR,IAAIF,EAAEG,QAAQ,MAAM,IAAI,IACtBD,IAAI;QACC,IAAIF,EAAEG,QAAQ,OAAO,IAAI,IAC9BD,IAAI,cAAcJ,EAAC;QACd,IAAIE,EAAEG,QAAQ,QAAQ,IAAI,IAC/BD,IAAI,cAAcJ,EAAC;QACd,IAAIE,EAAEG,QAAQ,KAAK,IAAI,IAC5BD,IAAI;GAEN,OAAOA;EACT,CAAC;EACD,MAAME,eAAerB,eAAe;GAClC,MAAMsB,WAAW;IACf,yBAAyB;IACzB,6BAA6B;IAC7B,kBAAkB;IAClB,sBAAsBN,UAAUO;IAChC,GAAGZ,MAAMa;GACX;GACA,OAAO;IACL,GAAGtB,SAAS;IACZ,GAAGS;IACHC,SAASD,MAAMc,SAAS,UAAUd,MAAMC;IACxCY,aAAaF;IACbI,YAAY,CAAC,WAAW;IACxBC,gBAAgB;GAClB;EACF,CAAC;EACD,aAAa;GACX,OAAAtB,YAAAC,eAAkBe,aAAaE,OAAgBpB,SAAS,CAAC;EAC3D;CACF;AACF,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from './Tooltip';

package/dist/components/tooltip/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/tooltip.css';