vueless 0.0.65 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -58,7 +58,8 @@
     "vite": "^5.2.10",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.25"
+    "vue": "^3.4.25",
+    "vue-router": "^4.3.2"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/ui.button-link/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props) {
+export function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
   const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
@@ -88,6 +88,8 @@ export function useAttrs(props) {
       class: cx([
         wrapperAttrsRaw.value.class,
         (hasDefaultSlot || hasLeftSlot || hasRightSlot) && config.value.withSlots,
+        isActive.value && props.wrapperActiveClass,
+        isExactActive.value && props.wrapperExactActiveClass,
       ]),
     };
   });
@@ -99,7 +101,12 @@ export function useAttrs(props) {
 
     return {
       ...linkAttrsRaw.value,
-      class: cx([linkAttrsRaw.value.class, hasDefaultSlot && config.value.withSlots]),
+      class: cx([
+        linkAttrsRaw.value.class,
+        hasDefaultSlot && config.value.withSlots,
+        isActive.value && props.activeClass,
+        isExactActive.value && props.exactActiveClass,
+      ]),
     };
   });
 

package/ui.button-link/configs/default.config.js

@@ -65,6 +65,8 @@ export default /*tw*/ {
     color: "brand",
     type: "link",
     size: "md",
+    activeClass: "group/router-link-active",
+    exactActiveClass: "group/router-link-exact-active",
     underlined: undefined,
     block: false,
     noRing: false,

package/ui.button-link/index.vue

@@ -50,6 +50,7 @@
 
 <script setup>
 import { computed, useSlots, ref } from "vue";
+import { RouterLink, useLink } from "vue-router";
 import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
@@ -121,6 +122,38 @@ const props = defineProps({
     default: UIService.get(defaultConfig, ULink).default.targetBlank,
   },
 
+  /**
+   * Apply classes to the link when its route is active or when it matches any parent route.
+   */
+  activeClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.activeClass,
+  },
+
+  /**
+   * Apply classes to the link when its route is active.
+   */
+  exactActiveClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.exactActiveClass,
+  },
+
+  /**
+   * Apply classes to the wrapper div when link route is active or when it matches any parent route.
+   */
+  wrapperActiveClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.wrapperActiveClass,
+  },
+
+  /**
+   * Apply classes to the wrapper div when link route is active.
+   */
+  wrapperExactActiveClass: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass,
+  },
+
   /**
    * Show underline.
    */
@@ -179,13 +212,14 @@ const props = defineProps({
 });
 
 const slots = useSlots();
+const { route, isActive, isExactActive } = useLink({ to: props.route });
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
 const { wrapperAttrs, linkAttrs, rightSlotAttrs, leftSlotAttrs, textAttrs, hasSlotContent } =
-  useAttrs(props);
+  useAttrs(props, { isActive, isExactActive });
 
 const targetValue = computed(() => {
   return props.targetBlank ? "_blank" : "_self";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4284,6 +4284,42 @@
               },
               "default": "false"
             },
+            {
+              "name": "activeClass",
+              "description": "Apply classes to the link when its route is active or when it matches any parent route.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "group/router-link-active"
+            },
+            {
+              "name": "exactActiveClass",
+              "description": "Apply classes to the link when its route is active.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "group/router-link-exact-active"
+            },
+            {
+              "name": "wrapperActiveClass",
+              "description": "Apply classes to the wrapper div when link route is active or when it matches any parent route.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "UIService.get(defaultConfig, ULink).default.wrapperActiveClass"
+            },
+            {
+              "name": "wrapperExactActiveClass",
+              "description": "Apply classes to the wrapper div when link route is active.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "UIService.get(defaultConfig, ULink).default.wrapperExactActiveClass"
+            },
             {
               "name": "underlined",
               "description": "Show underline.",