vueless 0.0.686 → 0.0.688

package/assets/icons/vueless/arrow_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M395.93-270.2v-419.6L605.74-480 395.93-270.2Z"/></svg>

package/constants.js

@@ -147,6 +147,7 @@ export const COMPONENTS = {
   UTabs: "ui.navigation-tabs",
   UProgress: "ui.navigation-progress",
   UPagination: "ui.navigation-pagination",
+  UBreadcrumbs: "ui.navigation-breadcrumbs",
 
   /* Loaders and Skeletons */
   ULoader: "ui.loader",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.686",
+  "version": "0.0.688",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -37,6 +37,7 @@ import UPaginationConfig from "./ui.navigation-pagination/config.ts";
 import UProgressConfig from "./ui.navigation-progress/config.ts";
 import UTabConfig from "./ui.navigation-tab/config.ts";
 import UTabsConfig from "./ui.navigation-tabs/config.ts";
+import UBreadcrumbsConfig from "./ui.navigation-breadcrumbs/config.ts";
 import UAvatarConfig from "./ui.image-avatar/config.ts";
 import UIconConfig from "./ui.image-icon/config.ts";
 import UCheckboxConfig from "./ui.form-checkbox/config.ts";
@@ -226,6 +227,7 @@ export interface Components {
   UProgress: Partial<typeof UProgressConfig>;
   UTab: Partial<typeof UTabConfig>;
   UTabs: Partial<typeof UTabsConfig>;
+  UBreadcrumbs: Partial<typeof UBreadcrumbsConfig>;
   UAvatar: Partial<typeof UAvatarConfig>;
   UIcon: Partial<typeof UIconConfig>;
   UCheckbox: Partial<typeof UCheckboxConfig>;

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

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

package/ui.navigation-breadcrumbs/UBreadcrumbs.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { COMPONENT_NAME } from "./constants.ts";
+
+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 });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  links: () => [],
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers on a link click.
+   * @property {object} link
+   */
+  "clickLink",
+]);
+
+const getIconColor = computed(() => {
+  return (link: UBreadcrumb) => (link.disabled || (!link.to && !link.href) ? "gray" : props.color);
+});
+
+function onClickLink(link: UBreadcrumb) {
+  emit("clickLink", link);
+}
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { config, breadcrumbsAttrs, breadcrumbLinkAttrs, breadcrumbIconAttrs, dividerIconAttrs } =
+  useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div v-bind="breadcrumbsAttrs">
+    <template v-for="(link, index) in links" :key="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"
+          :color="getIconColor(link)"
+          v-bind="breadcrumbIconAttrs"
+        />
+      </slot>
+
+      <ULink
+        :label="link.label"
+        :href="link.href"
+        :to="link.to"
+        :size="size"
+        :color="color"
+        :target="link.target || target"
+        :custom="link.custom"
+        :replace="link.replace"
+        :active-class="link.activeClass"
+        :exact-active-class="link.exactActiveClass"
+        :aria-current-value="link.ariaCurrentValue"
+        :underlined="underlined"
+        :dashed="dashed"
+        :disabled="link.disabled || (!link.to && !link.href)"
+        :ring="false"
+        v-bind="breadcrumbLinkAttrs"
+        :data-test="dataTest"
+        @click="onClickLink(link)"
+      >
+        <template #default="slotProps">
+          <!--
+            @slot Use it to add something instead of a link label.
+            @binding {string} label
+            @binding {number} index
+            @binding {boolean} active
+            @binding {boolean} exact-active
+          -->
+          <slot
+            name="label"
+            :label="link.label"
+            :index="index"
+            :active="(slotProps as ULinkSlotProps).isActive"
+            :exact-active="(slotProps as ULinkSlotProps).isExactActive"
+          />
+        </template>
+      </ULink>
+
+      <!--
+        @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"
+      >
+        <UIcon
+          v-if="links.length !== index + 1"
+          :name="config.defaults.dividerIcon"
+          :color="getIconColor(link)"
+          v-bind="dividerIconAttrs"
+        />
+      </slot>
+    </template>
+  </div>
+</template>

package/ui.navigation-breadcrumbs/config.ts

@@ -0,0 +1,32 @@
+export default /*tw*/ {
+  breadcrumbs: "flex items-center gap-1 py-2",
+  breadcrumbLink: "{ULink}",
+  breadcrumbIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+      },
+    },
+  },
+  dividerIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  defaults: {
+    color: "grayscale",
+    size: "md",
+    underlined: undefined,
+    dashed: false,
+    target: "_self",
+    dividerIcon: "arrow_right",
+  },
+};

package/ui.navigation-breadcrumbs/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UBreadcrumbs";

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

