@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.2

package/lib/components/VBanner/VBanner.mjs

@@ -1,11 +1,11 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VBanner.css"; // Components
 
-import { VAvatar } from "../VAvatar/index.mjs";
 import { VBannerActions } from "./VBannerActions.mjs";
-import { VBannerText } from "./VBannerText.mjs";
-import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
+import { VBannerAvatar } from "./VBannerAvatar.mjs";
+import { VBannerIcon } from "./VBannerIcon.mjs";
+import { VBannerText } from "./VBannerText.mjs"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
@@ -15,9 +15,11 @@ import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
 import { useDisplay } from "../../composables/display.mjs"; // Utilities
 
-import { defineComponent, useRender } from "../../util/index.mjs"; // Types
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue'; // Types
 
 export const VBanner = defineComponent({
   name: 'VBanner',
@@ -26,6 +28,7 @@ export const VBanner = defineComponent({
     color: String,
     icon: String,
     lines: String,
+    stacked: Boolean,
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
@@ -42,21 +45,18 @@ export const VBanner = defineComponent({
     let {
       slots
     } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
     const {
       borderClasses
     } = useBorder(props);
     const {
       densityClasses
     } = useDensity(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       mobile
     } = useDisplay();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
@@ -67,50 +67,46 @@ export const VBanner = defineComponent({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const color = toRef(props, 'color');
+    const density = toRef(props, 'density');
+    provideDefaults({
+      VBannerActions: {
+        color,
+        density
+      },
+      VBannerAvatar: {
+        density,
+        image: toRef(props, 'avatar')
+      },
+      VBannerIcon: {
+        color,
+        density,
+        icon: toRef(props, 'icon')
+      }
+    });
     useRender(() => {
       var _slots$default;
 
-      const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon);
       const hasText = !!(props.text || slots.text);
-      const hasContent = hasAvatar || hasText || slots.default;
+      const hasPrepend = !!(slots.prepend || props.avatar || props.icon);
       return _createVNode(props.tag, {
         "class": ['v-banner', {
-          'v-banner--mobile': mobile.value,
+          'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
-          [`v-banner--${props.lines}-line`]: true
+          [`v-banner--${props.lines}-line`]: !!props.lines
         }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
         "style": [dimensionStyles.value, positionStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasContent && _createVNode("div", {
-          "class": "v-banner__content"
-        }, [hasAvatar && _createVNode(VDefaultsProvider, {
-          "defaults": {
-            VAvatar: {
-              color: props.color,
-              density: props.density,
-              icon: props.icon,
-              image: props.avatar
-            }
-          }
-        }, {
-          default: () => [_createVNode("div", {
-            "class": "v-banner__avatar"
-          }, [slots.avatar ? slots.avatar() : _createVNode(VAvatar, null, null)])]
-        }), hasText && _createVNode(VBannerText, null, {
+        default: () => [hasPrepend && _createVNode(_Fragment, null, [slots.prepend ? _createVNode("div", {
+          "class": "v-banner__prepend"
+        }, [slots.prepend()]) : props.avatar ? _createVNode(VBannerAvatar, null, null) : props.icon ? _createVNode(VBannerIcon, null, null) : undefined]), hasText && _createVNode(VBannerText, null, {
           default: () => [slots.text ? slots.text() : props.text]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && _createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              color: props.color,
-              density: props.density,
-              variant: 'text'
-            }
-          }
-        }, {
-          default: () => [_createVNode(VBannerActions, null, {
-            default: slots.actions
-          })]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && _createVNode(VBannerActions, null, {
+          default: () => [slots.actions()]
         })]
       });
     });

package/lib/components/VBanner/VBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBanner.tsx"],"names":["VAvatar","VBannerActions","VBannerText","VDefaultsProvider","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useDisplay","defineComponent","useRender","VBanner","name","props","avatar","String","color","icon","lines","sticky","Boolean","text","setup","slots","themeClasses","borderClasses","densityClasses","dimensionStyles","mobile","elevationClasses","positionClasses","positionStyles","roundedClasses","hasAvatar","hasText","hasContent","default","value","density","image","actions","VBtn","variant"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,O;SACAC,c;SACAC,W;SACAC,iB,0CAET;;SACSC,e,EAAiBC,S;SACjBC,gB,EAAkBC,U;SAClBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Y;SAChBC,U,yCAET;;SACSC,e,EAAiBC,S,gCAE1B;;AAGA,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;AACrCG,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC,MADH;AAELC,IAAAA,KAAK,EAAED,MAFF;AAGLE,IAAAA,IAAI,EAAEF,MAHD;AAILG,IAAAA,KAAK,EAAEH,MAJF;AAKLI,IAAAA,MAAM,EAAEC,OALH;AAMLC,IAAAA,IAAI,EAAEN,MAND;AAQL,OAAGtB,eAAe,EARb;AASL,OAAGE,gBAAgB,EATd;AAUL,OAAGE,kBAAkB,EAVhB;AAWL,OAAGE,kBAAkB,EAXhB;AAYL,OAAGE,iBAAiB,EAZf;AAaL,OAAGE,gBAAgB,EAbd;AAcL,OAAGE,YAAY,EAdV;AAeL,OAAGC,cAAc;AAfZ,GAH8B;;AAqBrCgB,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBjB,YAAY,CAACM,KAAD,CAArC;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAoB/B,SAAS,CAACmB,KAAD,CAAnC;AACA,UAAM;AAAEa,MAAAA;AAAF,QAAqB9B,UAAU,CAACiB,KAAD,CAArC;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAsB7B,YAAY,CAACe,KAAD,CAAxC;AACA,UAAM;AAAEe,MAAAA;AAAF,QAAapB,UAAU,EAA7B;AACA,UAAM;AAAEqB,MAAAA;AAAF,QAAuB7B,YAAY,CAACa,KAAD,CAAzC;AACA,UAAM;AAAEiB,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsC7B,WAAW,CAACW,KAAD,CAAvD;AACA,UAAM;AAAEmB,MAAAA;AAAF,QAAqB5B,UAAU,CAACS,KAAD,CAArC;AAEAH,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd,YAAMuB,SAAS,GAAG,CAAC,EAAEpB,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACI,IAAtB,IAA8BM,KAAK,CAACT,MAApC,IAA8CS,KAAK,CAACN,IAAtD,CAAnB;AACA,YAAMiB,OAAO,GAAG,CAAC,EAAErB,KAAK,CAACQ,IAAN,IAAcE,KAAK,CAACF,IAAtB,CAAjB;AACA,YAAMc,UAAU,GAAGF,SAAS,IAAIC,OAAb,IAAwBX,KAAK,CAACa,OAAjD;AAEA;AAAA,iBAEW,CACL,UADK,EAEL;AACE,8BAAoBR,MAAM,CAACS,KAD7B;AAEE,8BAAoBxB,KAAK,CAACM,MAF5B;AAGE,WAAE,aAAYN,KAAK,CAACK,KAAM,OAA1B,GAAmC;AAHrC,SAFK,EAOLO,aAAa,CAACY,KAPT,EAQLX,cAAc,CAACW,KARV,EASLR,gBAAgB,CAACQ,KATZ,EAULP,eAAe,CAACO,KAVX,EAWLL,cAAc,CAACK,KAXV,EAYLb,YAAY,CAACa,KAZR,CAFX;AAAA,iBAgBW,CACLV,eAAe,CAACU,KADX,EAELN,cAAc,CAACM,KAFV,CAhBX;AAAA,gBAoBS;AApBT;AAAA,wBAsBMF,UAAU;AAAA,mBACC;AADD,YAENF,SAAS;AAAA,sBAEG;AACR5C,YAAAA,OAAO,EAAE;AACP2B,cAAAA,KAAK,EAAEH,KAAK,CAACG,KADN;AAEPsB,cAAAA,OAAO,EAAEzB,KAAK,CAACyB,OAFR;AAGPrB,cAAAA,IAAI,EAAEJ,KAAK,CAACI,IAHL;AAIPsB,cAAAA,KAAK,EAAE1B,KAAK,CAACC;AAJN;AADD;AAFH;AAAA;AAAA,qBAWI;AAXJ,cAYHS,KAAK,CAACT,MAAN,GAAeS,KAAK,CAACT,MAAN,EAAf,oCAZG;AAAA,UAFH,EAmBNoB,OAAO;AAAA,0BAEHX,KAAK,CAACF,IAAN,GAAaE,KAAK,CAACF,IAAN,EAAb,GAA4BR,KAAK,CAACQ,IAF/B;AAAA,UAnBD,oBAyBNE,KAAK,CAACa,OAzBA,qBAyBN,oBAAAb,KAAK,CAzBC,EAtBhB,EAmDMA,KAAK,CAACiB,OAAN;AAAA,sBAEY;AACRC,YAAAA,IAAI,EAAE;AACJzB,cAAAA,KAAK,EAAEH,KAAK,CAACG,KADT;AAEJsB,cAAAA,OAAO,EAAEzB,KAAK,CAACyB,OAFX;AAGJI,cAAAA,OAAO,EAAE;AAHL;AADE;AAFZ;AAAA,6DAU2B;AAAEN,YAAAA,OAAO,EAAEb,KAAK,CAACiB;AAAjB,WAV3B;AAAA,UAnDN;AAAA;AAkED,KAvEQ,CAAT;AAwED;;AAvGoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VBannerActions } from './VBannerActions'\nimport { VBannerText } from './VBannerText'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useDisplay } from '@/composables/display'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VBanner = defineComponent({\n  name: 'VBanner',\n\n  props: {\n    avatar: String,\n    color: String,\n    icon: String,\n    lines: String as PropType<'one' | 'two' | 'three'>,\n    sticky: Boolean,\n    text: String,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { mobile } = useDisplay()\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    useRender(() => {\n      const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon)\n      const hasText = !!(props.text || slots.text)\n      const hasContent = hasAvatar || hasText || slots.default\n\n      return (\n        <props.tag\n          class={[\n            'v-banner',\n            {\n              'v-banner--mobile': mobile.value,\n              'v-banner--sticky': props.sticky,\n              [`v-banner--${props.lines}-line`]: true,\n            },\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasContent && (\n            <div class=\"v-banner__content\">\n              { hasAvatar && (\n                <VDefaultsProvider\n                  defaults={{\n                    VAvatar: {\n                      color: props.color,\n                      density: props.density,\n                      icon: props.icon,\n                      image: props.avatar,\n                    },\n                  }}\n                >\n                  <div class=\"v-banner__avatar\">\n                    { slots.avatar ? slots.avatar() : (<VAvatar />) }\n                  </div>\n                </VDefaultsProvider>\n              ) }\n\n              { hasText && (\n                <VBannerText>\n                  { slots.text ? slots.text() : props.text }\n                </VBannerText>\n              ) }\n\n              { slots.default?.() }\n            </div>\n          ) }\n\n          { slots.actions && (\n            <VDefaultsProvider\n              defaults={{\n                VBtn: {\n                  color: props.color,\n                  density: props.density,\n                  variant: 'text',\n                },\n              }}\n            >\n              <VBannerActions v-slots={{ default: slots.actions }} />\n            </VDefaultsProvider>\n          ) }\n        </props.tag>\n      )\n    })\n  },\n})\n\nexport type VBanner = InstanceType<typeof VBanner>\n"],"file":"VBanner.mjs"}
+{"version":3,"sources":["../../../src/components/VBanner/VBanner.tsx"],"names":["VBannerActions","VBannerAvatar","VBannerIcon","VBannerText","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useDisplay","defineComponent","useRender","toRef","VBanner","name","props","avatar","String","color","icon","lines","stacked","Boolean","sticky","text","setup","slots","borderClasses","densityClasses","mobile","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","themeClasses","density","image","hasText","hasPrepend","prepend","value","undefined","default","actions"],"mappings":"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","sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Components\nimport { VBannerActions } from './VBannerActions'\nimport { VBannerAvatar } from './VBannerAvatar'\nimport { VBannerIcon } from './VBannerIcon'\nimport { VBannerText } from './VBannerText'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useDisplay } from '@/composables/display'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VBanner = defineComponent({\n  name: 'VBanner',\n\n  props: {\n    avatar: String,\n    color: String,\n    icon: String,\n    lines: String as PropType<'one' | 'two' | 'three'>,\n    stacked: Boolean,\n    sticky: Boolean,\n    text: String,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { densityClasses } = useDensity(props)\n    const { mobile } = useDisplay()\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    const { themeClasses } = provideTheme(props)\n\n    const color = toRef(props, 'color')\n    const density = toRef(props, 'density')\n\n    provideDefaults({\n      VBannerActions: { color, density },\n      VBannerAvatar: { density, image: toRef(props, 'avatar') },\n      VBannerIcon: { color, density, icon: toRef(props, 'icon') },\n    })\n\n    useRender(() => {\n      const hasText = !!(props.text || slots.text)\n      const hasPrepend = !!(slots.prepend || props.avatar || props.icon)\n\n      return (\n        <props.tag\n          class={[\n            'v-banner',\n            {\n              'v-banner--stacked': props.stacked || mobile.value,\n              'v-banner--sticky': props.sticky,\n              [`v-banner--${props.lines}-line`]: !!props.lines,\n            },\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasPrepend && (\n            <>\n              { slots.prepend\n                ? (\n                  <div class=\"v-banner__prepend\">\n                    { slots.prepend() }\n                  </div>\n                )\n                : props.avatar ? (<VBannerAvatar />)\n                : props.icon ? (<VBannerIcon />)\n                : undefined\n              }\n            </>\n          ) }\n\n          { hasText && (\n            <VBannerText>\n              { slots.text ? slots.text() : props.text }\n            </VBannerText>\n          ) }\n\n          { slots.default?.() }\n\n          { slots.actions && (\n            <VBannerActions>\n              { slots.actions() }\n            </VBannerActions>\n          ) }\n        </props.tag>\n      )\n    })\n  },\n})\n\nexport type VBanner = InstanceType<typeof VBanner>\n"],"file":"VBanner.mjs"}

package/lib/components/VBanner/VBanner.sass

@@ -1,16 +1,22 @@
 @forward './variables'
+@use 'sass:math'
 @use '../../styles/tools'
 @use './variables' as *
 
 .v-banner
-  $root: &
-
-  display: flex
-  flex-wrap: wrap
+  align-items: center
+  display: grid
+  flex: 1 1
   font-size: $banner-font-size
-  padding-bottom: $banner-padding-bottom
-  padding-inline-end: $banner-padding-end
-  padding-inline-start: $banner-padding-start
+  grid-template-areas: "prepend text actions"
+  grid-template-columns: max-content auto max-content
+  grid-template-rows: max-content max-content
+  line-height: $banner-line-height
+  overflow: hidden
+  padding-inline-start: $banner-padding-inline-start
+  padding-inline-end: $banner-padding-inline-end
+  padding-top: $banner-padding * 2
+  padding-bottom: $banner-padding * 2
   position: relative
   width: $banner-width
 
@@ -20,82 +26,83 @@
   @include tools.rounded($banner-border-radius)
   @include tools.theme($banner-theme...)
 
-  &--border
-    border-width: $banner-border-thin-width
-
-  &--mobile
-    align-items: center
-    padding-inline-end: $banner-mobile-padding-end
-    padding-inline-start: $banner-mobile-padding-start
-
   &--rounded
     @include tools.rounded($banner-rounded-border-radius)
 
+  &--stacked
+    &:not(.v-banner--one-line)
+      grid-template-areas: "prepend text" ". actions"
+
+    .v-banner-text
+      padding-inline-end: $banner-stacked-padding-inline-end
+
   @at-root
     @include tools.density('v-banner', $banner-density) using ($modifier)
-      padding-top: $banner-padding-top + $modifier
+      .v-banner-actions
+        margin-bottom: -($banner-padding + $modifier)
+
+      &.v-banner--one-line
+        padding-top: $banner-padding + $modifier
+        padding-bottom: $banner-padding + $modifier
+
+        .v-banner-actions
+          margin-bottom: 0
+
+      @if ($modifier == 0px)
+        &.v-banner--one-line
+          padding-top: $banner-padding + $modifier + 2
 
       &.v-banner--two-line
-        padding-top: $banner-two-line-padding-top + $modifier
+        padding-top: $banner-padding * 2 + $modifier
+        padding-bottom: $banner-padding * 2 + $modifier
+
+      &.v-banner--three-line
+        padding-top: $banner-padding * 3 + $modifier
+        padding-bottom: $banner-padding * 2 + $modifier
 
+      &:not(.v-banner--one-line),
+      &.v-banner--two-line,
       &.v-banner--three-line
-        padding-top: $banner-three-line-padding-top + $modifier
+        .v-banner-actions
+          margin-top: $banner-action-margin + $modifier
 
   &--sticky
     top: $banner-sticky-top
 
+.v-banner-avatar,
+.v-banner-icon,
+.v-banner__prepend
+  align-self: flex-start
+  grid-area: prepend
+  margin-inline-end: $banner-prepend-margin-end
+
 .v-banner-actions
-  align-items: flex-end
+  align-self: flex-end
   display: flex
   flex: 0 1
+  grid-area: actions
   justify-content: flex-end
 
-  .v-banner--mobile &
-    flex: 1 0
-
-.v-banner__content
-  display: flex
-  flex: 1 1
-  min-width: 0
-  padding-inline-end: $banner-content-padding-end
-
-  .v-banner--mobile &
-    flex: 1 1 auto
-    padding-inline-end: $banner-mobile-content-padding-end
-
-  .v-banner--two-line &
-    margin-bottom: $banner-two-line-content-margin-bottom
-
+  .v-banner--two-line &,
   .v-banner--three-line &
-    margin-bottom: $banner-three-line-content-margin-bottom
-
-.v-banner__avatar
-  align-self: flex-start
-  border-radius: $banner-avatar-border-radius
-  margin-inline-end: $banner-avatar-margin-end
-  margin-inline-start: $banner-avatar-margin-start
-  position: relative
-
-  .v-banner--mobile &
-    margin-inline-end: $banner-mobile-avatar-margin-end
-
-  .v-banner--one-line &
-    align-self: center
+    margin-top: $banner-actions-line-margin-top
 
 .v-banner-text
   -webkit-box-orient: vertical
-  align-self: center
   display: -webkit-box
-  line-height: $banner-text-line-height
+  grid-area: text
   overflow: hidden
+  padding-inline-end: $banner-text-padding-end
 
   .v-banner--one-line &
     -webkit-line-clamp: 1
 
-  .v-banner--two-line &,
-  .v-banner--three-line &
-    align-self: flex-start
+  .v-banner--two-line &
     -webkit-line-clamp: 2
 
   .v-banner--three-line &
     -webkit-line-clamp: 3
+
+  .v-banner--two-line &,
+  .v-banner--three-line &
+    align-self: flex-start

package/lib/components/VBanner/VBannerActions.mjs

@@ -1,3 +1,35 @@
-import { createSimpleFunctional } from "../../util/index.mjs";
-export const VBannerActions = createSimpleFunctional('v-banner-actions');
+import { createVNode as _createVNode } from "vue";
+// Composables
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utility
+
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VBannerActions = defineComponent({
+  name: 'VBannerActions',
+  props: {
+    color: String,
+    density: String
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    provideDefaults({
+      VBtn: {
+        color: props.color,
+        density: props.density,
+        variant: 'text'
+      }
+    });
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "class": "v-banner-actions"
+      }, [slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
+    return {};
+  }
+
+});
 //# sourceMappingURL=VBannerActions.mjs.map

package/lib/components/VBanner/VBannerActions.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBannerActions.ts"],"names":["createSimpleFunctional","VBannerActions"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,cAAc,GAAGD,sBAAsB,CAAC,kBAAD,CAA7C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VBannerActions = createSimpleFunctional('v-banner-actions')\n"],"file":"VBannerActions.mjs"}
+{"version":3,"sources":["../../../src/components/VBanner/VBannerActions.tsx"],"names":["provideDefaults","defineComponent","useRender","VBannerActions","name","props","color","String","density","setup","slots","VBtn","variant","default"],"mappings":";AAAA;SACSA,e,0CAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;AAC5CG,EAAAA,IAAI,EAAE,gBADsC;AAG5CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,OAAO,EAAED;AAFJ,GAHqC;;AAQ5CE,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvBV,IAAAA,eAAe,CAAC;AACdW,MAAAA,IAAI,EAAE;AACJL,QAAAA,KAAK,EAAED,KAAK,CAACC,KADT;AAEJE,QAAAA,OAAO,EAAEH,KAAK,CAACG,OAFX;AAGJI,QAAAA,OAAO,EAAE;AAHL;AADQ,KAAD,CAAf;AAQAV,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBACG;AADH,UAEJQ,KAFI,sCAEJA,KAAK,CAAEG,OAFH,qBAEJ,oBAAAH,KAAK,CAFD;AAAA,KAAD,CAAT;AAMA,WAAO,EAAP;AACD;;AAxB2C,CAAD,CAAtC","sourcesContent":["// Composables\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent, useRender } from '@/util'\n\nexport const VBannerActions = defineComponent({\n  name: 'VBannerActions',\n\n  props: {\n    color: String,\n    density: String,\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: props.color,\n        density: props.density,\n        variant: 'text',\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-banner-actions\">\n        { slots?.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"file":"VBannerActions.mjs"}

package/lib/components/VBanner/VBannerAvatar.mjs

@@ -0,0 +1,20 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeVAvatarProps, VAvatar } from "../VAvatar/VAvatar.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+export const VBannerAvatar = defineComponent({
+  name: 'VBannerAvatar',
+  props: makeVAvatarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VAvatar, _mergeProps({
+      "class": "v-banner-avatar"
+    }, props), slots);
+  }
+
+});
+//# sourceMappingURL=VBannerAvatar.mjs.map

package/lib/components/VBanner/VBannerAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VBanner/VBannerAvatar.tsx"],"names":["makeVAvatarProps","VAvatar","defineComponent","VBannerAvatar","name","props","setup","slots"],"mappings":";AAAA;SACSA,gB,EAAkBC,O,kCAE3B;;SACSC,e;AAET,OAAO,MAAMC,aAAa,GAAGD,eAAe,CAAC;AAC3CE,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAEL,gBAAgB,EAHoB;;AAK3CM,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA,eAEG;AAFH,OAGEF,KAHF,GAIOE,KAJP,CAAP;AAOD;;AAb0C,CAAD,CAArC","sourcesContent":["// Components\nimport { makeVAvatarProps, VAvatar } from '@/components/VAvatar/VAvatar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VBannerAvatar = defineComponent({\n  name: 'VBannerAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    return () => (\n      <VAvatar\n        class=\"v-banner-avatar\"\n        { ...props }\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VBannerAvatar.mjs"}

package/lib/components/VBanner/VBannerIcon.mjs

@@ -0,0 +1,20 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeVAvatarProps, VAvatar } from "../VAvatar/VAvatar.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+export const VBannerIcon = defineComponent({
+  name: 'VBannerIcon',
+  props: makeVAvatarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VAvatar, _mergeProps({
+      "class": "v-banner-icon"
+    }, props), slots);
+  }
+
+});
+//# sourceMappingURL=VBannerIcon.mjs.map

