@naptics/vue-collection 0.3.0 → 0.3.2

package/.github/workflows/deploy-lib.yml

@@ -47,15 +47,9 @@ jobs:
         id: nvm
       - name: Setup node environment
         uses: actions/setup-node@v4
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
           registry-url: https://registry.npmjs.org/
-      # Ensure npm 11.5.1 or later for trusted publishing
-      - name: Ensure latest npm version
-        run: npm --version
-      - run: npm install -g npm@latest --no-man
       - name: Download library artifact
         uses: actions/download-artifact@v4
         with:

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/NLink.d.ts

@@ -29,6 +29,11 @@ export declare const nLinkProps: {
         readonly type: NumberConstructor;
         readonly default: 500;
     };
+    /**
+     * If set to `true` the link is disabled and no interaction is possible.
+     * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
+     */
+    readonly disabled: BooleanConstructor;
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.

package/components/NLink.js

@@ -30,6 +30,11 @@ export const nLinkProps = {
     type: Number,
     default: 500
   },
+  /**
+   * If set to `true` the link is disabled and no interaction is possible.
+   * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
+   */
+  disabled: Boolean,
   /**
    * This is called when the link is clicked but only, if the `route` prop is not set.
    * If the `route` prop is not set, the link will act as a regular button.
@@ -47,6 +52,7 @@ const Component = createComponent('NLink', nLinkProps, (props, {
     if (shade <= 500) return shade + 100;else return shade - 200;
   });
   const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
+  const disabledClasses = computed(() => ['font-medium text-left cursor-not-allowed', `${props.textSize} text-${props.color}-200`]);
   return () => props.route ? _createVNode(RouterLink, {
     "to": props.route,
     "class": classes.value
@@ -54,7 +60,8 @@ const Component = createComponent('NLink', nLinkProps, (props, {
     default: () => [slots.default?.() || props.text]
   }) : _createVNode("button", {
     "onClick": props.onClick,
-    "class": classes.value
+    "class": props.disabled ? disabledClasses.value : classes.value,
+    "disabled": props.disabled
   }, [slots.default?.() || props.text]);
 });
 export { Component as NLink, Component as default };

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.0",
+    "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/LinkView.tsx

@@ -45,6 +45,16 @@ export default createView('LinkView', () => {
                     </div>
                 </ComponentGrid>
             </VariantSection>
+            <VariantSection title="Disabled Links">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Disabled Link" disabled />
+                    </div>
+                    <div>
+                        <NLink text="Disabled Link" onClick={hi} color="secondary" disabled />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
         </ComponentSection>
     )
 })

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/NLink.tsx

@@ -31,6 +31,12 @@ export const nLinkProps = {
         type: Number,
         default: 500,
     },
+
+    /**
+     * If set to `true` the link is disabled and no interaction is possible.
+     * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
+     */
+    disabled: Boolean,
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.
@@ -52,6 +58,10 @@ const Component = createComponent('NLink', nLinkProps, (props, { slots }) => {
         'font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left',
         `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`,
     ])
+    const disabledClasses = computed(() => [
+        'font-medium text-left cursor-not-allowed',
+        `${props.textSize} text-${props.color}-200`,
+    ])
 
     return () =>
         props.route ? (
@@ -59,7 +69,11 @@ const Component = createComponent('NLink', nLinkProps, (props, { slots }) => {
                 {slots.default?.() || props.text}
             </RouterLink>
         ) : (
-            <button onClick={props.onClick} class={classes.value}>
+            <button
+                onClick={props.onClick}
+                class={props.disabled ? disabledClasses.value : classes.value}
+                disabled={props.disabled}
+            >
                 {slots.default?.() || props.text}
             </button>
         )

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())