@@ -0,0 +1,37 @@
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Breadcrumb Link Object Properties
+Keys you may/have to provide to the component in a `link` object.
+
+<Markdown>
+{`
+|  Key name              | Description                                           | Type                    |
+| ---------------------- | ----------------------------------------------------- | ----------------------- |
+| label                  | Link label                                            | String                  |
+| route                  | Route object                                          | 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                  |
+| exactActiveClass       | Classes to apply when route is exactly active         | String                  |
+| ariaCurrentValue       | Value for aria-current when link is exact active      | String                  |
+`}
+</Markdown>
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -0,0 +1,156 @@
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UBreadcrumbs from "../../ui.navigation-breadcrumbs/UBreadcrumbs.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UButton from "../../ui.button/UButton.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UBreadcrumbsArgs extends Props {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+interface UBreadcrumbsArgs extends Props {
+  slotTemplate?: string;
+}
+
+export default {
+  id: "8030",
+  title: "Navigation / Breadcrumbs",
+  component: UBreadcrumbs,
+  args: {
+    links: [
+      { 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" },
+    ],
+    target: "_blank",
+  },
+  argTypes: {
+    ...getArgTypes(UBreadcrumbs.__name),
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs) => ({
+  components: { UBreadcrumbs },
+  setup() {
+    const slots = getSlotNames(UBreadcrumbs.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UBreadcrumbs v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UBreadcrumbs>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UBreadcrumbsArgs> = (args: UBreadcrumbsArgs, { argTypes }) => ({
+  components: { UBreadcrumbs, UCol },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <UBreadcrumbs
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      />
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Styles = DefaultTemplate.bind({});
+Styles.args = { color: "green", dashed: true };
+Styles.parameters = {
+  docs: {
+    description: {
+      story:
+        "For a full list of ULink's supported colors, underlined/dashed styles, etc., see the [ULink Documentation](https://ui.vueless.com/?path=/docs/1060--docs).",
+    },
+  },
+};
+
+export const LinkStates = DefaultTemplate.bind({});
+LinkStates.args = {
+  links: [
+    { label: "Default link", href: "https://vueless.com/" },
+    { label: "Empty link (no `route` or `href` properties)" },
+    {
+      label: "Manually disabled link",
+      href: "https://docs.vueless.com/",
+      disabled: true,
+    },
+  ],
+};
+LinkStates.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "A breadcrumb is automatically disabled, if: <br /> - it does not have both `route` and `href` properties; <br /> - it has `disabled` property set to `true.",
+    },
+  },
+};
+
+export const LinkIcon = DefaultTemplate.bind({});
+LinkIcon.args = {
+  links: [
+    { label: "Vueless", href: "https://vueless.com/", icon: "palette" },
+    { label: "Settings", icon: "settings" },
+    { label: "Breadcrumbs", href: "https://ui.vueless.com/?path=/docs/8030--docs" },
+  ],
+};
+LinkIcon.parameters = {
+  docs: {
+    description: {
+      story:
+        "You can pass an icon for a specific breadcrumb in the `links` array via the `icon` property.",
+    },
+  },
+};
+
+export const Slots: StoryFn<UBreadcrumbsArgs> = (args) => ({
+  components: { UBreadcrumbs, UBadge, UButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UBreadcrumbs v-bind="args">
+      <template #icon="{ index }">
+        <UBadge
+          v-if="index === 1"
+          label="Info"
+          color="green"
+          size="sm"
+        />
+      </template>
+    </UBreadcrumbs>
+
+    <UBreadcrumbs v-bind="args">
+      <template #label="{ label, index }">
+        <UButton v-if="index === 0" :label="label" size="2xs" />
+      </template>
+    </UBreadcrumbs>
+
+    <UBreadcrumbs v-bind="args">
+      <template #divider="{ index }">
+        <span>/</span>
+      </template>
+    </UBreadcrumbs>
+  `,
+});

package/ui.navigation-breadcrumbs/types.ts

@@ -0,0 +1,72 @@
+import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
+import type { Props as ULinkProps } from "../ui.button-link/types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface UBreadcrumb extends ULinkProps {
+  icon?: string;
+}
+
+export interface Props {
+  /**
+   * Array of links.
+   */
+  links?: UBreadcrumb[];
+
+  /**
+   * Breadcrumbs' size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Breadcrumbs' color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
+
+  /**
+   * Specifies where to open the linked page.
+   */
+  target?: "_blank" | "_self" | "_parent" | "_top" | string;
+
+  /**
+   * Show underline.
+   */
+  underlined?: boolean;
+
+  /**
+   * Set breadcrumbs' underline style as dashed.
+   */
+  dashed?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/utils/node/loaderIcon.js

@@ -189,7 +189,7 @@ async function findAndCopyIcons(files) {
       const iconName = groupMatch ? groupMatch[3] : null;
 
       try {
-        if (!iconName) return;
+        if (!iconName) continue;
 
         if (iconName?.includes("?") && iconName?.includes(":")) {
           const [trueName, falseName] = getTernaryValues(iconName);