@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VBadge/VBadge.mjs

@@ -1,26 +1,26 @@
 import { withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
 // Styles
-import "./VBadge.sass"; // Components
+import "./VBadge.css"; // Components
 
 import { VIcon } from "../VIcon/index.mjs"; // Composables
 
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
-import { useBackgroundColor, useTextColor } from "../../composables/color.mjs"; // Utilities
+import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useRtl } from "../../composables/rtl.mjs"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { convertToUnit, extract, makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent, pick } from "../../util/index.mjs";
+export const VBadge = defineComponent({
   name: 'VBadge',
   inheritAttrs: false,
-  props: makeProps({
+  props: {
     bordered: Boolean,
-    color: {
-      type: String,
-      default: 'primary'
-    },
-    content: String,
+    color: String,
+    content: [Number, String],
     dot: Boolean,
     floating: Boolean,
     icon: String,
@@ -31,10 +31,10 @@ export default defineComponent({
     },
     location: {
       type: String,
-      default: 'top-right',
+      default: 'top-end',
       validator: value => {
         const [vertical, horizontal] = (value != null ? value : '').split('-');
-        return ['top', 'bottom'].includes(vertical) && ['left', 'right'].includes(horizontal);
+        return ['top', 'bottom'].includes(vertical) && ['start', 'end'].includes(horizontal);
       }
     },
     max: [Number, String],
@@ -47,23 +47,33 @@ export default defineComponent({
     textColor: String,
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
     ...makeTransitionProps({
       transition: 'scale-rotate-transition'
     })
-  }),
+  },
 
   setup(props, ctx) {
     const {
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      isRtl
+    } = useRtl();
     const {
       roundedClasses
-    } = useRounded(props, 'v-badge');
+    } = useRounded(props);
+    const {
+      t
+    } = useLocale();
     const {
       textColorClasses,
       textColorStyles
     } = useTextColor(toRef(props, 'textColor'));
+    const {
+      themeClasses
+    } = useTheme();
     const position = computed(() => {
       return props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
     });
@@ -75,8 +85,7 @@ export default defineComponent({
     const locationStyles = computed(() => {
       var _props$location;
 
-      const [vertical, horizontal] = ((_props$location = props.location) != null ? _props$location : '').split('-'); // TODO: RTL support
-
+      const [vertical, horizontal] = ((_props$location = props.location) != null ? _props$location : '').split('-');
       const styles = {
         bottom: 'auto',
         left: 'auto',
@@ -85,7 +94,8 @@ export default defineComponent({
       };
 
       if (!props.inline) {
-        styles[horizontal === 'left' ? 'right' : 'left'] = calculatePosition(props.offsetX);
+        const isRight = isRtl.value && horizontal === 'end' || !isRtl.value && horizontal === 'start';
+        styles[isRight ? 'right' : 'left'] = calculatePosition(props.offsetX);
         styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY);
       }
 
@@ -96,7 +106,7 @@ export default defineComponent({
 
       const value = Number(props.content);
       const content = !props.max || isNaN(value) ? props.content : value <= props.max ? value : `${props.max}+`;
-      const [badgeAttrs, attrs] = extract(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
+      const [badgeAttrs, attrs] = pick(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
       return _createVNode(props.tag, _mergeProps({
         "class": ['v-badge', {
           'v-badge--bordered': props.bordered,
@@ -111,19 +121,19 @@ export default defineComponent({
           "transition": props.transition
         }, {
           default: () => [_withDirectives(_createVNode("span", _mergeProps({
-            "class": ['v-badge__badge', backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
+            "class": ['v-badge__badge', backgroundColorClasses.value, roundedClasses.value, textColorClasses.value, themeClasses.value],
             "style": [backgroundColorStyles.value, locationStyles.value, textColorStyles.value],
             "aria-atomic": "true",
-            "aria-label": "locale string here",
+            "aria-label": t(props.label, value),
             "aria-live": "polite",
             "role": "status"
           }, badgeAttrs), [props.dot ? undefined : ctx.slots.badge ? (_ctx$slots$badge = (_ctx$slots2 = ctx.slots).badge) == null ? void 0 : _ctx$slots$badge.call(_ctx$slots2) : props.icon ? _createVNode(VIcon, {
             "icon": props.icon
-          }, null, 8, ["icon"]) : _createVNode("span", {
+          }, null) : _createVNode("span", {
             "class": "v-badge__content"
-          }, [content])], 16), [[_vShow, props.modelValue]])]
-        }, 8, ["transition"])])]
-      }, 16, ["class"]);
+          }, [content])]), [[_vShow, props.modelValue]])]
+        })])]
+      });
     };
   }
 

