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

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs

@@ -1,73 +1,103 @@
-// @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 { VIcon } from "../VIcon/index.mjs";
+import { VBreadcrumbsItem } from "./VBreadcrumbsItem.mjs";
+import { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.mjs"; // Composables
 
-// Components
-import VBreadcrumbsItem from "./VBreadcrumbsItem.mjs";
-import VBreadcrumbsDivider from "./VBreadcrumbsDivider.mjs"; // Mixins
+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 { toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
 
-import mixins from "../../util/mixins.mjs";
-export default mixins(Themeable
-/* @vue/component */
-).extend({
-  name: 'v-breadcrumbs',
+export const VBreadcrumbs = defineComponent({
+  name: 'VBreadcrumbs',
   props: {
+    activeClass: String,
+    activeColor: String,
+    bgColor: String,
+    color: String,
+    disabled: Boolean,
     divider: {
       type: String,
       default: '/'
     },
+    icon: String,
     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 {
+      densityClasses
+    } = useDensity(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'bgColor'));
+    provideDefaults({
+      VBreadcrumbsItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor: toRef(props, 'activeColor'),
+        color: toRef(props, 'color'),
+        disabled: toRef(props, 'disabled')
       }
+    });
+    useRender(() => {
+      var _slots$default;
 
-      return items;
-    }
+      return _createVNode(props.tag, {
+        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
+        "style": backgroundColorStyles.value
+      }, {
+        default: () => [props.icon && _createVNode(VIcon, {
+          "icon": props.icon,
+          "left": true
+        }, null), props.items.map((item, index, array) => {
+          var _slots$divider, _slots$divider2;
 
-  },
+          return _createVNode(_Fragment, null, [_createVNode(VBreadcrumbsItem, _mergeProps({
+            "key": index,
+            "disabled": index >= array.length - 1
+          }, typeof item === 'string' ? {
+            text: item
+          } : item), {
+            default: slots.text ? () => {
+              var _slots$text;
 
-  render(h) {
-    const children = this.$slots.default || this.genItems();
-    return h('ul', {
-      staticClass: 'v-breadcrumbs',
-      class: this.classes
-    }, children);
+              return (_slots$text = slots.text) == null ? void 0 : _slots$text.call(slots, {
+                item,
+                index
+              });
+            } : undefined
+          }), index < array.length - 1 && _createVNode(VBreadcrumbsDivider, null, {
+            default: () => [(_slots$divider = (_slots$divider2 = slots.divider) == null ? void 0 : _slots$divider2.call(slots, {
+              item,
+              index
+            })) != null ? _slots$divider : 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,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbs.tsx"],"names":["VIcon","VBreadcrumbsItem","VBreadcrumbsDivider","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeTagProps","provideDefaults","useBackgroundColor","toRef","defineComponent","useRender","VBreadcrumbs","name","props","activeClass","String","activeColor","bgColor","color","disabled","Boolean","divider","type","default","icon","items","Array","tag","setup","slots","densityClasses","roundedClasses","backgroundColorClasses","backgroundColorStyles","value","map","item","index","array","length","text","undefined"],"mappings":"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","sourcesContent":["// Styles\nimport './VBreadcrumbs.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nimport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n\n// Composables\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 { toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { LinkProps } from '@/composables/router'\n\nexport type BreadcrumbItem = string | (LinkProps & {\n  text: string\n  disabled?: boolean\n})\n\nexport const VBreadcrumbs = defineComponent({\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: String,\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 { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\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      <props.tag\n        class={[\n          'v-breadcrumbs',\n          backgroundColorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n        ]}\n        style={ backgroundColorStyles.value }\n      >\n        { props.icon && (\n          <VIcon icon={ props.icon } left />\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' ? { text: item } : item) }\n              v-slots={{\n                default: slots.text ? () => slots.text?.({ 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    return {}\n  },\n})\n\nexport type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>\n"],"file":"VBreadcrumbs.mjs"}

package/lib/components/VBreadcrumbs/VBreadcrumbs.sass

@@ -1,45 +1,41 @@
-@import './_variables'
+@forward './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
+  line-height: $breadcrumbs-line-height
   padding: $breadcrumbs-padding
 
-  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 + $modifier
+      padding-bottom: $breadcrumbs-padding + $modifier
 
-    &:nth-child(even)
-      padding: $breadcrumbs-even-child-padding
 
-// 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,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx"],"names":["createSimpleFunctional","VBreadcrumbsDivider"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,mBAAmB,GAAGD,sBAAsB,CAAC,uBAAD,EAA0B,IAA1B,CAAlD","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBreadcrumbsDivider = createSimpleFunctional('v-breadcrumbs-divider', 'li')\n"],"file":"VBreadcrumbsDivider.mjs"}

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs

@@ -1,44 +1,65 @@
-// @ts-nocheck
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } 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,
+    text: 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(() => {
+      const Tag = link.isLink.value ? 'a' : props.tag;
+      const hasText = !!(slots.default || props.text);
+      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: hasText ? () => {
+          var _slots$default, _slots$default2;
+
+          return (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.text;
+        } : undefined
+      });
+    });
+    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,"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"names":["makeRouterProps","useLink","makeTagProps","useTextColor","computed","defineComponent","useRender","VBreadcrumbsItem","name","props","active","Boolean","activeClass","String","activeColor","color","disabled","text","tag","setup","slots","attrs","link","isActive","isExactActive","value","textColorClasses","textColorStyles","Tag","isLink","hasText","default","href","undefined","navigate"],"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;AAC9CG,EAAAA,IAAI,EAAE,kBADwC;AAG9CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC,OADH;AAELC,IAAAA,WAAW,EAAEC,MAFR;AAGLC,IAAAA,WAAW,EAAED,MAHR;AAILE,IAAAA,KAAK,EAAEF,MAJF;AAKLG,IAAAA,QAAQ,EAAEL,OALL;AAMLM,IAAAA,IAAI,EAAEJ,MAND;AAQL,OAAGb,eAAe,EARb;AASL,OAAGE,YAAY,CAAC;AAAEgB,MAAAA,GAAG,EAAE;AAAP,KAAD;AATV,GAHuC;;AAe9CC,EAAAA,KAAK,CAAEV,KAAF,QAA2B;AAAA,QAAlB;AAAEW,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;AAC9B,UAAMC,IAAI,GAAGrB,OAAO,CAACQ,KAAD,EAAQY,KAAR,CAApB;AACA,UAAME,QAAQ,GAAGnB,QAAQ,CAAC;AAAA;;AAAA,aAAMK,KAAK,CAACC,MAAN,4BAAgBY,IAAI,CAACE,aAArB,qBAAgB,oBAAoBC,KAApC,CAAN;AAAA,KAAD,CAAzB;AACA,UAAMV,KAAK,GAAGX,QAAQ,CAAC,MAAMmB,QAAQ,CAACE,KAAT,GAAiBhB,KAAK,CAACK,WAAvB,GAAqCL,KAAK,CAACM,KAAlD,CAAtB;AAEA,UAAM;AAAEW,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwCxB,YAAY,CAACY,KAAD,CAA1D;AAEAT,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMsB,GAAG,GAAGN,IAAI,CAACO,MAAL,CAAYJ,KAAZ,GAAoB,GAApB,GAA0BhB,KAAK,CAACS,GAA5C;AACA,YAAMY,OAAO,GAAG,CAAC,EAAEV,KAAK,CAACW,OAAN,IAAiBtB,KAAK,CAACQ,IAAzB,CAAjB;AAEA;AAAA,iBAEW,CACL,oBADK,EAEL;AACE,wCAA8BM,QAAQ,CAACE,KADzC;AAEE,0CAAgChB,KAAK,CAACO,QAFxC;AAGE,sCAA4BM,IAAI,CAACO,MAAL,CAAYJ,KAH1C;AAIE,WAAE,GAAEhB,KAAK,CAACG,WAAY,EAAtB,GAA0BW,QAAQ,CAACE,KAAT,IAAkBhB,KAAK,CAACG;AAJpD,SAFK,EAQLc,gBAAgB,CAACD,KARZ,CAFX;AAAA,iBAYW,CACLE,eAAe,CAACF,KADX,CAZX;AAAA,gBAeWH,IAAI,CAACU,IAAL,CAAUP,KAfrB;AAAA,wBAgBmBF,QAAQ,CAACE,KAAT,GAAiB,MAAjB,GAA0BQ,SAhB7C;AAAA,mBAiBcX,IAAI,CAACY;AAjBnB,SAkBa;AACPH,QAAAA,OAAO,EAAED,OAAO,GAAG;AAAA;;AAAA,sDAAMV,KAAK,CAACW,OAAZ,qBAAM,qBAAAX,KAAK,CAAX,6BAA2BX,KAAK,CAACQ,IAAjC;AAAA,SAAH,GAA2CgB;AADpD,OAlBb;AAuBD,KA3BQ,CAAT;AA6BA,WAAO,EAAP;AACD;;AApD6C,CAAD,CAAxC","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    text: 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      const hasText = !!(slots.default || props.text)\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          v-slots={{\n            default: hasText ? () => slots.default?.() ?? props.text : undefined,\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"file":"VBreadcrumbsItem.mjs"}

package/lib/components/VBreadcrumbs/_variables.scss

@@ -1,8 +1,16 @@
-@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: 16px 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,"sources":["../../../src/components/VBreadcrumbs/index.ts"],"names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider"],"mappings":"SAASA,Y;SACAC,gB;SACAC,mB","sourcesContent":["export { VBreadcrumbs } from './VBreadcrumbs'\nexport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nexport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n"],"file":"index.mjs"}

package/lib/components/VBreadcrumbs/shared.mjs

@@ -0,0 +1,2 @@
+export const VBreadcrumbsSymbol = Symbol.for('vuetify:breadcrumbs');
+//# sourceMappingURL=shared.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VBreadcrumbs/shared.ts"],"names":["VBreadcrumbsSymbol","Symbol","for"],"mappings":"AAOA,OAAO,MAAMA,kBAAoD,GAAGC,MAAM,CAACC,GAAP,CAAW,qBAAX,CAA7D","sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\ninterface BreadcrumbsContext {\n  color: Ref<string | undefined>\n  disabled: Ref<boolean>\n}\n\nexport const VBreadcrumbsSymbol: InjectionKey<BreadcrumbsContext> = Symbol.for('vuetify:breadcrumbs')\n"],"file":"shared.mjs"}