feat(BaseBreadcrumb): add color and classes prop, add to app.config, …

…add default prop values
shuriken-ui · Feb 21, 2024 · 9931fb0 · 9931fb0
1 parent e2818fd
commit 9931fb0
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 28 deletions.
diff --git a/.playground/pages/tests/base/breadcrumb.vue b/.playground/pages/tests/base/breadcrumb.vue
@@ -6,6 +6,24 @@ definePageMeta({
   section: 'base',
 })
 
+const demoBreadcrumb = [
+  {
+    label: 'Home',
+    hideLabel: false,
+    to: '#',
+  },
+  {
+    label: 'Products',
+    hideLabel: false,
+    to: '#',
+  },
+  {
+    label: 'Laptops',
+    hideLabel: false,
+    to: '#',
+  },
+]
+
 const demoBreadcrumbOne = [
   {
     label: 'Home',
@@ -50,6 +68,14 @@ const demoBreadcrumbTwo = [
 <template>
   <div>
     <NuiPreviewContainer title="BaseBreadcrumb">
+      <NuiPreview title="Colors" description="Breadcrumb component colors">
+        <div class="flex flex-col gap-4 pt-4">
+          <BaseBreadcrumb :items="demoBreadcrumb" color="dark" />
+
+          <BaseBreadcrumb :items="demoBreadcrumb" color="black" />
+        </div>
+      </NuiPreview>
+
       <NuiPreview
         title="Separator: dot"
         description="Breadcrumb component with dot separator"

diff --git a/app.config.ts b/app.config.ts
@@ -23,6 +23,9 @@ export default defineAppConfig({
       limit: 4,
       size: 'sm',
     },
+    BaseBreadcrumb: {
+      color: 'primary',
+    },
     BaseButton: {
       variant: 'solid',
       rounded: 'sm',

diff --git a/components/base/BaseBreadcrumb.vue b/components/base/BaseBreadcrumb.vue
@@ -1,40 +1,81 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
-const props = defineProps<{
-  /**
-   * The items to display in the breadcrumb.
-   *
-   * If not provided, the breadcrumb will be generated
-   * from the current route using page meta under `breadcrumb` key.
-   */
-  items?: {
+const props = withDefaults(
+  defineProps<{
     /**
-     * The route to navigate to when the item is clicked.
+     * Defines the hover color of the breadcrumb links
+     *
+     * @since 3.0.0
+     * @default 'default'
      */
-    to?: RouteLocationRaw
+    color?: 'primary' | 'dark' | 'black'
 
     /**
-     * The label to display for the item.
+     * The items to display in the breadcrumb.
+     *
+     * If not provided, the breadcrumb will be generated
+     * from the current route using page meta under `breadcrumb` key.
      */
-    label?: string
+    items?: {
+      /**
+       * The route to navigate to when the item is clicked.
+       */
+      to?: RouteLocationRaw
 
-    /**
-     * Whether to hide the label for the item.
-     */
-    hideLabel?: boolean
+      /**
+       * The label to display for the item.
+       */
+      label?: string
 
-    /**
-     * An icon to display for the item.
-     */
-    icon?: string
+      /**
+       * Whether to hide the label for the item.
+       */
+      hideLabel?: boolean
+
+      /**
+       * An icon to display for the item.
+       */
+      icon?: string
+
+      /**
+       * CSS classes to apply to the icon.
+       */
+      iconClasses?: string | string[]
+    }[]
 
     /**
-     * CSS classes to apply to the icon.
+     * Optional CSS classes to apply to the component inner elements.
      */
-    iconClasses?: string | string[]
-  }[]
-}>()
+    classes?: {
+      /**
+       * CSS classes to apply to the wrapper element.
+       */
+      wrapper?: string | string[]
+
+      /**
+       * CSS classes to apply to the list element.
+       */
+      list?: string | string[]
+
+      /**
+       * CSS classes to apply to the dropdowm element.
+       */
+      dropdown?: string | string[]
+
+      /**
+       * CSS classes to apply to the item element.
+       */
+      item?: string | string[]
+    }
+  }>(),
+  {
+    items: undefined,
+    color: undefined,
+    classes: () => ({}),
+  },
+)
+
 const route = useRoute()
 const router = useRouter()
 
@@ -80,13 +121,28 @@ const items = computed(() => {
 
   return breadcrumbItems
 })
+
+const colors = {
+  primary: 'nui-breadcrumb-primary',
+  dark: 'nui-breadcrumb-dark',
+  black: 'nui-breadcrumb-black',
+}
+
+const color = useNuiDefaultProperty(props, 'BaseBreadcrumb', 'color')
 </script>
 
 <template>
-  <nav class="nui-breadcrumb">
-    <ul class="nui-breadcrumb-list">
+  <nav
+    class="nui-breadcrumb"
+    :class="[color && colors[color], props.classes?.wrapper]"
+  >
+    <ul class="nui-breadcrumb-list" :class="props.classes?.list">
       <li class="nui-breadcrumb-item-mobile">
-        <BaseDropdown variant="context" size="md">
+        <BaseDropdown
+          variant="context"
+          size="md"
+          :class="props.classes?.dropdown"
+        >
           <BaseDropdownItem
             v-for="(item, index) in items.slice(0, items.length - 1)"
             :key="index"
@@ -100,7 +156,10 @@ const items = computed(() => {
       <template v-for="(item, index) in items" :key="index">
         <li
           class="nui-breadcrumb-item"
-          :class="index !== items.length - 1 ? 'hidden sm:flex' : 'flex'"
+          :class="[
+            index !== items.length - 1 ? 'hidden sm:flex' : 'flex',
+            props.classes?.item,
+          ]"
         >
           <slot name="link" v-bind="{ item, index }">
             <NuxtLink