package/lib/components/VBanner/VBannerIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VBanner/VBannerIcon.tsx"],"names":["makeVAvatarProps","VAvatar","defineComponent","VBannerIcon","name","props","setup","slots"],"mappings":";AAAA;SACSA,gB,EAAkBC,O,kCAE3B;;SACSC,e;AAET,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAAC;AACzCE,EAAAA,IAAI,EAAE,aADmC;AAGzCC,EAAAA,KAAK,EAAEL,gBAAgB,EAHkB;;AAKzCM,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA,eAEG;AAFH,OAGEF,KAHF,GAIOE,KAJP,CAAP;AAOD;;AAbwC,CAAD,CAAnC","sourcesContent":["// Components\nimport { makeVAvatarProps, VAvatar } from '@/components/VAvatar/VAvatar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VBannerIcon = defineComponent({\n  name: 'VBannerIcon',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    return () => (\n      <VAvatar\n        class=\"v-banner-icon\"\n        { ...props }\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VBannerIcon.mjs"}

package/lib/components/VBanner/_variables.scss

@@ -3,32 +3,28 @@
 @use '../../styles/tools';
 
 // Defaults
-$banner-avatar-border-radius: map.get(settings.$rounded, 'circle') !default;
-$banner-avatar-margin-end: 24px !default;
-$banner-avatar-margin-start: 0 !default;
+$banner-action-margin: 20px !default;
+$banner-actions-line-margin-top: 20px !default;
 $banner-background: rgb(var(--v-theme-surface)) !default;