package/lib/components/VBadge/VBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBadge/VBadge.tsx"],"names":["VIcon","makeRoundedProps","useRounded","makeTagProps","makeTransitionProps","MaybeTransition","useBackgroundColor","useTextColor","computed","defineComponent","toRef","convertToUnit","extract","makeProps","name","inheritAttrs","props","bordered","Boolean","color","type","String","default","content","dot","floating","icon","inline","label","location","validator","value","vertical","horizontal","split","includes","max","Number","modelValue","offsetX","offsetY","textColor","transition","setup","ctx","backgroundColorClasses","backgroundColorStyles","roundedClasses","textColorClasses","textColorStyles","position","calculatePosition","offset","parseInt","locationStyles","styles","bottom","left","right","top","isNaN","badgeAttrs","attrs","slots","undefined","badge"],"mappings":"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","sourcesContent":["// Styles\nimport './VBadge.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { convertToUnit, extract, makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VBadge',\n\n  inheritAttrs: false,\n\n  props: makeProps({\n    bordered: Boolean,\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    content: String,\n    dot: Boolean,\n    floating: Boolean,\n    icon: String,\n    inline: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    location: {\n      type: String,\n      default: 'top-right',\n      validator: (value: string) => {\n        const [vertical, horizontal] = (value ?? '').split('-')\n\n        return (\n          ['top', 'bottom'].includes(vertical) &&\n          ['left', 'right'].includes(horizontal)\n        )\n      },\n    },\n    max: [Number, String],\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    textColor: String,\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeTransitionProps({ transition: 'scale-rotate-transition' }),\n  }),\n\n  setup (props, ctx) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { roundedClasses } = useRounded(props, 'v-badge')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor'))\n\n    const position = computed(() => {\n      return props.floating\n        ? (props.dot ? 2 : 4)\n        : (props.dot ? 8 : 12)\n    })\n\n    function calculatePosition (offset?: number | string) {\n      return `calc(100% - ${convertToUnit(position.value + parseInt(offset ?? 0, 10))})`\n    }\n\n    const locationStyles = computed(() => {\n      const [vertical, horizontal] = (props.location ?? '').split('-')\n\n      // TODO: RTL support\n\n      const styles = {\n        bottom: 'auto',\n        left: 'auto',\n        right: 'auto',\n        top: 'auto',\n      }\n\n      if (!props.inline) {\n        styles[horizontal === 'left' ? 'right' : 'left'] = calculatePosition(props.offsetX)\n        styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY)\n      }\n\n      return styles\n    })\n\n    return () => {\n      const value = Number(props.content)\n      const content = (!props.max || isNaN(value)) ? props.content\n        : value <= props.max ? value\n        : `${props.max}+`\n\n      const [badgeAttrs, attrs] = extract(ctx.attrs, [\n        'aria-atomic',\n        'aria-label',\n        'aria-live',\n        'role',\n        'title',\n      ])\n\n      return (\n        <props.tag\n          class={[\n            'v-badge',\n            {\n              'v-badge--bordered': props.bordered,\n              'v-badge--dot': props.dot,\n              'v-badge--floating': props.floating,\n              'v-badge--inline': props.inline,\n            },\n          ]}\n          { ...attrs }\n        >\n          <div class=\"v-badge__wrapper\">\n            { ctx.slots.default?.() }\n\n            <MaybeTransition transition={ props.transition }>\n              <span\n                v-show={ props.modelValue }\n                class={[\n                  'v-badge__badge',\n                  backgroundColorClasses.value,\n                  roundedClasses.value,\n                  textColorClasses.value,\n                ]}\n                style={[\n                  backgroundColorStyles.value,\n                  locationStyles.value,\n                  textColorStyles.value,\n                ] as any} // TODO: Fix this :(\n                aria-atomic=\"true\"\n                aria-label=\"locale string here\" // TODO: locale string here\n                aria-live=\"polite\"\n                role=\"status\"\n                { ...badgeAttrs }\n              >\n                {\n                  props.dot ? undefined\n                  : ctx.slots.badge ? ctx.slots.badge?.()\n                  : props.icon ? <VIcon icon={props.icon} />\n                  : <span class=\"v-badge__content\">{content}</span>\n                }\n              </span>\n            </MaybeTransition>\n          </div>\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VBadge.mjs"}
+{"version":3,"sources":["../../../src/components/VBadge/VBadge.tsx"],"names":["VIcon","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","makeTransitionProps","MaybeTransition","useBackgroundColor","useTextColor","useLocale","useRtl","computed","toRef","convertToUnit","defineComponent","pick","VBadge","name","inheritAttrs","props","bordered","Boolean","color","String","content","Number","dot","floating","icon","inline","label","type","default","location","validator","value","vertical","horizontal","split","includes","max","modelValue","offsetX","offsetY","textColor","transition","setup","ctx","backgroundColorClasses","backgroundColorStyles","isRtl","roundedClasses","t","textColorClasses","textColorStyles","themeClasses","position","calculatePosition","offset","parseInt","locationStyles","styles","bottom","left","right","top","isRight","isNaN","badgeAttrs","attrs","slots","undefined","badge"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,K,8BAET;;SACSC,gB,EAAkBC,U;SAClBC,Y;SACAC,c,EAAgBC,Q;SAChBC,mB,EAAqBC,e;SACrBC,kB,EAAoBC,Y;SACpBC,S;SACAC,M,qCAET;;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,KAAhC;SACSC,a,EAAeC,e,EAAiBC,I;AAEzC,OAAO,MAAMC,MAAM,GAAGF,eAAe,CAAC;AACpCG,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,YAAY,EAAE,KAHsB;AAKpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,KAAK,EAAEC,MAFF;AAGLC,IAAAA,OAAO,EAAE,CAACC,MAAD,EAASF,MAAT,CAHJ;AAILG,IAAAA,GAAG,EAAEL,OAJA;AAKLM,IAAAA,QAAQ,EAAEN,OALL;AAMLO,IAAAA,IAAI,EAAEL,MAND;AAOLM,IAAAA,MAAM,EAAER,OAPH;AAQLS,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAER,MADD;AAELS,MAAAA,OAAO,EAAE;AAFJ,KARF;AAYLC,IAAAA,QAAQ,EAAE;AACRF,MAAAA,IAAI,EAAER,MADE;AAERS,MAAAA,OAAO,EAAE,SAFD;AAGRE,MAAAA,SAAS,EAAGC,KAAD,IAAmB;AAC5B,cAAM,CAACC,QAAD,EAAWC,UAAX,IAAyB,CAACF,KAAD,WAACA,KAAD,GAAU,EAAV,EAAcG,KAAd,CAAoB,GAApB,CAA/B;AAEA,eACE,CAAC,KAAD,EAAQ,QAAR,EAAkBC,QAAlB,CAA2BH,QAA3B,KACA,CAAC,OAAD,EAAU,KAAV,EAAiBG,QAAjB,CAA0BF,UAA1B,CAFF;AAID;AAVO,KAZL;AAwBLG,IAAAA,GAAG,EAAE,CAACf,MAAD,EAASF,MAAT,CAxBA;AAyBLkB,IAAAA,UAAU,EAAE;AACVV,MAAAA,IAAI,EAAEV,OADI;AAEVW,MAAAA,OAAO,EAAE;AAFC,KAzBP;AA6BLU,IAAAA,OAAO,EAAE,CAACjB,MAAD,EAASF,MAAT,CA7BJ;AA8BLoB,IAAAA,OAAO,EAAE,CAAClB,MAAD,EAASF,MAAT,CA9BJ;AA+BLqB,IAAAA,SAAS,EAAErB,MA/BN;AAgCL,OAAGvB,gBAAgB,EAhCd;AAiCL,OAAGE,YAAY,EAjCV;AAkCL,OAAGC,cAAc,EAlCZ;AAmCL,OAAGE,mBAAmB,CAAC;AAAEwC,MAAAA,UAAU,EAAE;AAAd,KAAD;AAnCjB,GAL6B;;AA2CpCC,EAAAA,KAAK,CAAE3B,KAAF,EAAS4B,GAAT,EAAc;AACjB,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoD1C,kBAAkB,CAACK,KAAK,CAACO,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAE+B,MAAAA;AAAF,QAAYxC,MAAM,EAAxB;AACA,UAAM;AAAEyC,MAAAA;AAAF,QAAqBlD,UAAU,CAACkB,KAAD,CAArC;AACA,UAAM;AAAEiC,MAAAA;AAAF,QAAQ3C,SAAS,EAAvB;AACA,UAAM;AAAE4C,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwC9C,YAAY,CAACI,KAAK,CAACO,KAAD,EAAQ,WAAR,CAAN,CAA1D;AACA,UAAM;AAAEoC,MAAAA;AAAF,QAAmBnD,QAAQ,EAAjC;AAEA,UAAMoD,QAAQ,GAAG7C,QAAQ,CAAC,MAAM;AAC9B,aAAOQ,KAAK,CAACQ,QAAN,GACFR,KAAK,CAACO,GAAN,GAAY,CAAZ,GAAgB,CADd,GAEFP,KAAK,CAACO,GAAN,GAAY,CAAZ,GAAgB,EAFrB;AAGD,KAJwB,CAAzB;;AAMA,aAAS+B,iBAAT,CAA4BC,MAA5B,EAAsD;AACpD,aAAQ,eAAc7C,aAAa,CAAC2C,QAAQ,CAACrB,KAAT,GAAiBwB,QAAQ,CAACD,MAAD,WAACA,MAAD,GAAW,CAAX,EAAc,EAAd,CAA1B,CAA6C,GAAhF;AACD;;AAED,UAAME,cAAc,GAAGjD,QAAQ,CAAC,MAAM;AAAA;;AACpC,YAAM,CAACyB,QAAD,EAAWC,UAAX,IAAyB,oBAAClB,KAAK,CAACc,QAAP,8BAAmB,EAAnB,EAAuBK,KAAvB,CAA6B,GAA7B,CAA/B;AAEA,YAAMuB,MAAM,GAAG;AACbC,QAAAA,MAAM,EAAE,MADK;AAEbC,QAAAA,IAAI,EAAE,MAFO;AAGbC,QAAAA,KAAK,EAAE,MAHM;AAIbC,QAAAA,GAAG,EAAE;AAJQ,OAAf;;AAOA,UAAI,CAAC9C,KAAK,CAACU,MAAX,EAAmB;AACjB,cAAMqC,OAAO,GAAIhB,KAAK,CAACf,KAAN,IAAeE,UAAU,KAAK,KAA/B,IAA0C,CAACa,KAAK,CAACf,KAAP,IAAgBE,UAAU,KAAK,OAAzF;AAEAwB,QAAAA,MAAM,CAACK,OAAO,GAAG,OAAH,GAAa,MAArB,CAAN,GAAqCT,iBAAiB,CAACtC,KAAK,CAACuB,OAAP,CAAtD;AACAmB,QAAAA,MAAM,CAACzB,QAAQ,KAAK,KAAb,GAAqB,QAArB,GAAgC,KAAjC,CAAN,GAAgDqB,iBAAiB,CAACtC,KAAK,CAACwB,OAAP,CAAjE;AACD;;AAED,aAAOkB,MAAP;AACD,KAlB8B,CAA/B;AAoBA,WAAO,MAAM;AAAA;;AACX,YAAM1B,KAAK,GAAGV,MAAM,CAACN,KAAK,CAACK,OAAP,CAApB;AACA,YAAMA,OAAO,GAAI,CAACL,KAAK,CAACqB,GAAP,IAAc2B,KAAK,CAAChC,KAAD,CAApB,GAA+BhB,KAAK,CAACK,OAArC,GACZW,KAAK,IAAIhB,KAAK,CAACqB,GAAf,GAAqBL,KAArB,GACC,GAAEhB,KAAK,CAACqB,GAAI,GAFjB;AAIA,YAAM,CAAC4B,UAAD,EAAaC,KAAb,IAAsBtD,IAAI,CAACgC,GAAG,CAACsB,KAAL,EAAmC,CACjE,aADiE,EAEjE,YAFiE,EAGjE,WAHiE,EAIjE,MAJiE,EAKjE,OALiE,CAAnC,CAAhC;AAQA;AAAA,iBAEW,CACL,SADK,EAEL;AACE,+BAAqBlD,KAAK,CAACC,QAD7B;AAEE,0BAAgBD,KAAK,CAACO,GAFxB;AAGE,+BAAqBP,KAAK,CAACQ,QAH7B;AAIE,6BAAmBR,KAAK,CAACU;AAJ3B,SAFK;AAFX,SAWSwC,KAXT;AAAA;AAAA,mBAae;AAbf,kCAcQ,cAAAtB,GAAG,CAACuB,KAAJ,EAAUtC,OAdlB,qBAcQ,mCAdR;AAAA,wBAgBoCb,KAAK,CAAC0B;AAhB1C;AAAA;AAAA,qBAmBiB,CACL,gBADK,EAELG,sBAAsB,CAACb,KAFlB,EAGLgB,cAAc,CAAChB,KAHV,EAILkB,gBAAgB,CAAClB,KAJZ,EAKLoB,YAAY,CAACpB,KALR,CAnBjB;AAAA,qBA0BiB,CACLc,qBAAqB,CAACd,KADjB,EAELyB,cAAc,CAACzB,KAFV,EAGLmB,eAAe,CAACnB,KAHX,CA1BjB;AAAA,2BA+BsB,MA/BtB;AAAA,0BAgCuBiB,CAAC,CAACjC,KAAK,CAACW,KAAP,EAAcK,KAAd,CAhCxB;AAAA,yBAiCoB,QAjCpB;AAAA,oBAkCe;AAlCf,aAmCeiC,UAnCf,IAsCYjD,KAAK,CAACO,GAAN,GAAY6C,SAAZ,GACExB,GAAG,CAACuB,KAAJ,CAAUE,KAAV,uBAAkB,eAAAzB,GAAG,CAACuB,KAAJ,EAAUE,KAA5B,qBAAkB,kCAAlB,GACArD,KAAK,CAACS,IAAN;AAAA,oBAA0BT,KAAK,CAACS;AAAhC;AAAA,qBACY;AADZ,cACgCJ,OADhC,EAxCd,cAkBmBL,KAAK,CAACsB,UAlBzB;AAAA;AAAA;AAgDD,KA9DD;AA+DD;;AAhJmC,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VBadge.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\nimport { useRtl } from '@/composables/rtl'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, pick } from '@/util'\n\nexport const VBadge = defineComponent({\n  name: 'VBadge',\n\n  inheritAttrs: false,\n\n  props: {\n    bordered: Boolean,\n    color: String,\n    content: [Number, String],\n    dot: Boolean,\n    floating: Boolean,\n    icon: String,\n    inline: Boolean,\n    label: {\n      type: String,\n      default: '$vuetify.badge',\n    },\n    location: {\n      type: String,\n      default: 'top-end',\n      validator: (value: string) => {\n        const [vertical, horizontal] = (value ?? '').split('-')\n\n        return (\n          ['top', 'bottom'].includes(vertical) &&\n          ['start', 'end'].includes(horizontal)\n        )\n      },\n    },\n    max: [Number, String],\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    offsetX: [Number, String],\n    offsetY: [Number, String],\n    textColor: String,\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeTransitionProps({ transition: 'scale-rotate-transition' }),\n  },\n\n  setup (props, ctx) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { isRtl } = useRtl()\n    const { roundedClasses } = useRounded(props)\n    const { t } = useLocale()\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor'))\n    const { themeClasses } = useTheme()\n\n    const position = computed(() => {\n      return props.floating\n        ? (props.dot ? 2 : 4)\n        : (props.dot ? 8 : 12)\n    })\n\n    function calculatePosition (offset?: number | string) {\n      return `calc(100% - ${convertToUnit(position.value + parseInt(offset ?? 0, 10))})`\n    }\n\n    const locationStyles = computed(() => {\n      const [vertical, horizontal] = (props.location ?? '').split('-')\n\n      const styles = {\n        bottom: 'auto',\n        left: 'auto',\n        right: 'auto',\n        top: 'auto',\n      }\n\n      if (!props.inline) {\n        const isRight = (isRtl.value && horizontal === 'end') || (!isRtl.value && horizontal === 'start')\n\n        styles[isRight ? 'right' : 'left'] = calculatePosition(props.offsetX)\n        styles[vertical === 'top' ? 'bottom' : 'top'] = calculatePosition(props.offsetY)\n      }\n\n      return styles\n    })\n\n    return () => {\n      const value = Number(props.content)\n      const content = (!props.max || isNaN(value)) ? props.content\n        : value <= props.max ? value\n        : `${props.max}+`\n\n      const [badgeAttrs, attrs] = pick(ctx.attrs as Record<string, any>, [\n        'aria-atomic',\n        'aria-label',\n        'aria-live',\n        'role',\n        'title',\n      ])\n\n      return (\n        <props.tag\n          class={[\n            'v-badge',\n            {\n              'v-badge--bordered': props.bordered,\n              'v-badge--dot': props.dot,\n              'v-badge--floating': props.floating,\n              'v-badge--inline': props.inline,\n            },\n          ]}\n          { ...attrs }\n        >\n          <div class=\"v-badge__wrapper\">\n            { ctx.slots.default?.() }\n\n            <MaybeTransition transition={ props.transition }>\n              <span\n                v-show={ props.modelValue }\n                class={[\n                  'v-badge__badge',\n                  backgroundColorClasses.value,\n                  roundedClasses.value,\n                  textColorClasses.value,\n                  themeClasses.value,\n                ]}\n                style={[\n                  backgroundColorStyles.value,\n                  locationStyles.value,\n                  textColorStyles.value,\n                ]}\n                aria-atomic=\"true\"\n                aria-label={ t(props.label, value) }\n                aria-live=\"polite\"\n                role=\"status\"\n                { ...badgeAttrs }\n              >\n                {\n                  props.dot ? undefined\n                  : ctx.slots.badge ? ctx.slots.badge?.()\n                  : props.icon ? <VIcon icon={props.icon} />\n                  : <span class=\"v-badge__content\">{content}</span>\n                }\n              </span>\n            </MaybeTransition>\n          </div>\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VBadge = InstanceType<typeof VBadge>\n"],"file":"VBadge.mjs"}

package/lib/components/VBadge/VBadge.sass

@@ -1,5 +1,6 @@
-// Imports
-@import ./index
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-badge
   display: inline-block
@@ -22,6 +23,8 @@
   transition: $badge-transition
   white-space: nowrap
 
+  @include tools.theme($badge-theme...)
+
   .v-badge--bordered &
     &::after
       border-radius: inherit
@@ -43,8 +46,6 @@
     padding: 0
     width: $badge-dot-width
 
-    @include theme($badge-theme...)
-
     &::after
       border-width: $badge-dot-border-width
 
@@ -54,9 +55,6 @@
 
   .v-icon
     color: inherit
-    font-size: $badge-font-size
-    height: $badge-font-size
-    width: $badge-font-size
 
   img,
   .v-img

package/lib/components/VBadge/_variables.scss

@@ -1,19 +1,20 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
 // Defaults
+
+$badge-background: rgb(var(--v-theme-surface-variant)) !default;
+$badge-color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity)) !default;
 $badge-border-color: rgb(var(--v-theme-background)) !default;
 $badge-border-radius: 10px !default;
 $badge-border-style: solid !default;
 $badge-border-transform: scale(1.20) !default;
 $badge-border-width: 2px !default;
-$badge-background: rgb(var(--v-theme-surface)) !default;
-$badge-color: rgb(var(--v-theme-on-surface)) !default;
 $badge-content-padding: 0 2px !default;
 $badge-dot-border-radius: 4.5px;
 $badge-dot-border-width: 1.5px !default;
 $badge-dot-height: 9px !default;
 $badge-dot-width: 9px !default;
-$badge-font-family: $body-font-family !default;
+$badge-font-family: settings.$body-font-family !default;
 $badge-font-size: .75rem !default;
 $badge-font-weight: 500 !default;
 $badge-height: 1.25rem !default;
@@ -23,7 +24,7 @@ $badge-inline-vertical-align: middle !default;
 $badge-line-height: 1 !default;
 $badge-min-width: 20px !default;
 $badge-padding: 4px !default;
-$badge-transition: .225s $standard-easing !default;
+$badge-transition: .225s settings.$standard-easing !default;
 $badge-wrapper-margin: 0 4px !default;
 
 $badge-theme: (

package/lib/components/VBadge/index.mjs

@@ -1,2 +1,2 @@
-export { default as VBadge } from "./VBadge.mjs";
+export { VBadge } from "./VBadge.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBadge/index.ts"],"names":["default","VBadge"],"mappings":"SAASA,OAAO,IAAIC,M","sourcesContent":["export { default as VBadge } from './VBadge'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VBadge/index.ts"],"names":["VBadge"],"mappings":"SAASA,M","sourcesContent":["export { VBadge } from './VBadge'\n"],"file":"index.mjs"}

