@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.10

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs

@@ -1,73 +1,115 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
-import "./VBreadcrumbs.sass"; // Types
+import "./VBreadcrumbs.css"; // Components
+
+import { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.mjs";
+import { VBreadcrumbsItem } from "./VBreadcrumbsItem.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VIcon } from "../VIcon/index.mjs"; // Composables
 
-// Components
-import VBreadcrumbsItem from "./VBreadcrumbsItem.mjs";
-import VBreadcrumbsDivider from "./VBreadcrumbsDivider.mjs"; // Mixins
+import { IconValue } from "../../composables/icons.mjs";
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import Themeable from "../../mixins/themeable/index.mjs"; // Utils
+import { genericComponent, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue'; // Types
 
-import mixins from "../../util/mixins.mjs";
-export default mixins(Themeable
-/* @vue/component */
-).extend({
-  name: 'v-breadcrumbs',
+export const VBreadcrumbs = genericComponent()({
+  name: 'VBreadcrumbs',
   props: {
+    activeClass: String,
+    activeColor: String,
+    bgColor: String,
+    color: String,
+    disabled: Boolean,
     divider: {
       type: String,
       default: '/'
     },
+    icon: IconValue,
     items: {
       type: Array,
       default: () => []
     },
-    large: Boolean
+    ...makeDensityProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'ul'
+    })
   },
-  computed: {
-    classes() {
-      return {
-        'v-breadcrumbs--large': this.large,
-        ...this.themeClasses
-      };
-    }
 
-  },
-  methods: {
-    genDivider() {
-      return this.$createElement(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider);
-    },
-
-    genItems() {
-      const items = [];
-      const hasSlot = !!this.$scopedSlots.item;
-      const keys = [];
-
-      for (let i = 0; i < this.items.length; i++) {
-        const item = this.items[i];
-        keys.push(item.text);
-        if (hasSlot) items.push(this.$scopedSlots.item({
-          item
-        }));else items.push(this.$createElement(VBreadcrumbsItem, {
-          key: keys.join('.'),
-          props: item
-        }, [item.text]));
-        if (i < this.items.length - 1) items.push(this.genDivider());
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    provideDefaults({
+      VBreadcrumbsItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor: toRef(props, 'activeColor'),
+        color: toRef(props, 'color'),
+        disabled: toRef(props, 'disabled')
       }
+    });
+    useRender(() => {
+      var _slots$default;
 
-      return items;
-    }
+      const hasPrepend = !!(slots.prepend || props.icon);
+      return _createVNode(props.tag, {
+        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
+        "style": backgroundColorStyles.value
+      }, {
+        default: () => [hasPrepend && _createVNode(VDefaultsProvider, {
+          "key": "prepend",
+          "defaults": {
+            VIcon: {
+              icon: props.icon,
+              start: true
+            }
+          }
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-breadcrumbs__prepend"
+          }, [slots.prepend ? slots.prepend() : props.icon && _createVNode(VIcon, null, null)])]
+        }), props.items.map((item, index, array) => {
+          var _slots$divider;
 
-  },
+          return _createVNode(_Fragment, null, [_createVNode(VBreadcrumbsItem, _mergeProps({
+            "key": index,
+            "disabled": index >= array.length - 1
+          }, typeof item === 'string' ? {
+            title: item
+          } : item), {
+            default: slots.title ? () => {
+              var _slots$title;
 
-  render(h) {
-    const children = this.$slots.default || this.genItems();
-    return h('ul', {
-      staticClass: 'v-breadcrumbs',
-      class: this.classes
-    }, children);
+              return (_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots, {
+                item,
+                index
+              });
+            } : undefined
+          }), index < array.length - 1 && _createVNode(VBreadcrumbsDivider, null, {
+            default: () => [((_slots$divider = slots.divider) == null ? void 0 : _slots$divider.call(slots, {
+              item,
+              index
+            })) ?? props.divider]
+          })]);
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+      });
+    });
+    return {};
   }
 
 });

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.ts"],"names":["VBreadcrumbsItem","VBreadcrumbsDivider","Themeable","mixins","extend","name","props","divider","type","String","default","items","Array","large","Boolean","computed","classes","themeClasses","methods","genDivider","$createElement","$slots","genItems","hasSlot","$scopedSlots","item","keys","i","length","push","text","key","join","render","h","children","staticClass","class"],"mappings":"AAAA;;AACA;AAEA;AACA,6B,CAEA;;AAIA;OACOA,gB;OACAC,mB,mCAEP;;OACOC,S,0CAEP;;OACOC,M;AAEP,eAAeA,MAAM,CACnBD;AACA;AAFmB,CAAN,CAGbE,MAHa,CAGN;AACPC,EAAAA,IAAI,EAAE,eADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAEC,MADC;AAEPC,MAAAA,OAAO,EAAE;AAFF,KADJ;AAKLC,IAAAA,KAAK,EAAE;AACLH,MAAAA,IAAI,EAAEI,KADD;AAELF,MAAAA,OAAO,EAAE,MAAO;AAFX,KALF;AASLG,IAAAA,KAAK,EAAEC;AATF,GAHA;AAePC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,gCAAwB,KAAKH,KADxB;AAEL,WAAG,KAAKI;AAFH,OAAP;AAID;;AANO,GAfH;AAwBPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKC,cAAL,CAAoBnB,mBAApB,EAAyC,KAAKoB,MAAL,CAAYd,OAAZ,GAAsB,KAAKc,MAAL,CAAYd,OAAlC,GAA4C,KAAKA,OAA1F,CAAP;AACD,KAHM;;AAIPe,IAAAA,QAAQ,GAAI;AACV,YAAMX,KAAK,GAAG,EAAd;AACA,YAAMY,OAAO,GAAG,CAAC,CAAC,KAAKC,YAAL,CAAkBC,IAApC;AACA,YAAMC,IAAI,GAAG,EAAb;;AAEA,WAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAG,KAAKhB,KAAL,CAAWiB,MAA/B,EAAuCD,CAAC,EAAxC,EAA4C;AAC1C,cAAMF,IAAI,GAAG,KAAKd,KAAL,CAAWgB,CAAX,CAAb;AAEAD,QAAAA,IAAI,CAACG,IAAL,CAAUJ,IAAI,CAACK,IAAf;AAEA,YAAIP,OAAJ,EAAaZ,KAAK,CAACkB,IAAN,CAAW,KAAKL,YAAL,CAAkBC,IAAlB,CAAwB;AAAEA,UAAAA;AAAF,SAAxB,CAAX,EAAb,KACKd,KAAK,CAACkB,IAAN,CAAW,KAAKT,cAAL,CAAoBpB,gBAApB,EAAsC;AAAE+B,UAAAA,GAAG,EAAEL,IAAI,CAACM,IAAL,CAAU,GAAV,CAAP;AAAuB1B,UAAAA,KAAK,EAAEmB;AAA9B,SAAtC,EAA4E,CAACA,IAAI,CAACK,IAAN,CAA5E,CAAX;AAEL,YAAIH,CAAC,GAAG,KAAKhB,KAAL,CAAWiB,MAAX,GAAoB,CAA5B,EAA+BjB,KAAK,CAACkB,IAAN,CAAW,KAAKV,UAAL,EAAX;AAChC;;AAED,aAAOR,KAAP;AACD;;AArBM,GAxBF;;AAgDPsB,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,UAAMC,QAAQ,GAAG,KAAKd,MAAL,CAAYX,OAAZ,IAAuB,KAAKY,QAAL,EAAxC;AAEA,WAAOY,CAAC,CAAC,IAAD,EAAO;AACbE,MAAAA,WAAW,EAAE,eADA;AAEbC,MAAAA,KAAK,EAAE,KAAKrB;AAFC,KAAP,EAGLmB,QAHK,CAAR;AAID;;AAvDM,CAHM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VBreadcrumbs.sass'\n\n// Types\nimport { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\n\n// Components\nimport VBreadcrumbsItem from './VBreadcrumbsItem'\nimport VBreadcrumbsDivider from './VBreadcrumbsDivider'\n\n// Mixins\nimport Themeable from '../../mixins/themeable'\n\n// Utils\nimport mixins from '../../util/mixins'\n\nexport default mixins(\n  Themeable\n  /* @vue/component */\n).extend({\n  name: 'v-breadcrumbs',\n\n  props: {\n    divider: {\n      type: String,\n      default: '/',\n    },\n    items: {\n      type: Array,\n      default: () => ([]),\n    } as PropValidator<any[]>,\n    large: Boolean,\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-breadcrumbs--large': this.large,\n        ...this.themeClasses,\n      }\n    },\n  },\n\n  methods: {\n    genDivider () {\n      return this.$createElement(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)\n    },\n    genItems () {\n      const items = []\n      const hasSlot = !!this.$scopedSlots.item\n      const keys = []\n\n      for (let i = 0; i < this.items.length; i++) {\n        const item = this.items[i]\n\n        keys.push(item.text)\n\n        if (hasSlot) items.push(this.$scopedSlots.item!({ item }))\n        else items.push(this.$createElement(VBreadcrumbsItem, { key: keys.join('.'), props: item }, [item.text]))\n\n        if (i < this.items.length - 1) items.push(this.genDivider())\n      }\n\n      return items\n    },\n  },\n\n  render (h): VNode {\n    const children = this.$slots.default || this.genItems()\n\n    return h('ul', {\n      staticClass: 'v-breadcrumbs',\n      class: this.classes,\n    }, children)\n  },\n})\n"],"file":"VBreadcrumbs.mjs"}
+{"version":3,"file":"VBreadcrumbs.mjs","names":["VBreadcrumbsDivider","VBreadcrumbsItem","VDefaultsProvider","VIcon","IconValue","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeTagProps","provideDefaults","useBackgroundColor","genericComponent","useRender","toRef","VBreadcrumbs","name","props","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","setup","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","hasPrepend","prepend","value","start","map","item","index","array","length","title","undefined"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { LinkProps } from '@/composables/router'\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\nexport type BreadcrumbItem = string | (LinkProps & {\n  text: string\n  disabled?: boolean\n})\n\nexport const VBreadcrumbs = genericComponent<new <T>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    item: [T | number]\n  }>\n}>()({\n  name: 'VBreadcrumbs',\n\n  props: {\n    activeClass: String,\n    activeColor: String,\n    bgColor: String,\n    color: String,\n    disabled: Boolean,\n    divider: {\n      type: String,\n      default: '/',\n    },\n    icon: IconValue,\n    items: {\n      type: Array as PropType<BreadcrumbItem[]>,\n      default: () => ([]),\n    },\n\n    ...makeDensityProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'ul' }),\n  },\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBreadcrumbsItem: {\n        activeClass: toRef(props, 'activeClass'),\n        activeColor: toRef(props, 'activeColor'),\n        color: toRef(props, 'color'),\n        disabled: toRef(props, 'disabled'),\n      },\n    })\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-breadcrumbs',\n            backgroundColorClasses.value,\n            densityClasses.value,\n            roundedClasses.value,\n          ]}\n          style={ backgroundColorStyles.value }\n        >\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VIcon: {\n                  icon: props.icon,\n                  start: true,\n                },\n              }}\n            >\n              <div class=\"v-breadcrumbs__prepend\">\n                { slots.prepend\n                  ? slots.prepend()\n                  : props.icon && (<VIcon />)\n                }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          { props.items.map((item, index, array) => (\n            <>\n              <VBreadcrumbsItem\n                key={ index }\n                disabled={ index >= array.length - 1 }\n                { ...(typeof item === 'string' ? { title: item } : item) }\n                v-slots={{\n                  default: slots.title ? () => slots.title?.({ item, index }) : undefined,\n                }}\n              />\n\n              { index < array.length - 1 && (\n                <VBreadcrumbsDivider>\n                  { slots.divider?.({ item, index }) ?? props.divider }\n                </VBreadcrumbsDivider>\n              ) }\n            </>\n          )) }\n\n          { slots.default?.() }\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"mappings":"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"}

