[Component]: Breadcrumb Component (Work in progress)

packages/docs/components/Breadcrumb.md

@@ -0,0 +1,107 @@
+# Breadcrumb
+
+<div class="vp-doc">
+
+> The classic breadcrumb, in different colors, sizes, and states
+
+</div>
+
+<div class="vp-example">
+
+## Examples
+
+<example-breadcrumb />
+
+</div>
+
+<div class="vp-example">
+
+## Class props
+
+<inspector-breadcrumb-viewer />
+
+</div>
+
+<div class="vp-doc">
+
+## Breadcrumb component
+
+> The classic breadcrumb, in different colors, sizes, and states
+
+```html
+<o-breadcrumb></o-breadcrumb>
+```
+
+### Props
+
+| Prop name     | Description                                    | Type     | Values                      | Default    |
+| ------------- | ---------------------------------------------- | -------- | --------------------------- | ---------- |
+| align         | Position of breadcrumb                         | string   | `left`, `centered`, `right` | `left`     |
+| override      | Override existing theme classes completely     | boolean  |                             |            |
+| size          | Size of the breadcrumb                         | string   | `small`, `medium`, `large`  | `medium`   |
+| tag           | Tag of the breadcrumb                          | string   | `div`, `section` ...        | `section`  |
+| separator     | Separator between breadcrumb items             | string   | `has-arrow-separator`, `has-dot-separator`, `has-slash-separator`, `has-bullet-separator`, `has-succeeds-separator`, `has-chevron-separator` | `has-slash-separator` |
+
+### Slots
+
+| Name    | Description              | Bindings |
+| ------- | ------------------------ | -------- |
+| default | Display Breadcrumb items |          |
+
+</div>
+
+<div class="vp-doc">
+
+## Breadcrumb item component
+
+> The classic breadcrumb item, in different colors, icons and states
+
+```html
+<o-breadcrumb-item></o-breadcrumb-item>
+```
+
+### Props
+
+| Prop name     | Description                                    | Type     | Values                      | Default    |
+| ------------- | ---------------------------------------------- | -------- | --------------------------- | ---------- |
+| active        | Active breadcrumb item                         | boolean  |                             | `false`    |
+| activeVariant | Variant of active breadcrumb item              | string   | `primary`, `info`, `warning`, `danger`            | `primary`  |
+| disabled      | breadcrum item is disabled                     | boolean  |                             | `false`    |
+| tag           | Tag of the breadcrumb item                     | string   | `a`, `router-link`          | `a`        |
+| iconLeft      | Icon name to show on the left                  | string   |                             |            |
+| iconRight     | Icon name to show on the right                 | string   |                             |            |
+| iconBoth      | Icon name to show on both sides                | string   |                             |            |
+| iconPack      | Icon pack to use                               | string   | `mdi`, `fa`, `fas` and any other custom icon pack |            |
+
+### Slots
+
+| Name    | Description     | Bindings |
+| ------- | --------------- | -------- |
+| default | Display content |          |
+
+</div>
+
+<div class="vp-doc">
+
+## Sass variables
+
+<div class="theme-oruga">
+
+> Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div>
+<div class="theme-bulma">
+
+> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div>
+<div class="theme-bootstrap">
+
+> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_
+
+<p>The theme does not have any custom variables for this component.</p>
+</div>
+
+</div>

packages/docs/components/Input.md

@@ -55,7 +55,7 @@ Combine it with the Field component to access all functionalities.
 | iconRightVariant   | Variant of right icon                                                               | string                                                                                                | -                                                                               |                                                                                                                                                           |
 | id                 | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string                                                                                                | -                                                                               | <code style='white-space: nowrap; padding: 0;'>useId()</code>                                                                                             |
 | maxlength          | Same as native maxlength, plus character counter                                    | number \| string                                                                                      | -                                                                               |                                                                                                                                                           |