package/lib/components/VBanner/VBanner.css

@@ -0,0 +1,133 @@
+.v-banner {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  padding-bottom: 8px;
+  padding-inline-end: 8px;
+  padding-inline-start: 24px;
+  position: relative;
+  width: 100%;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0 0 thin 0;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-banner--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-banner--absolute {
+  position: absolute;
+}
+.v-banner--fixed {
+  position: fixed;
+}
+.v-banner--sticky {
+  position: sticky;
+}
+.v-banner--border {
+  border-width: thin;
+}
+.v-banner--mobile {
+  align-items: center;
+  padding-inline-end: 8px;
+  padding-inline-start: 16px;
+}
+.v-banner--rounded {
+  border-radius: 4px;
+}
+.v-banner--density-default {
+  padding-top: 10px;
+}
+.v-banner--density-default.v-banner--two-line {
+  padding-top: 24px;
+}
+.v-banner--density-default.v-banner--three-line {
+  padding-top: 24px;
+}
+
+.v-banner--density-comfortable {
+  padding-top: 6px;
+}
+.v-banner--density-comfortable.v-banner--two-line {
+  padding-top: 20px;
+}
+.v-banner--density-comfortable.v-banner--three-line {
+  padding-top: 20px;
+}
+
+.v-banner--density-compact {
+  padding-top: 2px;
+}
+.v-banner--density-compact.v-banner--two-line {
+  padding-top: 16px;
+}
+.v-banner--density-compact.v-banner--three-line {
+  padding-top: 16px;
+}
+
+.v-banner--sticky {
+  top: 0;
+}
+
+.v-banner-actions {
+  align-items: flex-end;
+  display: flex;
+  flex: 0 1;
+  justify-content: flex-end;
+}
+.v-banner--mobile .v-banner-actions {
+  flex: 1 0;
+}
+
+.v-banner__content {
+  display: flex;
+  flex: 1 1;
+  min-width: 0;
+  padding-inline-end: 90px;
+}
+.v-banner--mobile .v-banner__content {
+  flex: 1 1 auto;
+  padding-inline-end: 8px;
+}
+.v-banner--two-line .v-banner__content {
+  margin-bottom: 4px;
+}
+.v-banner--three-line .v-banner__content {
+  margin-bottom: 8px;
+}
+
+.v-banner__avatar {
+  align-self: flex-start;
+  border-radius: 50%;
+  margin-inline-end: 24px;
+  margin-inline-start: 0;
+  position: relative;
+}
+.v-banner--mobile .v-banner__avatar {
+  margin-inline-end: 16px;
+}
+.v-banner--one-line .v-banner__avatar {
+  align-self: center;
+}
+
+.v-banner-text {
+  -webkit-box-orient: vertical;
+  align-self: center;
+  display: -webkit-box;
+  line-height: 1.375rem;
+  overflow: hidden;
+}
+.v-banner--one-line .v-banner-text {
+  -webkit-line-clamp: 1;
+}
+.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
+  align-self: flex-start;
+  -webkit-line-clamp: 2;
+}
+.v-banner--three-line .v-banner-text {
+  -webkit-line-clamp: 3;
+}