-$banner-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $banner-border-color: settings.$border-color-root !default;
 $banner-border-radius: map.get(settings.$rounded, 0) !default;
 $banner-border-style: settings.$border-style-root !default;
 $banner-border-thin-width: thin !default;
 $banner-border-width: 0 0 thin 0 !default;
-$banner-content-padding-end: 90px !default;
+$banner-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $banner-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $banner-elevation: 0 !default;
 $banner-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
-$banner-padding-bottom: 8px !default;
-$banner-padding-end: 8px !default;
-$banner-padding-start: 24px !default;
-$banner-padding-top: 10px !default;
+$banner-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
+$banner-padding-inline-start: 16px !default;
+$banner-padding-inline-end: 8px !default;
+$banner-padding: 8px !default;
 $banner-positions: absolute fixed sticky !default;
+$banner-prepend-margin-end: 24px !default;
 $banner-rounded-border-radius: settings.$border-radius-root !default;
+$banner-stacked-padding-inline-end: 36px !default;
 $banner-sticky-top: 0 !default;
-$banner-text-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
-$banner-two-line-content-margin-bottom: 4px !default;
-$banner-two-line-padding-top: 24px !default;
-$banner-three-line-content-margin-bottom: 8px !default;
-$banner-three-line-padding-top: 24px !default;
+$banner-text-padding-end: 90px !default;
 $banner-width: 100% !default;
 
 // Mobile

