@naptics/vue-collection 0.3.0 → 0.3.1

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/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/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "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.1",
     "main": "./index.js",
     "repository": {
         "type": "git",

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