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

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 { makeTransitionProps } from "../../composables/transition.mjs";
-import { useBackgroundColor, useTextColor } from "../../composables/color.mjs"; // Utilities
+import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
+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, maybeTransition } 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,36 +47,45 @@ 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;
     });
 
     function calculatePosition(offset) {
-      return "calc(100% - ".concat(convertToUnit(position.value + parseInt(offset != null ? offset : 0, 10)), ")");
+      return `calc(100% - ${convertToUnit(position.value + parseInt(offset != null ? offset : 0, 10))})`;
     }
 
     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,16 +94,19 @@ 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);
       }
 
       return styles;
     });
     return () => {
+      var _ctx$slots$default, _ctx$slots, _ctx$slots$badge, _ctx$slots2;
+
       const value = Number(props.content);
-      const content = !props.max || isNaN(value) ? props.content : value <= props.max ? value : "".concat(props.max, "+");
-      const [badgeAttrs, attrs] = extract(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
+      const content = !props.max || isNaN(value) ? props.content : value <= props.max ? value : `${props.max}+`;
+      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,
@@ -105,19 +117,23 @@ export default defineComponent({
       }, attrs), {
         default: () => [_createVNode("div", {
           "class": "v-badge__wrapper"
-        }, [ctx.slots.default == null ? void 0 : ctx.slots.default(), maybeTransition(props, {}, _withDirectives(_createVNode("span", _mergeProps({
-          "class": ['v-badge__badge', backgroundColorClasses.value, roundedClasses.value, textColorClasses.value],
-          "style": [backgroundColorStyles.value, locationStyles.value, textColorStyles.value],
-          "aria-atomic": "true",
-          "aria-label": "locale string here",
-          "aria-live": "polite",
-          "role": "status"
-        }, badgeAttrs), [props.dot ? undefined : ctx.slots.badge ? ctx.slots.badge == null ? void 0 : ctx.slots.badge() : props.icon ? _createVNode(VIcon, {
-          "icon": props.icon
-        }, null, 8, ["icon"]) : _createVNode("span", {
-          "class": "v-badge__content"
-        }, [content])], 16), [[_vShow, props.modelValue]]))])]
-      }, 16, ["class"]);
+        }, [(_ctx$slots$default = (_ctx$slots = ctx.slots).default) == null ? void 0 : _ctx$slots$default.call(_ctx$slots), _createVNode(MaybeTransition, {
+          "transition": props.transition
+        }, {
+          default: () => [_withDirectives(_createVNode("span", _mergeProps({
+            "class": ['v-badge__badge', backgroundColorClasses.value, roundedClasses.value, textColorClasses.value, themeClasses.value],
+            "style": [backgroundColorStyles.value, locationStyles.value, textColorStyles.value],
+            "aria-atomic": "true",
+            "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) : _createVNode("span", {
+            "class": "v-badge__content"
+          }, [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","useBackgroundColor","useTextColor","computed","defineComponent","toRef","convertToUnit","extract","makeProps","maybeTransition","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 } from '@/composables/transition'\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { convertToUnit, extract, makeProps, maybeTransition } 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            {\n              maybeTransition(\n                props,\n                {},\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              )\n            }\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":"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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 { 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
@@ -52,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,6 +1,9 @@
-@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;
@@ -11,7 +14,7 @@ $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;
@@ -21,5 +24,10 @@ $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: (
+  $badge-background,
+  $badge-color
+) !default;

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,157 @@
+.v-banner {
+  align-items: center;
+  display: grid;
+  flex: 1 1;
+  font-size: 0.875rem;
+  grid-template-areas: "prepend text actions";
+  grid-template-columns: max-content auto max-content;
+  grid-template-rows: max-content max-content;
+  line-height: 1.375rem;
+  overflow: hidden;
+  padding-inline-start: 16px;
+  padding-inline-end: 8px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  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--rounded {
+  border-radius: 4px;
+}
+.v-banner--stacked:not(.v-banner--one-line) {
+  grid-template-areas: "prepend text" ". actions";
+}
+.v-banner--stacked .v-banner-text {
+  padding-inline-end: 36px;
+}
+.v-banner--density-default .v-banner-actions {
+  margin-bottom: -8px;
+}
+.v-banner--density-default.v-banner--one-line {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-banner--density-default.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
+}
+.v-banner--density-default.v-banner--one-line {
+  padding-top: 10px;
+}
+.v-banner--density-default.v-banner--two-line {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.v-banner--density-default.v-banner--three-line {
+  padding-top: 24px;
+  padding-bottom: 16px;
+}
+.v-banner--density-default:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-default.v-banner--two-line .v-banner-actions, .v-banner--density-default.v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
+}
+
+.v-banner--density-comfortable .v-banner-actions {
+  margin-bottom: -4px;
+}
+.v-banner--density-comfortable.v-banner--one-line {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.v-banner--density-comfortable.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
+}
+.v-banner--density-comfortable.v-banner--two-line {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.v-banner--density-comfortable.v-banner--three-line {
+  padding-top: 20px;
+  padding-bottom: 12px;
+}
+.v-banner--density-comfortable:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-comfortable.v-banner--two-line .v-banner-actions, .v-banner--density-comfortable.v-banner--three-line .v-banner-actions {
+  margin-top: 16px;
+}
+
+.v-banner--density-compact .v-banner-actions {
+  margin-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
+}
+.v-banner--density-compact.v-banner--two-line {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-banner--density-compact.v-banner--three-line {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+.v-banner--density-compact:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-compact.v-banner--two-line .v-banner-actions, .v-banner--density-compact.v-banner--three-line .v-banner-actions {
+  margin-top: 12px;
+}
+
+.v-banner--sticky {
+  top: 0;
+}
+
+.v-banner-avatar,
+.v-banner-icon,
+.v-banner__prepend {
+  align-self: flex-start;
+  grid-area: prepend;
+  margin-inline-end: 24px;
+}
+
+.v-banner-actions {
+  align-self: flex-end;
+  display: flex;
+  flex: 0 1;
+  grid-area: actions;
+  justify-content: flex-end;
+}
+.v-banner--two-line .v-banner-actions, .v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
+}
+
+.v-banner-text {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  grid-area: text;
+  overflow: hidden;
+  padding-inline-end: 90px;
+}
+.v-banner--one-line .v-banner-text {
+  -webkit-line-clamp: 1;
+}
+.v-banner--two-line .v-banner-text {
+  -webkit-line-clamp: 2;
+}
+.v-banner--three-line .v-banner-text {
+  -webkit-line-clamp: 3;
+}
+.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
+  align-self: flex-start;
+}

package/lib/components/VBanner/VBanner.mjs

@@ -1,42 +1,59 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VBanner.sass"; // Composables
+import "./VBanner.css"; // Components
+
+import { VBannerActions } from "./VBannerActions.mjs";
+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";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useTheme } from "../../composables/theme.mjs"; // Utilities
+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";
+import { toRef } from 'vue'; // Types
 
-import { defineComponent } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+export const VBanner = defineComponent({
   name: 'VBanner',
-  props: makeProps({
+  props: {
     avatar: String,
+    color: String,
     icon: String,
-    mobile: Boolean,
-    singleLine: Boolean,
+    lines: String,
+    stacked: Boolean,
     sticky: Boolean,
+    text: String,
     ...makeBorderProps(),
+    ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
-    ...makeTagProps()
-  }),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  },
 
-  setup(props, {
-    slots
-  }) {
-    const {
-      themeClasses
-    } = useTheme();
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       borderClasses
-    } = useBorder(props, 'v-banner');
+    } = useBorder(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      mobile
+    } = useDisplay();
     const {
       dimensionStyles
     } = useDimension(props);
@@ -46,41 +63,53 @@ export default defineComponent({
     const {
       positionClasses,
       positionStyles
-    } = usePosition(props, 'v-banner');
+    } = usePosition(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-banner');
-    return () => {
-      const hasThumbnail = !!props.avatar || !!props.icon || !!slots.thumbnail;
+    } = 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 hasText = !!(props.text || slots.text);
+      const hasPrepend = !!(slots.prepend || props.avatar || props.icon);
       return _createVNode(props.tag, {
         "class": ['v-banner', {
-          'v-banner--has-thumbnail': hasThumbnail,
-          'v-banner--is-mobile': props.mobile,
-          'v-banner--single-line': props.singleLine,
-          'v-banner--sticky': props.sticky
-        }, themeClasses.value, borderClasses.value, roundedClasses.value, elevationClasses.value, positionClasses.value],
+          'v-banner--stacked': props.stacked || mobile.value,
+          'v-banner--sticky': props.sticky,
+          [`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: () => [_createVNode("div", {
-          "class": "v-banner__sizer"
-        }, [_createVNode("div", {
-          "class": "v-banner__content"
-        }, [hasThumbnail && _createVNode("div", {
-          "class": "v-banner__thumbnail"
-        }, [slots.thumbnail == null ? void 0 : slots.thumbnail(), props.avatar && _createVNode("img", {
-          "class": "v-banner__avatar",
-          "src": props.avatar,
-          "alt": ""
-        }, null, 8, ["src"]), props.icon && _createVNode("i", {
-          "class": "v-banner__icon"
-        }, [props.icon])]), _createVNode("div", {
-          "class": "v-banner__text"
-        }, [slots.default == null ? void 0 : slots.default()])]), slots.actions && _createVNode("div", {
-          "class": "v-banner__actions"
-        }, [slots.actions == null ? void 0 : slots.actions()])])]
-      }, 8, ["class", "style"]);
-    };
+        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(VBannerActions, null, {
+          default: () => [slots.actions()]
+        })]
+      });
+    });
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBanner/VBanner.tsx"],"names":["makeBorderProps","useBorder","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","useTheme","defineComponent","makeProps","name","props","avatar","String","icon","mobile","Boolean","singleLine","sticky","setup","slots","themeClasses","borderClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","hasThumbnail","thumbnail","value","default","actions"],"mappings":";AAAA;AACA,wB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,Q,uCAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,eAAeD,eAAe,CAAC;AAC7BE,EAAAA,IAAI,EAAE,SADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,MAAM,EAAEC,MADO;AAEfC,IAAAA,IAAI,EAAED,MAFS;AAGfE,IAAAA,MAAM,EAAEC,OAHO;AAIfC,IAAAA,UAAU,EAAED,OAJG;AAKfE,IAAAA,MAAM,EAAEF,OALO;AAMf,OAAGpB,eAAe,EANH;AAOf,OAAGE,kBAAkB,EAPN;AAQf,OAAGE,kBAAkB,EARN;AASf,OAAGE,iBAAiB,EATL;AAUf,OAAGE,gBAAgB,EAVJ;AAWf,OAAGE,YAAY;AAXA,GAAD,CAHa;;AAiB7Ba,EAAAA,KAAK,CAAER,KAAF,EAAS;AAAES,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBd,QAAQ,EAAjC;AACA,UAAM;AAAEe,MAAAA;AAAF,QAAoBzB,SAAS,CAACc,KAAD,EAAQ,UAAR,CAAnC;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAsBxB,YAAY,CAACY,KAAD,CAAxC;AACA,UAAM;AAAEa,MAAAA;AAAF,QAAuBvB,YAAY,CAACU,KAAD,CAAzC;AACA,UAAM;AAAEc,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCvB,WAAW,CAACQ,KAAD,EAAQ,UAAR,CAAvD;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAqBtB,UAAU,CAACM,KAAD,EAAQ,UAAR,CAArC;AAEA,WAAO,MAAM;AACX,YAAMiB,YAAY,GAAI,CAAC,CAACjB,KAAK,CAACC,MAAR,IAAkB,CAAC,CAACD,KAAK,CAACG,IAA1B,IAAkC,CAAC,CAACM,KAAK,CAACS,SAAhE;AAEA;AAAA,iBAEW,CACL,UADK,EAEL;AACE,qCAA2BD,YAD7B;AAEE,iCAAuBjB,KAAK,CAACI,MAF/B;AAGE,mCAAyBJ,KAAK,CAACM,UAHjC;AAIE,8BAAoBN,KAAK,CAACO;AAJ5B,SAFK,EAQLG,YAAY,CAACS,KARR,EASLR,aAAa,CAACQ,KATT,EAULH,cAAc,CAACG,KAVV,EAWLN,gBAAgB,CAACM,KAXZ,EAYLL,eAAe,CAACK,KAZX,CAFX;AAAA,iBAgBW,CACLP,eAAe,CAACO,KADX,EAELJ,cAAc,CAACI,KAFV,CAhBX;AAAA,gBAoBS;AApBT;AAAA;AAAA,mBAsBe;AAtBf;AAAA,mBAuBiB;AAvBjB,YAwBUF,YAAY;AAAA,mBACD;AADC,YAERR,KAAK,CAACS,SAFE,oBAERT,KAAK,CAACS,SAAN,EAFQ,EAGRlB,KAAK,CAACC,MAAN;AAAA,mBACW,kBADX;AAAA,iBACoCD,KAAK,CAACC,MAD1C;AAAA,iBACuD;AADvD,4BAHQ,EAMRD,KAAK,CAACG,IAAN;AAAA,mBAAuB;AAAvB,YAA0CH,KAAK,CAACG,IAAhD,EANQ,EAxBtB;AAAA,mBAiCmB;AAjCnB,YAiCsCM,KAAK,CAACW,OAjC5C,oBAiCsCX,KAAK,CAACW,OAAN,EAjCtC,MAmCQX,KAAK,CAACY,OAAN;AAAA,mBACW;AADX,YACiCZ,KAAK,CAACY,OADvC,oBACiCZ,KAAK,CAACY,OAAN,EADjC,EAnCR;AAAA;AAyCD,KA5CD;AA6CD;;AAtE4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VBanner.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\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 { useTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VBanner',\n\n  props: makeProps({\n    avatar: String,\n    icon: String,\n    mobile: Boolean,\n    singleLine: Boolean,\n    sticky: Boolean,\n    ...makeBorderProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props, 'v-banner')\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-banner')\n    const { roundedClasses } = useRounded(props, 'v-banner')\n\n    return () => {\n      const hasThumbnail = (!!props.avatar || !!props.icon || !!slots.thumbnail)\n\n      return (\n        <props.tag\n          class={[\n            'v-banner',\n            {\n              'v-banner--has-thumbnail': hasThumbnail,\n              'v-banner--is-mobile': props.mobile,\n              'v-banner--single-line': props.singleLine,\n              'v-banner--sticky': props.sticky,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            roundedClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n          ]}\n          style={[\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          <div class=\"v-banner__sizer\">\n            <div class=\"v-banner__content\">\n              { hasThumbnail && (\n                <div class=\"v-banner__thumbnail\">\n                  { slots.thumbnail?.() }\n                  { props.avatar && (\n                    <img class=\"v-banner__avatar\" src={ props.avatar } alt=\"\"></img>\n                  )}\n                  { props.icon && <i class=\"v-banner__icon\">{ props.icon }</i> }\n                </div>\n              )}\n              <div class=\"v-banner__text\">{ slots.default?.() }</div>\n            </div>\n            { slots.actions && (\n              <div class=\"v-banner__actions\">{ slots.actions?.() }</div>\n            )}\n          </div>\n        </props.tag>\n      )\n    }\n  },\n})\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"}