-| modelModifiers     |                                                                                     | Record&lt;string, true&gt;                                                                            | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                    |
+| modelModifiers     |                                                                                     | Partial&lt;Record&lt;string, true&gt;&gt;                                                             | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                    |
 | v-model            | The input value state                                                               | number \| string                                                                                      | -                                                                               |                                                                                                                                                           |
 | number             | Convert the ´modelValue`into type`number`                                           | boolean                                                                                               | -                                                                               | <code style='white-space: nowrap; padding: 0;'></code>                                                                                                    |
 | override           | Override existing theme classes completely                                          | boolean                                                                                               | -                                                                               |                                                                                                                                                           |

packages/oruga/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, type PropType } from "vue";
+
+import { getOption } from "@/utils/config";
+import { defineClasses } from "@/composables";
+
+import type { ComponentClass, DynamicComponent } from "@/types";
+
+/**
+ * The classic breadcrumb, in different colors, sizes, and states
+ * @displayName Breadcrumb
+ * @style _breadcrumb.scss
+ */
+defineOptions({
+    isOruga: true,
+    name: "OBreadcrumb",
+    configField: "breadcrumb",
+});
+
+const props = defineProps({
+    /** Override existing theme classes completely */
+    override: { type: Boolean, default: undefined },
+    /**
+     * Size of the breadcrumb
+     * @values small, medium, large
+     */
+    size: {
+        type: String,
+        default: () => getOption("breadcrumb.size", "small"),
+    },
+    /**
+     * Position of the breadcrumb
+     * @values left, centered, right
+     */
+    align: {
+        type: String,
+        default: getOption("breadcrumb.align", "left"),
+    },
+    /**
+     * The breadcrumb separator between breadcrumb items
+     * @values
+     *  has-arrow-separator, has-dot-separator, has-slash-separator, has-bullet-separator, has-succeeds-separator, has-chevron-separator
+     */
+    separator: {
+        type: String,
+        default: () => getOption("breadcrumb.separator", "has-slash-separator"),
+    },
+    /**
+     * Tag of the breadcrumb
+     * @values div, section ...
+     */
+    tag: {
+        type: [String, Object, Function] as PropType<DynamicComponent>,
+        default: () => getOption<DynamicComponent>("breadcrumb.tag", "section"),
+    },
+    // -----------------------------------------------------------------
+    /**
+     * This is used internally
+     * @ignore
+     */
+    // class props (will not be displayed in the docs)
+    /** Class of the root element */
+    rootClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb elements wrapper */
+    wrapperClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb size */
+    sizeClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb separator */
+    separatorClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb align */
+    alignClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+});
+
+const rootClasses = defineClasses(
+    ["rootClass", "o-breadcrumb"],
+    [
+        "sizeClass",
+        "o-breadcrumb__",
+        computed(() => props.size),
+        computed(() => !!props.size),
+    ],
+    [
+        "separatorClass",
+        "o-breadcrumb__",
+        computed(() => props.separator),
+        computed(() => !!props.separator),
+    ],
+    [
+        "alignClass",
+        "o-breadcrumb__",
+        computed(() => props.align),
+        computed(() => !!props.align),
+    ],
+);
+</script>
+
+<template>
+    <component :is="tag" :class="rootClasses" data-oruga="breadcrumb">
+        <!-- BreadcrumbItems -->
+        <slot></slot>
+    </component>
+</template>

packages/oruga/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { defineClasses } from "@/composables";
+
+import { getOption } from "@/utils/config";
+
+import { computed, type PropType } from "vue";
+import OIcon from "../icon/Icon.vue";
+
+import type { ComponentClass, DynamicComponent } from "@/types";
+
+/**
+ * The classic breadrcumb item, in different colors, sizes, and states
+ * @displayName Breadcrumb Item
+ */
+defineOptions({
+    isOruga: true,
+    name: "OBreadcrumbItem",
+    configField: "breadcrumb",
+    inheritAttrs: true,
+});
+
+const props = defineProps({
+    /**
+     * breadcrumb item is active, works only when tag provided is a
+     * @values true, false
+     */
+    active: {
+        type: Boolean,
+        default: () => getOption("breadcrumb.active"),
+    },
+    activeVariant: {
+        type: String,
+        default: () => getOption("breadcrumb.activeVariant"),
+    },
+    /**
+     * breadcrumb item tag name
+     * @values li, a, router-link, nuxt-link (or other nuxt alias)
+     */
+    tag: {
+        type: [String, Object, Function] as PropType<DynamicComponent>,
+        default: () => getOption<DynamicComponent>("breadcrumb.tag", "a"),
+    },
+    /**
+     * breadcrumb item is disabled
+     * @values true, false
+     */
+    disabled: {
+        type: Boolean,
+        default: () => getOption("breadcrumb.disabled"),
+    },
+    /**
+     * Icon pack to use
+     * @values mdi, fa, fas and any other custom icon pack
+     */
+    iconPack: {
+        type: String,
+        default: () => getOption("breadcrumb.iconPack", undefined),
+    },
+    /** Icon name to show on the left */
+    iconLeft: { type: String, default: undefined },
+    /** Icon name to show on the right */
+    iconRight: { type: String, default: undefined },
+    /** Show the icon in both sides, left - right */
+    iconBoth: { type: Boolean, default: false },
+    /**
+     * This is used internally
+     * @ignore
+     */
+    /* class props (will not be displayed in the docs) */
+    /** Class of the breadcrumb elements wrapper */
+    wrapperClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb icon */
+    iconClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb icon on the left */
+    iconLeftClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class of the breadcrumb icon on the right */
+    iconRightClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+});
+
+// --- Computed Component Classes ---
+const computedDisabled = computed(() =>
+    props.disabled ? "o-breadcrumb-item__disabled" : null,
+);
+const computedActive = computed(() => {
+    if (props.active && props.tag !== "router-link")
+        return `o-breadcrumb-item__${props.activeVariant} active`;
+    if (props.tag == "router-link")
+        return `o-breadcrumb-item__${props.activeVariant}`;
+    return null;
+});
+// --- Computed Component Classes ---
+
+const iconClasses = defineClasses(["iconClass", "o-breadcrumb-item__icon"]);
+
+const iconLeftClasses = defineClasses([
+    "iconLeftClass",
+    "o-breadcrumb-item__icon-left",
+]);
+
+const iconRightClasses = defineClasses([
+    "iconRightClass",
+    "o-breadcrumb-item__icon-right",
+]);
+
+const wrapperClasses = defineClasses([
+    "wrapperClass",
+    "o-breadcrumb-item__wrapper",
+]);
+
+const rootClasses = defineClasses(["rootClass", "o-breadcrumb-item"]);
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="[rootClasses, computedActive, computedDisabled]"
+        data-oruga="breadcrumb-item">
+        <span :class="wrapperClasses">
+            <o-icon
+                v-if="iconLeft"
+                :pack="iconPack"
+                :icon="iconLeft"
+                :both="iconBoth"
+                :class="[...iconClasses, ...iconLeftClasses]" />
+            <slot></slot>
+            <o-icon
+                v-if="iconRight"
+                :pack="iconPack"
+                :icon="iconRight"
+                :both="iconBoth"
+                :class="[...iconClasses, ...iconRightClasses]" />
+        </span>
+    </component>
+</template>