package/lib/components/VBreadcrumbs/VBreadcrumbs.sass

@@ -1,45 +1,45 @@
-@import './_variables'
+@use '../../styles/tools'
+@use './variables' as *
 
-// Theme
-+theme(v-breadcrumbs) using ($material)
-  .v-breadcrumbs__divider, .v-breadcrumbs__item--disabled
-    color: map-deep-get($material, 'text', 'disabled')
-
-// Block
 .v-breadcrumbs
-  align-items: center
   display: flex
-  flex-wrap: wrap
-  flex: $breadcrumbs-flex
-  list-style-type: none
-  margin: $breadcrumbs-margin
-  padding: $breadcrumbs-padding
+  align-items: center
+  line-height: $breadcrumbs-line-height
+  padding: $breadcrumbs-padding-y $breadcrumbs-padding-x
 
-  li
-    align-items: center
-    display: inline-flex
-    font-size: $breadcrumbs-item-font-size
+  &--rounded
+    @include tools.rounded($breadcrumbs-rounded-border-radius)
 
-    .v-icon
-      font-size: $breadcrumbs-item-large-font-size
+  @at-root
+    @include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier)
+      padding-top: #{$breadcrumbs-padding-y + $modifier}
+      padding-bottom: #{$breadcrumbs-padding-y + $modifier}
 
