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

package/lib/components/VBadge/index.d.ts

@@ -0,0 +1,123 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VBadge: vue.DefineComponent<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        });
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    location: {
+        type: vue.PropType<Anchor | (Anchor & {})>;
+        default: Anchor | (Anchor & {});
+    };
+    bordered: BooleanConstructor;
+    color: StringConstructor;
+    content: (StringConstructor | NumberConstructor)[];
+    dot: BooleanConstructor;
+    floating: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    inline: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    textColor: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        });
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    location: {
+        type: vue.PropType<Anchor | (Anchor & {})>;
+        default: Anchor | (Anchor & {});
+    };
+    bordered: BooleanConstructor;
+    color: StringConstructor;
+    content: (StringConstructor | NumberConstructor)[];
+    dot: BooleanConstructor;
+    floating: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    inline: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    textColor: StringConstructor;
+}>>, {
+    inline: boolean;
+    location: Anchor | (Anchor & {});
+    transition: string | boolean | (vue.TransitionProps & {
+        component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+    });
+    label: string;
+    tag: string;
+    dot: boolean;
+    rounded: string | number | boolean;
+    floating: boolean;
+    modelValue: boolean;
+    bordered: boolean;
+}>;
+declare type VBadge = InstanceType<typeof VBadge>;
+
+export { VBadge };

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

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

package/lib/components/VBanner/VBanner.css

@@ -1,16 +1,22 @@
 .v-banner {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  flex: 1 1;
   font-size: 0.875rem;
-  padding-bottom: 8px;
+  grid-template-areas: "prepend content 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-inline-start: 24px;
+  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);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, 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));
@@ -28,106 +34,124 @@
 .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 {
+.v-banner--stacked:not(.v-banner--one-line) {
+  grid-template-areas: "prepend content" ". 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: 24px;
+  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 {
-  padding-top: 6px;
+.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: 20px;
+  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 {
-  padding-top: 2px;
+.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: 16px;
+  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-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;
+  grid-area: content;
 }
 
-.v-banner__avatar {
+.v-banner__prepend {
   align-self: flex-start;
-  border-radius: 50%;
+  grid-area: prepend;
   margin-inline-end: 24px;
-  margin-inline-start: 0;
-  position: relative;
 }
-.v-banner--mobile .v-banner__avatar {
-  margin-inline-end: 16px;
+
+.v-banner-actions {
+  align-self: flex-end;
+  display: flex;
+  flex: 0 1;
+  grid-area: actions;
+  justify-content: flex-end;
 }
-.v-banner--one-line .v-banner__avatar {
-  align-self: center;
+.v-banner--two-line .v-banner-actions, .v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
 }
 
 .v-banner-text {
   -webkit-box-orient: vertical;
-  align-self: center;
   display: -webkit-box;
-  line-height: 1.375rem;
+  padding-inline-end: 90px;
   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;
+.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,4 +1,4 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VBanner.css"; // Components
 
@@ -11,27 +11,33 @@ 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 { makeLocationProps, useLocation } from "../../composables/location.mjs";
 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 { useDisplay } from "../../composables/display.mjs"; // Utilities
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useDisplay } from "../../composables/display.mjs";
+import { IconValue } from "../../composables/icons.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',
   props: {
     avatar: String,
     color: String,
-    icon: String,
+    icon: IconValue,
     lines: String,
+    stacked: Boolean,
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
@@ -42,75 +48,77 @@ 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);
     const {
-      positionClasses,
-      positionStyles
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
     } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const color = toRef(props, 'color');
+    const density = toRef(props, 'density');
+    provideDefaults({
+      VBannerActions: {
+        color,
+        density
+      }
+    });
     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],
+        "style": [dimensionStyles.value, locationStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasContent && _createVNode("div", {
-          "class": "v-banner__content"
-        }, [hasAvatar && _createVNode(VDefaultsProvider, {
+        default: () => [hasPrepend && _createVNode(VDefaultsProvider, {
+          "key": "prepend",
           "defaults": {
             VAvatar: {
-              color: props.color,
-              density: props.density,
+              color: color.value,
+              density: density.value,
               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'
-            }
-          }
+            "class": "v-banner__prepend"
+          }, [slots.prepend ? slots.prepend() : (props.avatar || props.icon) && _createVNode(VAvatar, null, null)])]
+        }), _createVNode("div", {
+          "class": "v-banner__content"
+        }, [hasText && _createVNode(VBannerText, {
+          "key": "text"
         }, {
-          default: () => [_createVNode(VBannerActions, null, {
-            default: slots.actions
-          })]
+          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":["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"}
+{"version":3,"file":"VBanner.mjs","names":["VAvatar","VBannerActions","VBannerText","VDefaultsProvider","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useDisplay","IconValue","defineComponent","useRender","toRef","VBanner","name","props","avatar","String","color","icon","lines","stacked","Boolean","sticky","text","setup","slots","borderClasses","densityClasses","mobile","dimensionStyles","elevationClasses","locationStyles","positionClasses","roundedClasses","themeClasses","density","hasText","hasPrepend","prepend","value","image","default","actions"],"sources":["../../../src/components/VBanner/VBanner.tsx"],"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 { makeLocationProps, useLocation } from '@/composables/location'\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'\nimport { IconValue } from '@/composables/icons'\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: IconValue,\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    ...makeLocationProps(),\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 { locationStyles } = useLocation(props)\n    const { positionClasses } = 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({ VBannerActions: { color, density } })\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            locationStyles.value,\n          ]}\n          role=\"banner\"\n        >\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VAvatar: {\n                  color: color.value,\n                  density: density.value,\n                  icon: props.icon,\n                  image: props.avatar,\n                },\n              }}\n            >\n              <div class=\"v-banner__prepend\">\n                { slots.prepend\n                  ? slots.prepend()\n                  : (props.avatar || props.icon) && (<VAvatar />)\n                }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <div class=\"v-banner__content\">\n            { hasText && (\n              <VBannerText key=\"text\">\n                { slots.text ? slots.text() : props.text }\n              </VBannerText>\n            ) }\n\n            { slots.default?.() }\n          </div>\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"],"mappings":"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"}