@naptics/vue-collection 0.3.1 → 0.3.2

package/components/NBadge.d.ts

@@ -16,6 +16,10 @@ export declare const nBadgeProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */

package/components/NButton.d.ts

@@ -15,6 +15,10 @@ export declare const nButtonProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The color of the button.
      */

package/components/NIconButton.d.ts

@@ -17,6 +17,10 @@ export declare const nIconButtonProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The icon of the icon-button.
      */

package/components/NInput.d.ts

@@ -16,6 +16,10 @@ export declare const nInputProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The name of the input. Is displayed as a label above the input.
      */

package/components/NInputPhone.d.ts

@@ -26,6 +26,10 @@ export declare const nInputPhoneProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {

package/components/NInputSelect.d.ts

@@ -68,6 +68,10 @@ export declare const nInputSelectProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {

package/components/NInputSuggestion.d.ts

@@ -46,6 +46,10 @@ export declare const nInputSuggestionProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {

package/components/NSelect.d.ts

@@ -17,6 +17,10 @@ export declare const nSelectProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The id of the currently selected option of this input.
      */

package/components/NTextArea.d.ts

@@ -26,6 +26,10 @@ export declare const nTextAreaProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */

package/components/NTooltip.d.ts

@@ -51,6 +51,14 @@ export declare const nTooltipProps: {
      * to target the arrow (which is the before element).
      */
     readonly arrowClass: StringConstructor;
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     * @default 0
+     */
+    readonly delay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -104,6 +112,13 @@ export declare const nToolTipPropsForImplementor: {
      * @see {@link nTooltipProps.arrowClass}
      */
     tooltipArrowClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.delay}
+     */
+    tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -119,6 +134,7 @@ export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPro
     wrapperClass: string | undefined;
     contentClass: string | undefined;
     arrowClass: string | undefined;
+    delay: number;
 };
 /**
  * The `NTooltip` is a wrapper for any component which adds a tooltip to it.

package/components/NTooltip.js

@@ -53,7 +53,15 @@ export const nTooltipProps = {
    * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
    * to target the arrow (which is the before element).
    */
-  arrowClass: String
+  arrowClass: String,
+  /**
+   * The delay in milliseconds before the tooltip is shown.
+   * @default 0
+   */
+  delay: {
+    type: Number,
+    default: 0
+  }
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -100,7 +108,11 @@ export const nToolTipPropsForImplementor = {
   /**
    * @see {@link nTooltipProps.arrowClass}
    */
-  tooltipArrowClass: nTooltipProps.arrowClass
+  tooltipArrowClass: nTooltipProps.arrowClass,
+  /**
+   * @see {@link nTooltipProps.delay}
+   */
+  tooltipDelay: nTooltipProps.delay
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -116,7 +128,8 @@ export function mapTooltipProps(props) {
     maxWidth: props.tooltipMaxWidth,
     wrapperClass: props.tooltipWrapperClass,
     contentClass: props.tooltipContentClass,
-    arrowClass: props.tooltipArrowClass
+    arrowClass: props.tooltipArrowClass,
+    delay: props.tooltipDelay
   };
 }
 /**
@@ -168,14 +181,35 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, {
     popperInstance = null;
   }
   onMounted(createTooltip);
-  onUnmounted(destroyTooltip);
+  onUnmounted(() => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+    }
+    destroyTooltip();
+  });
   watch(() => props.placement, newPlacement => popperInstance?.setOptions({
     placement: newPlacement
   }));
   const isHoveringContent = ref(false);
   const isHoveringTooltip = ref(false);
   const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value);
-  const showTooltip = computed(() => props.show || !props.hide && isHovering.value);
+  const delayedIsHovering = ref(false);
+  let hoverTimeout = null;
+  const showTooltip = computed(() => props.show || !props.hide && (props.delay > 0 ? delayedIsHovering.value : isHovering.value));
+  watch(isHovering, hovering => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+    if (hovering && props.delay > 0) {
+      hoverTimeout = setTimeout(() => {
+        delayedIsHovering.value = true;
+        hoverTimeout = null;
+      }, props.delay);
+    } else {
+      delayedIsHovering.value = hovering;
+    }
+  });
   watchRef(showTooltip, () => popperInstance?.update());
   return () => _createVNode(_Fragment, null, [_createVNode("div", {
     "class": "p-[10px] -m-[10px]",

package/components/NValInput.d.ts

@@ -109,6 +109,10 @@ export declare const nValInputProps: {
     readonly tooltipWrapperClass: StringConstructor;
     readonly tooltipContentClass: StringConstructor;
     readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@naptics/vue-collection",
-    "author": "Timo Siegenthaler",
+    "author": "Timo Siegenthaler and Jonas Schoch",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "main": "./index.js",
     "repository": {
         "type": "git",
@@ -48,7 +48,7 @@
         "autoprefixer": "^10.4.13",
         "eslint": "^9.17.0",
         "eslint-plugin-vue": "^10.6.2",
-        "jsdom": "^21.1.0",
+        "jsdom": "^29.0.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.21",
         "prettier": "^3.0.0",

package/src/demo/views/presentation/TooltipView.tsx

@@ -20,7 +20,7 @@ export default createView('TooltipView', () => {
                 title="Customization"
                 subtitle="The content of a tooltip can be a simple text or there is a slot available for customization. More properties like placement, maximum width and more can be configured."
             >
-                <ComponentGrid cols={4}>
+                <ComponentGrid cols={5}>
                     <div class="flex">
                         <NTooltip text="Hello tooltip!">
                             <NBadge text="Hover me" />
@@ -57,6 +57,12 @@ export default createView('TooltipView', () => {
                             <NBadge text="Hover me" />
                         </NTooltip>
                     </div>
+
+                    <div class="flex">
+                        <NTooltip text="I'm delayed 500ms, sorry." delay={500}>
+                            <NBadge text="Delay" />
+                        </NTooltip>
+                    </div>
                 </ComponentGrid>
             </VariantSection>
 

package/src/lib/components/NTooltip.tsx

@@ -55,6 +55,14 @@ export const nTooltipProps = {
      * to target the arrow (which is the before element).
      */
     arrowClass: String,
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     * @default 0
+     */
+    delay: {
+        type: Number,
+        default: 0,
+    },
 } as const
 
 /**
@@ -103,6 +111,10 @@ export const nToolTipPropsForImplementor = {
      * @see {@link nTooltipProps.arrowClass}
      */
     tooltipArrowClass: nTooltipProps.arrowClass,
+    /**
+     * @see {@link nTooltipProps.delay}
+     */
+    tooltipDelay: nTooltipProps.delay,
 }
 
 /**
@@ -120,6 +132,7 @@ export function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImp
         wrapperClass: props.tooltipWrapperClass,
         contentClass: props.tooltipContentClass,
         arrowClass: props.tooltipArrowClass,
+        delay: props.tooltipDelay,
     }
 }
 
@@ -179,7 +192,12 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { sl
     }
 
     onMounted(createTooltip)
-    onUnmounted(destroyTooltip)
+    onUnmounted(() => {
+        if (hoverTimeout) {
+            clearTimeout(hoverTimeout)
+        }
+        destroyTooltip()
+    })
 
     watch(
         () => props.placement,
@@ -189,7 +207,28 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { sl
     const isHoveringContent = ref(false)
     const isHoveringTooltip = ref(false)
     const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value)
-    const showTooltip = computed(() => props.show || (!props.hide && isHovering.value))
+    const delayedIsHovering = ref(false)
+    let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+
+    const showTooltip = computed(
+        () => props.show || (!props.hide && (props.delay > 0 ? delayedIsHovering.value : isHovering.value))
+    )
+
+    watch(isHovering, hovering => {
+        if (hoverTimeout) {
+            clearTimeout(hoverTimeout)
+            hoverTimeout = null
+        }
+
+        if (hovering && props.delay > 0) {
+            hoverTimeout = setTimeout(() => {
+                delayedIsHovering.value = true
+                hoverTimeout = null
+            }, props.delay)
+        } else {
+            delayedIsHovering.value = hovering
+        }
+    })
 
     watchRef(showTooltip, () => popperInstance?.update())