VL-29_UBreadcrumbs-new-component_Vitalii-Dudnik

src/ui.button-link/ULink.vue

@@ -9,7 +9,7 @@ import { getDefaults } from "../utils/ui.ts";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, Config } from "./types.ts";
+import type { Props, Config, ULinkSlotProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -101,6 +101,7 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 <template>
   <router-link
     v-if="isPresentRoute"
+    v-slot="slotProps: ULinkSlotProps"
     :to="safeTo"
     :custom="custom"
     :replace="replace"
@@ -118,8 +119,14 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
     @keydown="onKeydown"
     @mouseover="onMouseover"
   >
-    <!-- @slot Use it replace the label. -->
-    <slot>{{ label }}</slot>
+    <!--
+      @slot Use it replace the label.
+      @binding {boolean} is-active
+      @binding {boolean} is-exact-active
+    -->
+    <slot :is-active="slotProps.isActive" :is-exact-active="slotProps.isExactActive">{{
+      label
+    }}</slot>
   </router-link>
 
   <a

src/ui.button-link/storybook/stories.ts

@@ -43,9 +43,11 @@ const DefaultTemplate: StoryFn<ULinkArgs> = (args: ULinkArgs) => ({
     return { args, slots };
   },
   template: `
-    <ULink v-if="args.block" v-bind="args" :config="{ wrapper: 'border-2 border-dashed border-green-500 p-2' }">
-      ${args.slotTemplate || getSlotsFragment("")}
-    </ULink>
+    <div v-if="args.block" class="border-2 border-dashed border-green-500 p-2">
+      <ULink v-bind="args">
+        ${args.slotTemplate || getSlotsFragment("")}
+      </ULink>
+    </div>
     <ULink v-else v-bind="args">
       ${args.slotTemplate || getSlotsFragment("")}
     </ULink>

src/ui.button-link/types.ts

@@ -5,6 +5,11 @@ import type { RouteLocationRaw } from "vue-router";
 
 export type Config = typeof defaultConfig;
 
+export interface ULinkSlotProps {
+  isActive: boolean;
+  isExactActive: boolean;
+}
+
 export interface Props {
   /**
    * Button label.

src/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useRoute } from "vue-router";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -12,6 +11,7 @@ import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import type { Props, Config, UBreadcrumb } from "./types.ts";
+import type { ULinkSlotProps } from "../ui.button-link/types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -28,20 +28,10 @@ const emit = defineEmits([
   "clickLink",
 ]);
 
-const route = useRoute();
-
 const getIconColor = computed(() => {
   return (link: UBreadcrumb) => (link.disabled || (!link.to && !link.href) ? "gray" : props.color);
 });
 
-const isLinkActive = computed(() => {
-  return (index: number) => {
-    const link = props.links[index];
-
-    return route.path === link.to;
-  };
-});
-
 function onClickLink(link: UBreadcrumb) {
   emit("clickLink", link);
 }
@@ -64,12 +54,11 @@ const {
   <div v-bind="breadcrumbsAttrs">
     <div v-for="(link, index) in links" :key="index" v-bind="breadcrumbAttrs">
       <!--
-          @slot Use it to add something instead of a link icon.
-          @binding {string} icon-name
-          @binding {number} index
-          @binding {boolean} active
-        -->
-      <slot name="left" :icon-name="link.icon" :index="index" :active="isLinkActive(index)">
+        @slot Use it to add something instead of a link icon.
+        @binding {string} icon-name
+        @binding {number} index
+      -->
+      <slot name="icon" :icon-name="link.icon" :index="index">
         <UIcon
           v-if="link.icon"
           :name="link.icon"
@@ -84,7 +73,7 @@ const {
         :to="link.to"
         :size="size"
         :color="color"
-        :target-blank="targetBlank"
+        :target="link.target || target"
         :custom="link.custom"
         :replace="link.replace"
         :active-class="link.activeClass"
@@ -98,27 +87,34 @@ const {
         :data-test="dataTest"
         @click="onClickLink(link)"
       >
-        <!--
-          @slot Use it to add something instead of a link label.
-          @binding {string} label
-          @binding {number} index
-          @binding {boolean} active
-        -->
-        <slot name="label" :label="link.label" :index="index" :active="isLinkActive(index)" />
+        <template #default="slotProps">
+          <!--
+            @slot Use it to add something instead of a link label.
+            @binding {string} label
+            @binding {number} index
+            @binding {boolean} active
+          -->
+          <slot
+            name="label"
+            :label="link.label"
+            :index="index"
+            :active="
+              (slotProps as ULinkSlotProps).isActive || (slotProps as ULinkSlotProps).isExactActive
+            "
+          />
+        </template>
       </ULink>
 
       <!--
-          @slot Use it to add something instead of the divider.
-          @binding {string} icon-name
-          @binding {number} index
-          @binding {boolean} active
-        -->
+        @slot Use it to add something instead of the divider.
+        @binding {string} icon-name
+        @binding {number} index
+      -->
       <slot
         v-if="links.length !== index + 1"
         name="divider"
         :icon-name="config.defaults.dividerIcon"
         :index="index"
-        :active="isLinkActive(index)"
       >
         <UIcon
           v-if="links.length !== index + 1"

src/ui.navigation-breadcrumbs/config.ts

@@ -19,7 +19,7 @@ export default /*tw*/ {
     size: "md",
     underlined: undefined,
     dashed: false,
-    targetBlank: false,
+    target: "_self",
     dividerIcon: "arrow_right",
   },
 };

src/ui.navigation-breadcrumbs/storybook/docs.mdx

@@ -24,6 +24,7 @@ Keys you may/have to provide to the component in a `link` object.
 | href                   | Link URL                                              | String                  |
 | disabled               | Used to disable link                                  | Boolean                 |
 | icon                   | Icon name                                             | String                  |
+| target                 | Specifies where to open the linked page.              | String                  |
 | custom                 | Whether RouterLink should not wrap content in a tag   | Boolean                 |
 | replace                | Whether to replace current history entry              | Boolean                 |
 | activeClass            | Classes to apply when route is active                 | String                  |

src/ui.navigation-breadcrumbs/storybook/stories.ts

@@ -23,11 +23,11 @@ export default {
   component: UBreadcrumbs,
   args: {
     links: [
-      { label: "Main", href: "https://vueless.com/" },
-      { label: "Category", href: "https://docs.vueless.com/" },
-      { label: "Product", href: "https://ui.vueless.com/" },
+      { label: "Vueless Docs", href: "https://docs.vueless.com/" },
+      { label: "Global Customization", href: "https://docs.vueless.com/global-customization/" },
+      { label: "Rounding", href: "https://docs.vueless.com/global-customization/rounding" },
     ],
-    targetBlank: true,
+    target: "_blank",
   },
   argTypes: {
     ...getArgTypes(UBreadcrumbs.__name),
@@ -131,7 +131,7 @@ export const Slots: StoryFn<UBreadcrumbsArgs> = (args) => ({
   },
   template: `
     <UBreadcrumbs v-bind="args">
-      <template #left="{ index }">
+      <template #icon="{ index }">
         <UBadge
           v-if="index === 1"
           label="Info"

src/ui.navigation-breadcrumbs/types.ts

@@ -46,9 +46,9 @@ export interface Props {
     | "brand";
 
   /**
-   * Open link in the new tab.
+   * Specifies where to open the linked page.
    */
-  targetBlank?: boolean;
+  target?: "_blank" | "_self" | "_parent" | "_top" | string;
 
   /**
    * Show underline.