-    &:nth-child(even)
-      padding: $breadcrumbs-even-child-padding
+.v-breadcrumbs__prepend
+  align-items: center
+  display: inline-flex
 
-// Element
-.v-breadcrumbs__item
+.v-breadcrumbs-item
   align-items: center
+  color: inherit
   display: inline-flex
+  padding: $breadcrumbs-item-padding
   text-decoration: none
-  transition: $primary-transition
+  vertical-align: $breadcrumbs-vertical-align
 
   &--disabled
+    opacity: $breadcrumbs-item-disabled-opacity
     pointer-events: none
 
-// Modifier
-.v-breadcrumbs--large
-  li
-    font-size: $breadcrumbs-item-large-font-size
+  &--link:hover
+    text-decoration: $breadcrumbs-item-link-text-decoration
+
+  .v-icon
+    font-size: $breadcrumbs-item-icon-font-size
+    margin-inline-start: $breadcrumbs-item-icon-margin-inline-start
+    margin-inline-end: $breadcrumbs-item-icon-margin-inline-end
 
-    .v-icon
-      font-size: $breadcrumbs-item-large-font-size
+.v-breadcrumbs-divider
+  display: inline-block
+  padding: $breadcrumbs-divider-padding
+  vertical-align: $breadcrumbs-vertical-align