package/lib/components/VBanner/VBanner.mjs

@@ -1,12 +1,11 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
-import "./VBanner.sass"; // Components
+import "./VBanner.css"; // Components
 
 import { VAvatar } from "../VAvatar/index.mjs";
-import VBannerActions from "./VBannerActions.mjs";
-import VBannerAvatar from "./VBannerAvatar.mjs";
-import VBannerContent from "./VBannerContent.mjs";
-import VBannerText from "./VBannerText.mjs"; // Composables
+import { VBannerActions } from "./VBannerActions.mjs";
+import { VBannerText } from "./VBannerText.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
@@ -15,22 +14,18 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
-import { useDisplay } from "../../composables/display.mjs";
-import { useTextColor } from "../../composables/color.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useDisplay } from "../../composables/display.mjs"; // Utilities
 
-import { defineComponent, toRef } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { defineComponent, useRender } from "../../util/index.mjs"; // Types
+
+export const VBanner = defineComponent({
   name: 'VBanner',
-  props: makeProps({
+  props: {
     avatar: String,
     color: String,
     icon: String,
-    lines: {
-      type: String,
-      default: 'one'
-    },
+    lines: String,
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
@@ -41,20 +36,21 @@ export default defineComponent({
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       borderClasses
-    } = useBorder(props, 'v-banner');
+    } = useBorder(props);
     const {
       densityClasses
-    } = useDensity(props, 'v-banner');
+    } = useDensity(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -67,15 +63,11 @@ export default defineComponent({
     const {
       positionClasses,
       positionStyles
-    } = usePosition(props, 'v-banner');
+    } = usePosition(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-banner');
-    const {
-      textColorClasses,
-      textColorStyles
-    } = useTextColor(toRef(props, 'color'));
-    return () => {
+    } = useRounded(props);
+    useRender(() => {
       var _slots$default;
 
       const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon);
@@ -86,27 +78,42 @@ export default defineComponent({
           'v-banner--mobile': mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: true
-        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, textColorClasses.value, themeClasses.value],
-        "style": [dimensionStyles.value, positionStyles.value, textColorStyles.value],
+        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
+        "style": [dimensionStyles.value, positionStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasContent && _createVNode(VBannerContent, null, {
-          default: () => [hasAvatar && _createVNode(VBannerAvatar, null, {
-            default: () => [slots.avatar ? slots.avatar() : _createVNode(VAvatar, {
-              "density": props.density,
-              "icon": props.icon,
-              "image": props.avatar
-            }, null, 8, ["density", "icon", "image"])]
-          }), hasText && _createVNode(VBannerText, null, {
-            default: () => [slots.text ? slots.text() : props.text]
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)],
-          _: 1
-        }), slots.actions && _createVNode(VBannerActions, null, {
-          default: slots.actions
-        })],
-        _: 1
-      }, 8, ["class", "style"]);
-    };
+        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: () => [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
+          })]
+        })]
+      });
+    });
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBanner.tsx"],"names":["VAvatar","VBannerActions","VBannerAvatar","VBannerContent","VBannerText","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","useDisplay","useTextColor","defineComponent","toRef","makeProps","name","props","avatar","String","color","icon","lines","type","default","sticky","Boolean","text","setup","slots","themeClasses","borderClasses","densityClasses","dimensionStyles","mobile","elevationClasses","positionClasses","positionStyles","roundedClasses","textColorClasses","textColorStyles","hasAvatar","hasText","hasContent","value","density","actions"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,O;OACFC,c;OACAC,a;OACAC,c;OACAC,W,2BAEP;;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,Q;SAChBC,U;SACAC,Y,uCAET;;AACA,SAASC,eAAT,EAA0BC,KAA1B,QAAuC,KAAvC;SACSC,S;AAET,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,SADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,MAAM,EAAEC,MADO;AAEfC,IAAAA,KAAK,EAAED,MAFQ;AAGfE,IAAAA,IAAI,EAAEF,MAHS;AAIfG,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEJ,MADD;AAELK,MAAAA,OAAO,EAAE;AAFJ,KAJQ;AAQfC,IAAAA,MAAM,EAAEC,OARO;AASfC,IAAAA,IAAI,EAAER,MATS;AAWf,OAAGvB,eAAe,EAXH;AAYf,OAAGE,gBAAgB,EAZJ;AAaf,OAAGE,kBAAkB,EAbN;AAcf,OAAGE,kBAAkB,EAdN;AAef,OAAGE,iBAAiB,EAfL;AAgBf,OAAGE,gBAAgB,EAhBJ;AAiBf,OAAGE,YAAY,EAjBA;AAkBf,OAAGC,cAAc;AAlBF,GAAD,CAHa;;AAwB7BmB,EAAAA,KAAK,CAAEX,KAAF,EAAS;AAAEY,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBpB,QAAQ,CAACO,KAAD,CAAjC;AACA,UAAM;AAAEc,MAAAA;AAAF,QAAoBlC,SAAS,CAACoB,KAAD,EAAQ,UAAR,CAAnC;AACA,UAAM;AAAEe,MAAAA;AAAF,QAAqBjC,UAAU,CAACkB,KAAD,EAAQ,UAAR,CAArC;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAsBhC,YAAY,CAACgB,KAAD,CAAxC;AACA,UAAM;AAAEiB,MAAAA;AAAF,QAAavB,UAAU,EAA7B;AACA,UAAM;AAAEwB,MAAAA;AAAF,QAAuBhC,YAAY,CAACc,KAAD,CAAzC;AACA,UAAM;AAAEmB,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsChC,WAAW,CAACY,KAAD,EAAQ,UAAR,CAAvD;AACA,UAAM;AAAEqB,MAAAA;AAAF,QAAqB/B,UAAU,CAACU,KAAD,EAAQ,UAAR,CAArC;AACA,UAAM;AAAEsB,MAAAA,gBAAF;AAAoBC,MAAAA;AAApB,QAAwC5B,YAAY,CAACE,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA1D;AAEA,WAAO,MAAM;AAAA;;AACX,YAAMwB,SAAS,GAAG,CAAC,EAAExB,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACI,IAAtB,IAA8BQ,KAAK,CAACX,MAApC,IAA8CW,KAAK,CAACR,IAAtD,CAAnB;AACA,YAAMqB,OAAO,GAAG,CAAC,EAAEzB,KAAK,CAACU,IAAN,IAAcE,KAAK,CAACF,IAAtB,CAAjB;AACA,YAAMgB,UAAU,GAAGF,SAAS,IAAIC,OAAb,IAAwBb,KAAK,CAACL,OAAjD;AAEA;AAAA,iBAEW,CACL,UADK,EAEL;AACE,8BAAoBU,MAAM,CAACU,KAD7B;AAEE,8BAAoB3B,KAAK,CAACQ,MAF5B;AAGE,WAAE,aAAYR,KAAK,CAACK,KAAM,OAA1B,GAAmC;AAHrC,SAFK,EAOLS,aAAa,CAACa,KAPT,EAQLZ,cAAc,CAACY,KARV,EASLT,gBAAgB,CAACS,KATZ,EAULR,eAAe,CAACQ,KAVX,EAWLN,cAAc,CAACM,KAXV,EAYLL,gBAAgB,CAACK,KAZZ,EAaLd,YAAY,CAACc,KAbR,CAFX;AAAA,iBAiBW,CACLX,eAAe,CAACW,KADX,EAELP,cAAc,CAACO,KAFV,EAGLJ,eAAe,CAACI,KAHX,CAjBX;AAAA,gBAsBS;AAtBT;AAAA,wBAwBMD,UAAU;AAAA,0BAENF,SAAS;AAAA,4BAELZ,KAAK,CAACX,MAAN,GACEW,KAAK,CAACX,MAAN,EADF;AAAA,yBAIcD,KAAK,CAAC4B,OAJpB;AAAA,sBAKW5B,KAAK,CAACI,IALjB;AAAA,uBAMYJ,KAAK,CAACC;AANlB,qDAFK;AAAA,YAFH,EAiBNwB,OAAO;AAAA,4BAEHb,KAAK,CAACF,IAAN,GAAaE,KAAK,CAACF,IAAN,EAAb,GAA4BV,KAAK,CAACU,IAF/B;AAAA,YAjBD,oBAuBNE,KAAK,CAACL,OAvBA,qBAuBN,oBAAAK,KAAK,CAvBC;AAAA;AAAA,UAxBhB,EAmDMA,KAAK,CAACiB,OAAN,uCACyB;AAAEtB,UAAAA,OAAO,EAAEK,KAAK,CAACiB;AAAjB,SADzB,CAnDN;AAAA;AAAA;AAwDD,KA7DD;AA8DD;;AAjG4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport VBannerActions from './VBannerActions'\nimport VBannerAvatar from './VBannerAvatar'\nimport VBannerContent from './VBannerContent'\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, useTheme } from '@/composables/theme'\nimport { useDisplay } from '@/composables/display'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, toRef } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VBanner',\n\n  props: makeProps({\n    avatar: String,\n    color: String,\n    icon: String,\n    lines: {\n      type: String,\n      default: 'one',\n    },\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 } = useTheme(props)\n    const { borderClasses } = useBorder(props, 'v-banner')\n    const { densityClasses } = useDensity(props, 'v-banner')\n    const { dimensionStyles } = useDimension(props)\n    const { mobile } = useDisplay()\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-banner')\n    const { roundedClasses } = useRounded(props, 'v-banner')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n\n    return () => {\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            textColorClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            positionStyles.value,\n            textColorStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasContent && (\n            <VBannerContent>\n              { hasAvatar && (\n                <VBannerAvatar>\n                  { slots.avatar\n                    ? slots.avatar()\n                    : (\n                      <VAvatar\n                        density={ props.density }\n                        icon={ props.icon }\n                        image={ props.avatar }\n                      />\n                    )\n                  }\n                </VBannerAvatar>\n              ) }\n\n              { hasText && (\n                <VBannerText>\n                  { slots.text ? slots.text() : props.text }\n                </VBannerText>\n              ) }\n\n              { slots.default?.() }\n            </VBannerContent>\n          ) }\n\n          { slots.actions && (\n            <VBannerActions v-slots={{ default: slots.actions }} />\n          ) }\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VBanner.mjs"}
+{"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":"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","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"}