routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+238
@@ -0,0 +1,238 @@
|
||||
@layer vuetify-components {
|
||||
.v-alert {
|
||||
display: grid;
|
||||
flex: 1 1;
|
||||
grid-template-areas: "prepend content append close" ". content . .";
|
||||
grid-template-columns: max-content auto max-content max-content;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
--v-border-color: currentColor;
|
||||
}
|
||||
.v-alert--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.v-alert--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
.v-alert {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-alert--variant-plain, .v-alert--variant-outlined, .v-alert--variant-text, .v-alert--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-alert--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-alert--variant-plain:focus, .v-alert--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-alert--variant-plain .v-alert__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface-light)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-alert--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-alert--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-alert--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-alert--variant-text .v-alert__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-alert--variant-tonal .v-alert__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-alert .v-alert__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--prominent {
|
||||
grid-template-areas: "prepend content append close" "prepend content . .";
|
||||
}
|
||||
.v-alert.v-alert--border {
|
||||
--v-border-opacity: 0.38;
|
||||
}
|
||||
.v-alert.v-alert--border.v-alert--border-start {
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.v-alert.v-alert--border.v-alert--border-end {
|
||||
padding-inline-end: 24px;
|
||||
}
|
||||
.v-alert--variant-plain {
|
||||
transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-alert--density-default {
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.v-alert--density-default.v-alert--border-top {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.v-alert--density-default.v-alert--border-bottom {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.v-alert--density-comfortable {
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.v-alert--density-comfortable.v-alert--border-top {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.v-alert--density-comfortable.v-alert--border-bottom {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.v-alert--density-compact {
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.v-alert--density-compact.v-alert--border-top {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.v-alert--density-compact.v-alert--border-bottom {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.v-alert:not(:has(.v-alert-title)) .v-alert__content {
|
||||
padding-block: calc((1.75rem - 1.5 * 1rem) / 2);
|
||||
}
|
||||
.v-alert__border {
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: var(--v-border-opacity);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.v-alert__border {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-alert__border--border {
|
||||
border-width: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-alert--border-start .v-alert__border {
|
||||
border-inline-start-width: 8px;
|
||||
}
|
||||
.v-alert--border-end .v-alert__border {
|
||||
border-inline-end-width: 8px;
|
||||
}
|
||||
.v-alert--border-top .v-alert__border {
|
||||
border-top-width: 8px;
|
||||
}
|
||||
.v-alert--border-bottom .v-alert__border {
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
.v-alert__close {
|
||||
flex: 0 1 auto;
|
||||
grid-area: close;
|
||||
}
|
||||
.v-alert__close > .v-btn {
|
||||
margin-block: calc(-1 * (var(--v-btn-height) + 12px - 1.75rem) / 2);
|
||||
}
|
||||
.v-alert__content {
|
||||
align-self: center;
|
||||
grid-area: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-alert__content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.v-alert__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.v-alert__append,
|
||||
.v-alert__close {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-alert__append {
|
||||
align-self: flex-start;
|
||||
grid-area: append;
|
||||
}
|
||||
.v-alert__append + .v-alert__close {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-alert__prepend {
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: prepend;
|
||||
margin-inline-end: 16px;
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
.v-alert__prepend > .v-icon {
|
||||
font-size: 1.75rem;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
.v-alert--prominent .v-alert__prepend {
|
||||
align-self: center;
|
||||
}
|
||||
.v-alert__underlay {
|
||||
grid-area: none;
|
||||
position: absolute;
|
||||
}
|
||||
.v-alert--border-start .v-alert__underlay {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.v-alert--border-end .v-alert__underlay {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-alert--border-top .v-alert__underlay {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.v-alert--border-bottom .v-alert__underlay {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-alert-title {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
hyphens: auto;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.75rem;
|
||||
overflow-wrap: normal;
|
||||
text-transform: none;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-alert:not(.v-alert--variant-text, .v-alert--variant-plain) {
|
||||
border-style: solid;
|
||||
}
|
||||
.v-alert--variant-outlined, .v-alert--variant-tonal {
|
||||
border-width: medium;
|
||||
}
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
border-width: thick;
|
||||
}
|
||||
}
|
||||
}
|
||||
+734
@@ -0,0 +1,734 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
declare const allowedTypes: readonly ['success', 'info', 'warning', 'error'];
|
||||
type ContextualType = (typeof allowedTypes)[number];
|
||||
export declare const makeVAlertProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
location?: unknown;
|
||||
position?: unknown;
|
||||
iconSize?: unknown;
|
||||
iconSizes?: unknown;
|
||||
border?: unknown;
|
||||
borderColor?: unknown;
|
||||
closable?: unknown;
|
||||
closeIcon?: unknown;
|
||||
closeLabel?: unknown;
|
||||
icon?: unknown;
|
||||
modelValue?: unknown;
|
||||
prominent?: unknown;
|
||||
title?: unknown;
|
||||
text?: unknown;
|
||||
type?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : "absolute" | "fixed" | "relative" | "static" | "sticky" | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? "absolute" | "fixed" | "relative" | "static" | "sticky" : Defaults["position"] | NonNullable<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
};
|
||||
iconSize: unknown extends Defaults["iconSize"] ? PropType<string | number> : {
|
||||
type: PropType<unknown extends Defaults["iconSize"] ? string | number : string | number | Defaults["iconSize"]>;
|
||||
default: unknown extends Defaults["iconSize"] ? string | number : Defaults["iconSize"] | NonNullable<string | number>;
|
||||
};
|
||||
iconSizes: unknown extends Defaults["iconSizes"] ? {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
} : Omit<{
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["iconSizes"] ? [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] : [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] | Defaults["iconSizes"]>;
|
||||
default: unknown extends Defaults["iconSizes"] ? [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] : [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][] | Defaults["iconSizes"];
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["border"] ? "bottom" | "end" | "start" | "top" | boolean : "bottom" | "end" | "start" | "top" | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? "bottom" | "end" | "start" | "top" | boolean : Defaults["border"] | NonNullable<"bottom" | "end" | "start" | "top" | boolean>;
|
||||
};
|
||||
borderColor: unknown extends Defaults["borderColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["borderColor"] ? string : string | Defaults["borderColor"]>;
|
||||
default: unknown extends Defaults["borderColor"] ? string : string | Defaults["borderColor"];
|
||||
};
|
||||
closable: unknown extends Defaults["closable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"]>;
|
||||
default: unknown extends Defaults["closable"] ? boolean : boolean | Defaults["closable"];
|
||||
};
|
||||
closeIcon: unknown extends Defaults["closeIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["closeIcon"] ? IconValue : Defaults["closeIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
closeLabel: unknown extends Defaults["closeLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"]>;
|
||||
default: unknown extends Defaults["closeLabel"] ? string : string | Defaults["closeLabel"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["icon"] ? false | IconValue : false | Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? false | IconValue : Defaults["icon"] | NonNullable<false | IconValue>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
|
||||
};
|
||||
prominent: unknown extends Defaults["prominent"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["prominent"] ? boolean : boolean | Defaults["prominent"]>;
|
||||
default: unknown extends Defaults["prominent"] ? boolean : boolean | Defaults["prominent"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["type"] ? "error" | "info" | "success" | "warning" : "error" | "info" | "success" | "warning" | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? "error" | "info" | "success" | "warning" : Defaults["type"] | NonNullable<"error" | "info" | "success" | "warning">;
|
||||
};
|
||||
};
|
||||
export type VAlertSlots = {
|
||||
default: never;
|
||||
prepend: never;
|
||||
title: never;
|
||||
text: never;
|
||||
append: never;
|
||||
close: {
|
||||
props: Record<string, any>;
|
||||
};
|
||||
};
|
||||
export declare const VAlert: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: (arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
iconSize?: string | number | undefined;
|
||||
border?: "bottom" | "end" | "start" | "top" | boolean | undefined;
|
||||
borderColor?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
type?: "error" | "info" | "success" | "warning" | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
close?: ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
close?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:close"?: false | ((arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'click:close': (e: MouseEvent) => true;
|
||||
'update:modelValue': (value: boolean) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
iconSizes: [import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][];
|
||||
closable: boolean;
|
||||
closeIcon: IconValue;
|
||||
closeLabel: string;
|
||||
icon: false | IconValue;
|
||||
modelValue: boolean;
|
||||
prominent: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
close: (arg: {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
iconSize: PropType<import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
border: {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
};
|
||||
borderColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
prominent: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
type: {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
iconSize: PropType<import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes | number | string>;
|
||||
iconSizes: {
|
||||
type: PropType<[import("../../labs/VIconBtn/VIconBtn.js").VIconBtnSizes, number][]>;
|
||||
default: () => (string | number)[][];
|
||||
};
|
||||
border: {
|
||||
type: PropType<boolean | 'top' | 'end' | 'bottom' | 'start'>;
|
||||
validator: (val: boolean | string) => boolean;
|
||||
};
|
||||
borderColor: StringConstructor;
|
||||
closable: BooleanConstructor;
|
||||
closeIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
closeLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: {
|
||||
type: PropType<false | IconValue>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
prominent: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
type: {
|
||||
type: PropType<ContextualType>;
|
||||
validator: (val: ContextualType) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VAlert = InstanceType<typeof VAlert>;
|
||||
|
||||
+208
@@ -0,0 +1,208 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VAlert.css";
|
||||
|
||||
// Components
|
||||
import { VAlertTitle } from "./VAlertTitle.js";
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeIconSizeProps, useIconSizes } from "../../composables/iconSizes.js";
|
||||
import { useLocale } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makePositionProps, usePosition } from "../../composables/position.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
const allowedTypes = ['success', 'info', 'warning', 'error'];
|
||||
export const makeVAlertProps = propsFactory({
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
validator: val => {
|
||||
return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val);
|
||||
}
|
||||
},
|
||||
borderColor: String,
|
||||
closable: Boolean,
|
||||
closeIcon: {
|
||||
type: IconValue,
|
||||
default: '$close'
|
||||
},
|
||||
closeLabel: {
|
||||
type: String,
|
||||
default: '$vuetify.close'
|
||||
},
|
||||
icon: {
|
||||
type: [Boolean, String, Function, Object],
|
||||
default: null
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prominent: Boolean,
|
||||
title: String,
|
||||
text: String,
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => allowedTypes.includes(val)
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeIconSizeProps(),
|
||||
...makeLocationProps(),
|
||||
...makePositionProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'flat'
|
||||
})
|
||||
}, 'VAlert');
|
||||
export const VAlert = genericComponent()({
|
||||
name: 'VAlert',
|
||||
props: makeVAlertProps(),
|
||||
emits: {
|
||||
'click:close': e => true,
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const isActive = useProxiedModel(props, 'modelValue');
|
||||
const icon = toRef(() => {
|
||||
if (props.icon === false) return undefined;
|
||||
if (!props.type) return props.icon;
|
||||
return props.icon ?? `$${props.type}`;
|
||||
});
|
||||
const {
|
||||
iconSize
|
||||
} = useIconSizes(props, () => props.prominent ? 44 : undefined);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(() => ({
|
||||
color: props.color ?? props.type,
|
||||
variant: props.variant
|
||||
}));
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
positionClasses
|
||||
} = usePosition(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.borderColor);
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const closeProps = toRef(() => ({
|
||||
'aria-label': t(props.closeLabel),
|
||||
onClick(e) {
|
||||
isActive.value = false;
|
||||
emit('click:close', e);
|
||||
}
|
||||
}));
|
||||
return () => {
|
||||
const hasPrepend = !!(slots.prepend || icon.value);
|
||||
const hasTitle = !!(slots.title || props.title);
|
||||
const hasClose = !!(slots.close || props.closable);
|
||||
const iconProps = {
|
||||
density: props.density,
|
||||
icon: icon.value,
|
||||
size: props.iconSize || props.prominent ? iconSize.value : undefined
|
||||
};
|
||||
return isActive.value && _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-alert', props.border && {
|
||||
'v-alert--border': !!props.border,
|
||||
[`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
|
||||
}, {
|
||||
'v-alert--prominent': props.prominent
|
||||
}, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class]),
|
||||
"style": _normalizeStyle([colorStyles.value, dimensionStyles.value, locationStyles.value, props.style]),
|
||||
"role": "alert"
|
||||
}, {
|
||||
default: () => [genOverlays(false, 'v-alert'), props.border && _createElementVNode("div", {
|
||||
"key": "border",
|
||||
"class": _normalizeClass(['v-alert__border', textColorClasses.value]),
|
||||
"style": _normalizeStyle(textColorStyles.value)
|
||||
}, null), hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-alert__prepend"
|
||||
}, [!slots.prepend ? _createVNode(VIcon, _mergeProps({
|
||||
"key": "prepend-icon"
|
||||
}, iconProps), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !icon.value,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
...iconProps
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), _createElementVNode("div", {
|
||||
"class": "v-alert__content"
|
||||
}, [hasTitle && _createVNode(VAlertTitle, {
|
||||
"key": "title"
|
||||
}, {
|
||||
default: () => [slots.title?.() ?? props.title]
|
||||
}), slots.text?.() ?? props.text, slots.default?.()]), slots.append && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-alert__append"
|
||||
}, [slots.append()]), hasClose && _createElementVNode("div", {
|
||||
"key": "close",
|
||||
"class": "v-alert__close"
|
||||
}, [!slots.close ? _createVNode(VBtn, _mergeProps({
|
||||
"key": "close-btn",
|
||||
"icon": props.closeIcon,
|
||||
"size": "x-small",
|
||||
"variant": "text"
|
||||
}, closeProps.value), null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "close-defaults",
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
icon: props.closeIcon,
|
||||
size: 'x-small',
|
||||
variant: 'text'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.close?.({
|
||||
props: closeProps.value
|
||||
})]
|
||||
})])]
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VAlert.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+165
@@ -0,0 +1,165 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-alert
|
||||
display: grid
|
||||
flex: 1 1
|
||||
grid-template-areas: "prepend content append close" ". content . ."
|
||||
grid-template-columns: max-content auto max-content max-content
|
||||
position: relative
|
||||
padding: $alert-padding
|
||||
overflow: hidden
|
||||
--v-border-color: #{$alert-border-color}
|
||||
|
||||
@include tools.position($alert-positions)
|
||||
@include tools.rounded($alert-border-radius)
|
||||
@include tools.variant($alert-variants...)
|
||||
|
||||
&--prominent
|
||||
grid-template-areas: "prepend content append close" "prepend content . ."
|
||||
|
||||
&.v-alert--border
|
||||
--v-border-opacity: #{$alert-border-opacity}
|
||||
|
||||
&.v-alert--border-start
|
||||
padding-inline-start: $alert-padding + $alert-border-thin-width
|
||||
|
||||
&.v-alert--border-end
|
||||
padding-inline-end: $alert-padding + $alert-border-thin-width
|
||||
|
||||
&--variant-plain
|
||||
transition: $alert-plain-transition
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-alert', $alert-density) using ($modifier)
|
||||
padding-bottom: $alert-padding + $modifier
|
||||
padding-top: $alert-padding + $modifier
|
||||
|
||||
&.v-alert--border-top
|
||||
padding-top: $alert-padding + $alert-border-thin-width + $modifier
|
||||
|
||||
&.v-alert--border-bottom
|
||||
padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
|
||||
|
||||
&:not(:has(.v-alert-title))
|
||||
.v-alert__content
|
||||
padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)
|
||||
|
||||
.v-alert__border
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
left: 0
|
||||
opacity: var(--v-border-opacity)
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
right: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
@include tools.border($alert-border...)
|
||||
|
||||
.v-alert--border-start &
|
||||
border-inline-start-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-end &
|
||||
border-inline-end-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-top &
|
||||
border-top-width: $alert-border-thin-width
|
||||
|
||||
.v-alert--border-bottom &
|
||||
border-bottom-width: $alert-border-thin-width
|
||||
|
||||
.v-alert__close
|
||||
flex: 0 1 auto
|
||||
grid-area: close
|
||||
|
||||
> .v-btn
|
||||
margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)
|
||||
|
||||
.v-alert__content
|
||||
align-self: center
|
||||
grid-area: content
|
||||
overflow: hidden
|
||||
|
||||
> :first-child
|
||||
margin-top: 0
|
||||
|
||||
> :last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.v-alert__append,
|
||||
.v-alert__close
|
||||
margin-inline-start: $alert-append-margin-inline-start
|
||||
|
||||
.v-alert__append
|
||||
align-self: flex-start
|
||||
grid-area: append
|
||||
|
||||
+ .v-alert__close
|
||||
margin-inline-start: $alert-append-close-margin-inline-start
|
||||
|
||||
.v-alert__prepend
|
||||
align-self: flex-start
|
||||
display: flex
|
||||
align-items: center
|
||||
grid-area: prepend
|
||||
margin-inline-end: $alert-prepend-margin-inline-end
|
||||
min-height: $alert-prepend-icon-size
|
||||
|
||||
> .v-icon
|
||||
font-size: $alert-prepend-icon-size
|
||||
height: $alert-prepend-icon-size
|
||||
width: $alert-prepend-icon-size
|
||||
|
||||
.v-alert--prominent &
|
||||
align-self: center
|
||||
|
||||
.v-alert__underlay
|
||||
grid-area: none
|
||||
position: absolute
|
||||
|
||||
.v-alert--border-start &
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
.v-alert--border-end &
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
.v-alert--border-top &
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.v-alert--border-bottom &
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
.v-alert-title
|
||||
align-items: center
|
||||
align-self: center
|
||||
display: flex
|
||||
font-size: $alert-title-font-size
|
||||
font-weight: $alert-title-font-weight
|
||||
hyphens: $alert-title-hyphens
|
||||
letter-spacing: $alert-title-letter-spacing
|
||||
line-height: $alert-title-line-height
|
||||
overflow-wrap: $alert-title-overflow-wrap
|
||||
text-transform: $alert-title-text-transform
|
||||
word-break: $alert-title-word-break
|
||||
word-wrap: $alert-title-word-wrap
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-alert
|
||||
&:not(&--variant-text, &--variant-plain)
|
||||
border-style: solid
|
||||
|
||||
&--variant-outlined,
|
||||
&--variant-tonal
|
||||
border-width: medium
|
||||
|
||||
&--variant-elevated,
|
||||
&--variant-flat
|
||||
border-width: thick
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VAlertTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VAlertTitle = InstanceType<typeof VAlertTitle>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VAlertTitle = createSimpleFunctional('v-alert-title');
|
||||
//# sourceMappingURL=VAlertTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VAlertTitle.js","names":["createSimpleFunctional","VAlertTitle"],"sources":["../../../src/components/VAlert/VAlertTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VAlertTitle = createSimpleFunctional('v-alert-title')\n\nexport type VAlertTitle = InstanceType<typeof VAlertTitle>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,WAAW,GAAGD,sBAAsB,CAAC,eAAe,CAAC","ignoreList":[]}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VAlert
|
||||
$alert-background: rgb(var(--v-theme-surface-light)) !default;
|
||||
$alert-border-color: currentColor !default;
|
||||
$alert-border-opacity: .38 !default;
|
||||
$alert-border-radius: settings.$border-radius-root !default;
|
||||
$alert-border-style: settings.$border-style-root !default;
|
||||
$alert-border-thin-width: 8px !default;
|
||||
$alert-border-width: 0 !default;
|
||||
$alert-color: tools.theme-color('on-surface-light', var(--v-high-emphasis-opacity)) !default;
|
||||
$alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$alert-elevation: 1 !default;
|
||||
$alert-padding: 16px !default;
|
||||
$alert-plain-opacity: .62 !default;
|
||||
$alert-plain-transition: .2s opacity settings.$standard-easing !default;
|
||||
$alert-positions: absolute fixed sticky !default;
|
||||
$alert-prepend-margin-inline-end: 16px !default;
|
||||
$alert-prepend-icon-size: 1.75rem !default;
|
||||
$alert-append-margin-inline-start: 16px !default;
|
||||
$alert-append-close-margin-inline-start: 16px !default;
|
||||
|
||||
// VAlertTitle
|
||||
$alert-title-font-size: tools.map-deep-get(settings.$typography, 'headline-small', 'size') !default;
|
||||
$alert-title-font-weight: tools.map-deep-get(settings.$typography, 'headline-small', 'weight') !default;
|
||||
$alert-title-hyphens: auto !default;
|
||||
$alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'headline-small', 'letter-spacing') !default;
|
||||
$alert-title-line-height: 1.75rem !default;
|
||||
$alert-title-overflow-wrap: normal !default;
|
||||
$alert-title-text-transform: none !default;
|
||||
$alert-title-word-break: normal !default;
|
||||
$alert-title-word-wrap: break-word !default;
|
||||
|
||||
// VAlertText
|
||||
$alert-text-line-height: 1.35 !default;
|
||||
|
||||
// Lists
|
||||
$alert-border: (
|
||||
$alert-border-color,
|
||||
$alert-border-style,
|
||||
$alert-border-width,
|
||||
$alert-border-thin-width
|
||||
) !default;
|
||||
|
||||
$alert-variants: (
|
||||
$alert-background,
|
||||
$alert-color,
|
||||
$alert-elevation,
|
||||
$alert-plain-opacity,
|
||||
'v-alert'
|
||||
) !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VAlert } from './VAlert.js';
|
||||
export { VAlertTitle } from './VAlertTitle.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VAlert } from "./VAlert.js";
|
||||
export { VAlertTitle } from "./VAlertTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VAlert","VAlertTitle"],"sources":["../../../src/components/VAlert/index.ts"],"sourcesContent":["export { VAlert } from './VAlert'\nexport { VAlertTitle } from './VAlertTitle'\n"],"mappings":"SAASA,MAAM;AAAA,SACNC,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user