package/lib/components/VBreadcrumbs/VBreadcrumbsDivider.mjs

@@ -1,6 +1,3 @@
-// @ts-nocheck
-
-/* eslint-disable */
-import { createSimpleFunctional } from "../../util/helpers.mjs";
-export default createSimpleFunctional('v-breadcrumbs__divider', 'li');
+import { createSimpleFunctional } from "../../util/index.mjs";
+export const VBreadcrumbsDivider = createSimpleFunctional('v-breadcrumbs-divider', 'li');
 //# sourceMappingURL=VBreadcrumbsDivider.mjs.map

package/lib/components/VBreadcrumbs/VBreadcrumbsDivider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsDivider.ts"],"names":["createSimpleFunctional"],"mappings":"AAAA;;AACA;SAESA,sB;AAET,eAAeA,sBAAsB,CAAC,wBAAD,EAA2B,IAA3B,CAArC","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\nimport { createSimpleFunctional } from '../../util/helpers'\n\nexport default createSimpleFunctional('v-breadcrumbs__divider', 'li')\n"],"file":"VBreadcrumbsDivider.mjs"}
+{"version":3,"file":"VBreadcrumbsDivider.mjs","names":["createSimpleFunctional","VBreadcrumbsDivider"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBreadcrumbsDivider = createSimpleFunctional('v-breadcrumbs-divider', 'li')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,mBAAmB,GAAGD,sBAAsB,CAAC,uBAAD,EAA0B,IAA1B,CAAlD"}

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs

@@ -1,44 +1,62 @@
-// @ts-nocheck
+import { createVNode as _createVNode } from "vue";
+// Composables
+import { makeRouterProps, useLink } from "../../composables/router.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { useTextColor } from "../../composables/color.mjs"; // Utilities
 
-/* eslint-disable */
-import Routable from "../../mixins/routable/index.mjs";
-import mixins from "../../util/mixins.mjs";
-
-/* @vue/component */
-export default mixins(Routable).extend({
-  name: 'v-breadcrumbs-item',
+import { computed } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VBreadcrumbsItem = defineComponent({
+  name: 'VBreadcrumbsItem',
   props: {
-    // In a breadcrumb, the currently
-    // active item should be dimmed
-    activeClass: {
-      type: String,
-      default: 'v-breadcrumbs__item--disabled'
-    },
-    ripple: {
-      type: [Boolean, Object],
-      default: false
-    }
+    active: Boolean,
+    activeClass: String,
+    activeColor: String,
+    color: String,
+    disabled: Boolean,
+    title: String,
+    ...makeRouterProps(),
+    ...makeTagProps({
+      tag: 'li'
+    })
   },
-  computed: {
-    classes() {
-      return {
-        'v-breadcrumbs__item': true,
-        [this.activeClass]: this.disabled
-      };
-    }
 
-  },
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs
+    } = _ref;
+    const link = useLink(props, attrs);
+    const isActive = computed(() => {
+      var _link$isExactActive;
 
-  render(h) {
+      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+    });
+    const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {
-      tag,
-      data
-    } = this.generateRouteLink();
-    return h('li', [h(tag, { ...data,
-      attrs: { ...data.attrs,
-        'aria-current': this.isActive && this.isLink ? 'page' : undefined
-      }
-    }, this.$slots.default)]);
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(color);
+    useRender(() => {
+      var _slots$default;
+
+      const Tag = link.isLink.value ? 'a' : props.tag;
+      return _createVNode(Tag, {
+        "class": ['v-breadcrumbs-item', {
+          'v-breadcrumbs-item--active': isActive.value,
+          'v-breadcrumbs-item--disabled': props.disabled,
+          'v-breadcrumbs-item--link': link.isLink.value,
+          [`${props.activeClass}`]: isActive.value && props.activeClass
+        }, textColorClasses.value],
+        "style": [textColorStyles.value],
+        "href": link.href.value,
+        "aria-current": isActive.value ? 'page' : undefined,
+        "onClick": link.navigate
+      }, {
+        default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? props.title]
+      });
+    });
+    return {};
   }
 
 });

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.ts"],"names":["Routable","mixins","extend","name","props","activeClass","type","String","default","ripple","Boolean","Object","computed","classes","disabled","render","h","tag","data","generateRouteLink","attrs","isActive","isLink","undefined","$slots"],"mappings":"AAAA;;AACA;OAEOA,Q;OAEAC,M;;AAGP;AACA,eAAeA,MAAM,CAACD,QAAD,CAAN,CAAiBE,MAAjB,CAAwB;AACrCC,EAAAA,IAAI,EAAE,oBAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACL;AACA;AACAC,IAAAA,WAAW,EAAE;AACXC,MAAAA,IAAI,EAAEC,MADK;AAEXC,MAAAA,OAAO,EAAE;AAFE,KAHR;AAOLC,IAAAA,MAAM,EAAE;AACNH,MAAAA,IAAI,EAAE,CAACI,OAAD,EAAUC,MAAV,CADA;AAENH,MAAAA,OAAO,EAAE;AAFH;AAPH,GAH8B;AAgBrCI,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,+BAAuB,IADlB;AAEL,SAAC,KAAKR,WAAN,GAAoB,KAAKS;AAFpB,OAAP;AAID;;AANO,GAhB2B;;AAyBrCC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,UAAM;AAAEC,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAgB,KAAKC,iBAAL,EAAtB;AAEA,WAAOH,CAAC,CAAC,IAAD,EAAO,CACbA,CAAC,CAACC,GAAD,EAAM,EACL,GAAGC,IADE;AAELE,MAAAA,KAAK,EAAE,EACL,GAAGF,IAAI,CAACE,KADH;AAEL,wBAAgB,KAAKC,QAAL,IAAiB,KAAKC,MAAtB,GAA+B,MAA/B,GAAwCC;AAFnD;AAFF,KAAN,EAME,KAAKC,MAAL,CAAYhB,OANd,CADY,CAAP,CAAR;AASD;;AArCoC,CAAxB,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\nimport Routable from '../../mixins/routable'\n\nimport mixins from '../../util/mixins'\nimport { VNode } from 'vue'\n\n/* @vue/component */\nexport default mixins(Routable).extend({\n  name: 'v-breadcrumbs-item',\n\n  props: {\n    // In a breadcrumb, the currently\n    // active item should be dimmed\n    activeClass: {\n      type: String,\n      default: 'v-breadcrumbs__item--disabled',\n    },\n    ripple: {\n      type: [Boolean, Object],\n      default: false,\n    },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-breadcrumbs__item': true,\n        [this.activeClass]: this.disabled,\n      }\n    },\n  },\n\n  render (h): VNode {\n    const { tag, data } = this.generateRouteLink()\n\n    return h('li', [\n      h(tag, {\n        ...data,\n        attrs: {\n          ...data.attrs,\n          'aria-current': this.isActive && this.isLink ? 'page' : undefined,\n        },\n      }, this.$slots.default),\n    ])\n  },\n})\n"],"file":"VBreadcrumbsItem.mjs"}
+{"version":3,"file":"VBreadcrumbsItem.mjs","names":["makeRouterProps","useLink","makeTagProps","useTextColor","computed","defineComponent","useRender","VBreadcrumbsItem","name","props","active","Boolean","activeClass","String","activeColor","color","disabled","title","tag","setup","slots","attrs","link","isActive","isExactActive","value","textColorClasses","textColorStyles","Tag","isLink","href","undefined","navigate","default"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"sourcesContent":["// Composables\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VBreadcrumbsItem = defineComponent({\n  name: 'VBreadcrumbsItem',\n\n  props: {\n    active: Boolean,\n    activeClass: String,\n    activeColor: String,\n    color: String,\n    disabled: Boolean,\n    title: String,\n\n    ...makeRouterProps(),\n    ...makeTagProps({ tag: 'li' }),\n  },\n\n  setup (props, { slots, attrs }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => props.active || link.isExactActive?.value)\n    const color = computed(() => isActive.value ? props.activeColor : props.color)\n\n    const { textColorClasses, textColorStyles } = useTextColor(color)\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : props.tag\n\n      return (\n        <Tag\n          class={[\n            'v-breadcrumbs-item',\n            {\n              'v-breadcrumbs-item--active': isActive.value,\n              'v-breadcrumbs-item--disabled': props.disabled,\n              'v-breadcrumbs-item--link': link.isLink.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n          ]}\n          style={[\n            textColorStyles.value,\n          ]}\n          href={ link.href.value }\n          aria-current={ isActive.value ? 'page' : undefined }\n          onClick={ link.navigate }\n        >\n          { slots.default?.() ?? props.title }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"mappings":";AAAA;SACSA,e,EAAiBC,O;SACjBC,Y;SACAC,Y,uCAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,gBAAgB,GAAGF,eAAe,CAAC;EAC9CG,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,WAAW,EAAEC,MAFR;IAGLC,WAAW,EAAED,MAHR;IAILE,KAAK,EAAEF,MAJF;IAKLG,QAAQ,EAAEL,OALL;IAMLM,KAAK,EAAEJ,MANF;IAQL,GAAGb,eAAe,EARb;IASL,GAAGE,YAAY,CAAC;MAAEgB,GAAG,EAAE;IAAP,CAAD;EATV,CAHuC;;EAe9CC,KAAK,CAAEV,KAAF,QAA2B;IAAA,IAAlB;MAAEW,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,IAAI,GAAGrB,OAAO,CAACQ,KAAD,EAAQY,KAAR,CAApB;IACA,MAAME,QAAQ,GAAGnB,QAAQ,CAAC;MAAA;;MAAA,OAAMK,KAAK,CAACC,MAAN,4BAAgBY,IAAI,CAACE,aAArB,qBAAgB,oBAAoBC,KAApC,CAAN;IAAA,CAAD,CAAzB;IACA,MAAMV,KAAK,GAAGX,QAAQ,CAAC,MAAMmB,QAAQ,CAACE,KAAT,GAAiBhB,KAAK,CAACK,WAAvB,GAAqCL,KAAK,CAACM,KAAlD,CAAtB;IAEA,MAAM;MAAEW,gBAAF;MAAoBC;IAApB,IAAwCxB,YAAY,CAACY,KAAD,CAA1D;IAEAT,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMsB,GAAG,GAAGN,IAAI,CAACO,MAAL,CAAYJ,KAAZ,GAAoB,GAApB,GAA0BhB,KAAK,CAACS,GAA5C;MAEA;QAAA,SAEW,CACL,oBADK,EAEL;UACE,8BAA8BK,QAAQ,CAACE,KADzC;UAEE,gCAAgChB,KAAK,CAACO,QAFxC;UAGE,4BAA4BM,IAAI,CAACO,MAAL,CAAYJ,KAH1C;UAIE,CAAE,GAAEhB,KAAK,CAACG,WAAY,EAAtB,GAA0BW,QAAQ,CAACE,KAAT,IAAkBhB,KAAK,CAACG;QAJpD,CAFK,EAQLc,gBAAgB,CAACD,KARZ,CAFX;QAAA,SAYW,CACLE,eAAe,CAACF,KADX,CAZX;QAAA,QAeWH,IAAI,CAACQ,IAAL,CAAUL,KAfrB;QAAA,gBAgBmBF,QAAQ,CAACE,KAAT,GAAiB,MAAjB,GAA0BM,SAhB7C;QAAA,WAiBcT,IAAI,CAACU;MAjBnB;QAAA,gBAmBM,mBAAAZ,KAAK,CAACa,OAAN,yCAAAb,KAAK,MAAgBX,KAAK,CAACQ,KAnBjC;MAAA;IAsBD,CAzBQ,CAAT;IA2BA,OAAO,EAAP;EACD;;AAlD6C,CAAD,CAAxC"}

package/lib/components/VBreadcrumbs/_variables.scss

@@ -1,8 +1,17 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
+@use '../../styles/tools';
 
-$breadcrumbs-flex: 0 1 auto !default;
-$breadcrumbs-padding: 18px 12px !default;
-$breadcrumbs-even-child-padding: 0 12px !default;
-$breadcrumbs-item-font-size: 14px !default;
-$breadcrumbs-item-large-font-size: 16px !default;
-$breadcrumbs-margin: 0 !default;
+// Defaults
+$breadcrumbs-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$breadcrumbs-divider-padding: 0 8px !default;
+$breadcrumbs-item-disabled-opacity: var(--v-disabled-opacity) !default;
+$breadcrumbs-item-icon-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default;
+$breadcrumbs-item-icon-margin-inline-end: 2px !default;
+$breadcrumbs-item-icon-margin-inline-start: -4px !default;
+$breadcrumbs-item-link-text-decoration: underline !default;
+$breadcrumbs-item-padding: 0 4px !default;
+$breadcrumbs-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
+$breadcrumbs-padding-y: 16px !default;
+$breadcrumbs-padding-x: 12px !default;
+$breadcrumbs-rounded-border-radius: settings.$border-radius-root !default;
+$breadcrumbs-vertical-align: middle !default;

package/lib/components/VBreadcrumbs/index.mjs

@@ -1,12 +1,4 @@
-import VBreadcrumbs from "./VBreadcrumbs.mjs";
-import VBreadcrumbsItem from "./VBreadcrumbsItem.mjs";
-import VBreadcrumbsDivider from "./VBreadcrumbsDivider.mjs";
-export { VBreadcrumbs, VBreadcrumbsItem, VBreadcrumbsDivider };
-export default {
-  $_vuetify_subcomponents: {
-    VBreadcrumbs,
-    VBreadcrumbsItem,
-    VBreadcrumbsDivider
-  }
-};
+export { VBreadcrumbs } from "./VBreadcrumbs.mjs";
+export { VBreadcrumbsItem } from "./VBreadcrumbsItem.mjs";
+export { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VBreadcrumbs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBreadcrumbs/index.ts"],"names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider","$_vuetify_subcomponents"],"mappings":"OAAOA,Y;OACAC,gB;OACAC,mB;AAEP,SAASF,YAAT,EAAuBC,gBAAvB,EAAyCC,mBAAzC;AAEA,eAAe;AACbC,EAAAA,uBAAuB,EAAE;AACvBH,IAAAA,YADuB;AAEvBC,IAAAA,gBAFuB;AAGvBC,IAAAA;AAHuB;AADZ,CAAf","sourcesContent":["import VBreadcrumbs from './VBreadcrumbs'\nimport VBreadcrumbsItem from './VBreadcrumbsItem'\nimport VBreadcrumbsDivider from './VBreadcrumbsDivider'\n\nexport { VBreadcrumbs, VBreadcrumbsItem, VBreadcrumbsDivider }\n\nexport default {\n  $_vuetify_subcomponents: {\n    VBreadcrumbs,\n    VBreadcrumbsItem,\n    VBreadcrumbsDivider,\n  },\n}\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider"],"sources":["../../../src/components/VBreadcrumbs/index.ts"],"sourcesContent":["export { VBreadcrumbs } from './VBreadcrumbs'\nexport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nexport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n"],"mappings":"SAASA,Y;SACAC,gB;SACAC,mB"}