package/lib/components/VBanner/index.mjs

@@ -1,4 +1,6 @@
 export { VBanner } from "./VBanner.mjs";
 export { VBannerActions } from "./VBannerActions.mjs";
+export { VBannerAvatar } from "./VBannerAvatar.mjs";
+export { VBannerIcon } from "./VBannerIcon.mjs";
 export { VBannerText } from "./VBannerText.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/index.ts"],"names":["VBanner","VBannerActions","VBannerText"],"mappings":"SAASA,O;SACAC,c;SACAC,W","sourcesContent":["export { VBanner } from './VBanner'\nexport { VBannerActions } from './VBannerActions'\nexport { VBannerText } from './VBannerText'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VBanner/index.ts"],"names":["VBanner","VBannerActions","VBannerAvatar","VBannerIcon","VBannerText"],"mappings":"SAASA,O;SACAC,c;SACAC,a;SACAC,W;SACAC,W","sourcesContent":["export { VBanner } from './VBanner'\nexport { VBannerActions } from './VBannerActions'\nexport { VBannerAvatar } from './VBannerAvatar'\nexport { VBannerIcon } from './VBannerIcon'\nexport { VBannerText } from './VBannerText'\n"],"file":"index.mjs"}

package/lib/components/VBreadcrumbs/VBreadcrumbs.mjs

@@ -19,6 +19,7 @@ export const VBreadcrumbs = defineComponent({
   name: 'VBreadcrumbs',
   props: {
     activeClass: String,
+    activeColor: String,
     bgColor: String,
     color: String,
     disabled: Boolean,
@@ -55,6 +56,7 @@ export const VBreadcrumbs = defineComponent({
     provideDefaults({
       VBreadcrumbsItem: {
         activeClass: toRef(props, 'activeClass'),
+        activeColor: toRef(props, 'activeColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled')
       }

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

@@ -1 +1 @@
-{"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","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})\n\nexport const VBreadcrumbs = defineComponent({\n  name: 'VBreadcrumbs',\n\n  props: {\n    activeClass: 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        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"}
+{"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/VBreadcrumbsItem.mjs

@@ -26,30 +26,31 @@ export const VBreadcrumbsItem = defineComponent({
       slots,
       attrs
     } = _ref;
-    const {
-      isExactActive,
-      isLink,
-      navigate
-    } = useLink(props, attrs);
-    const isActive = computed(() => props.active || (isExactActive == null ? void 0 : isExactActive.value));
+    const link = useLink(props, attrs);
+    const isActive = computed(() => {
+      var _link$isExactActive;
+
+      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+    });
     const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
     useRender(() => {
-      const Tag = isLink.value ? 'a' : props.tag;
+      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': isLink.value,
+          '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": isActive.value && navigate
+        "onClick": link.navigate
       }, {
         default: hasText ? () => {
           var _slots$default, _slots$default2;

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

@@ -1 +1 @@
-{"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","isExactActive","isLink","navigate","isActive","value","textColorClasses","textColorStyles","Tag","hasText","default","undefined"],"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,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA,MAAjB;AAAyBC,MAAAA;AAAzB,QAAsCvB,OAAO,CAACQ,KAAD,EAAQY,KAAR,CAAnD;AACA,UAAMI,QAAQ,GAAGrB,QAAQ,CAAC,MAAMK,KAAK,CAACC,MAAN,KAAgBY,aAAhB,oBAAgBA,aAAa,CAAEI,KAA/B,CAAP,CAAzB;AACA,UAAMX,KAAK,GAAGX,QAAQ,CAAC,MAAMqB,QAAQ,CAACC,KAAT,GAAiBjB,KAAK,CAACK,WAAvB,GAAqCL,KAAK,CAACM,KAAlD,CAAtB;AAEA,UAAM;AAAEY,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwCzB,YAAY,CAACY,KAAD,CAA1D;AAEAT,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMuB,GAAG,GAAIN,MAAM,CAACG,KAAR,GAAiB,GAAjB,GAAuBjB,KAAK,CAACS,GAAzC;AACA,YAAMY,OAAO,GAAG,CAAC,EAAEV,KAAK,CAACW,OAAN,IAAiBtB,KAAK,CAACQ,IAAzB,CAAjB;AAEA;AAAA,iBAEW,CACL,oBADK,EAEL;AACE,wCAA8BQ,QAAQ,CAACC,KADzC;AAEE,0CAAgCjB,KAAK,CAACO,QAFxC;AAGE,sCAA4BO,MAAM,CAACG,KAHrC;AAIE,WAAE,GAAEjB,KAAK,CAACG,WAAY,EAAtB,GAA0Ba,QAAQ,CAACC,KAAT,IAAkBjB,KAAK,CAACG;AAJpD,SAFK,EAQLe,gBAAgB,CAACD,KARZ,CAFX;AAAA,iBAYW,CACLE,eAAe,CAACF,KADX,CAZX;AAAA,wBAemBD,QAAQ,CAACC,KAAT,GAAiB,MAAjB,GAA0BM,SAf7C;AAAA,mBAgBcP,QAAQ,CAACC,KAAT,IAAkBF;AAhBhC,SAiBa;AACPO,QAAAA,OAAO,EAAED,OAAO,GAAG;AAAA;;AAAA,sDAAMV,KAAK,CAACW,OAAZ,qBAAM,qBAAAX,KAAK,CAAX,6BAA2BX,KAAK,CAACQ,IAAjC;AAAA,SAAH,GAA2Ce;AADpD,OAjBb;AAsBD,KA1BQ,CAAT;AA4BA,WAAO,EAAP;AACD;;AAnD6C,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 { isExactActive, isLink, navigate } = useLink(props, attrs)\n    const isActive = computed(() => props.active || 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 = (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': isLink.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n          ]}\n          style={[\n            textColorStyles.value,\n          ]}\n          aria-current={ isActive.value ? 'page' : undefined }\n          onClick={ isActive.value && 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"}
+{"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"}