routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+314
@@ -0,0 +1,314 @@
|
||||
@layer vuetify-components {
|
||||
.v-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
transition-duration: 0.28s;
|
||||
transition-property: box-shadow, opacity, background, --v-elevation-overlay;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 0;
|
||||
}
|
||||
.v-card {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-card--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-card--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-card--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.v-card {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-card:hover > .v-card__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-card:focus-visible > .v-card__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-card:focus > .v-card__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-card--active > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true] > .v-card__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-card--active:hover > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true]:hover > .v-card__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-card--active:focus-visible > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-card__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-card--active:focus > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true]:focus > .v-card__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-card--variant-plain, .v-card--variant-outlined, .v-card--variant-text, .v-card--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-card--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-card--variant-plain:focus, .v-card--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-card--variant-plain .v-card__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-card--variant-elevated, .v-card--variant-flat {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-card--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-card--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-card--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-card--variant-text .v-card__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-card--variant-tonal .v-card__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-card .v-card__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-card--disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.v-card--disabled > :not(.v-card__loader) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.v-card--flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-card--hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-card--hover::before, .v-card--hover::after {
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
.v-card--hover::before {
|
||||
opacity: 1;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-card--hover::before {
|
||||
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-card--hover::after {
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
.v-card--hover::after {
|
||||
box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent);
|
||||
}
|
||||
.v-card--hover:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-card--hover:hover::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-card--hover:hover {
|
||||
box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent);
|
||||
}
|
||||
.v-card--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-card-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-height: 52px;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.v-card-item {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
flex: none;
|
||||
grid-template-areas: "prepend content append";
|
||||
grid-template-columns: max-content auto max-content;
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
.v-card-item + .v-card-text {
|
||||
padding-top: 0;
|
||||
}
|
||||
.v-card-item__prepend, .v-card-item__append {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.v-card-item__prepend {
|
||||
grid-area: prepend;
|
||||
padding-inline-end: 0.5rem;
|
||||
}
|
||||
.v-card-item__append {
|
||||
grid-area: append;
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
.v-card-item__content {
|
||||
align-self: center;
|
||||
grid-area: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-card-title {
|
||||
display: block;
|
||||
flex: none;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 400;
|
||||
hyphens: auto;
|
||||
letter-spacing: normal;
|
||||
min-width: 0;
|
||||
overflow-wrap: normal;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem 1rem;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.v-card .v-card-title {
|
||||
line-height: 1.2727272727;
|
||||
}
|
||||
.v-card--density-comfortable .v-card-title {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.v-card--density-compact .v-card-title {
|
||||
line-height: 1.55rem;
|
||||
}
|
||||
.v-card-item .v-card-title {
|
||||
padding: 0;
|
||||
}
|
||||
.v-card-title + .v-card-text,
|
||||
.v-card-title + .v-card-actions {
|
||||
padding-top: 0;
|
||||
}
|
||||
.v-card-subtitle {
|
||||
display: block;
|
||||
flex: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0178571429em;
|
||||
opacity: var(--v-card-subtitle-opacity, var(--v-medium-emphasis-opacity));
|
||||
overflow: hidden;
|
||||
padding: 0 1rem;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-card .v-card-subtitle {
|
||||
line-height: 1.4285714286;
|
||||
}
|
||||
.v-card--density-comfortable .v-card-subtitle {
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
.v-card--density-compact .v-card-subtitle {
|
||||
line-height: 1rem;
|
||||
}
|
||||
.v-card-item .v-card-subtitle {
|
||||
padding: 0 0 0.25rem;
|
||||
}
|
||||
.v-card-text {
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0178571429em;
|
||||
opacity: var(--v-card-text-opacity, 1);
|
||||
padding: 1rem;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-card .v-card-text {
|
||||
line-height: 1.4285714286;
|
||||
}
|
||||
.v-card--density-comfortable .v-card-text {
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
.v-card--density-compact .v-card-text {
|
||||
line-height: 1.15rem;
|
||||
}
|
||||
.v-card__image {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-card__content {
|
||||
border-radius: inherit;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.v-card__loader {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-card__loader .v-progress-linear {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.v-card__overlay {
|
||||
background-color: currentColor;
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-card:not(.v-card--variant-text, .v-card--variant-plain) {
|
||||
border: thin solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
+830
@@ -0,0 +1,830 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { VCardItemSlots } from './VCardItem.js';
|
||||
import type { LoaderSlotProps } from '../../composables/loader.js';
|
||||
import type { RippleDirectiveBinding } from '../../directives/ripple/index.js';
|
||||
export declare const makeVCardProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: 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;
|
||||
loading?: unknown;
|
||||
position?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
appendAvatar?: unknown;
|
||||
appendIcon?: unknown;
|
||||
disabled?: unknown;
|
||||
flat?: unknown;
|
||||
hover?: unknown;
|
||||
image?: unknown;
|
||||
link?: unknown;
|
||||
prependAvatar?: unknown;
|
||||
prependIcon?: unknown;
|
||||
ripple?: unknown;
|
||||
subtitle?: unknown;
|
||||
text?: unknown;
|
||||
title?: 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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
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">;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
appendAvatar: unknown extends Defaults["appendAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"]>;
|
||||
default: unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
hover: unknown extends Defaults["hover"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"]>;
|
||||
default: unknown extends Defaults["hover"] ? boolean : boolean | Defaults["hover"];
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
link: unknown extends Defaults["link"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"]>;
|
||||
default: unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"];
|
||||
};
|
||||
prependAvatar: unknown extends Defaults["prependAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"]>;
|
||||
default: unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"];
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
subtitle: unknown extends Defaults["subtitle"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["subtitle"] ? string | number | boolean : string | number | boolean | Defaults["subtitle"]>;
|
||||
default: unknown extends Defaults["subtitle"] ? string | number | boolean : Defaults["subtitle"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["text"] ? string | number | boolean : string | number | boolean | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string | number | boolean : Defaults["text"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["title"] ? string | number | boolean : string | number | boolean | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string | number | boolean : Defaults["title"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
};
|
||||
export type VCardSlots = VCardItemSlots & {
|
||||
default: never;
|
||||
actions: never;
|
||||
text: never;
|
||||
loader: LoaderSlotProps;
|
||||
image: never;
|
||||
item: never;
|
||||
};
|
||||
export declare const VCard: {
|
||||
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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
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;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, 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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
link: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
subtitle: string | number | boolean;
|
||||
text: string | number | boolean;
|
||||
title: string | number | 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;
|
||||
}>[];
|
||||
append: () => 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;
|
||||
}>[];
|
||||
subtitle: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: () => 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;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: () => 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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
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;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
link: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
subtitle: string | number | boolean;
|
||||
text: string | number | boolean;
|
||||
title: string | number | 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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
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;
|
||||
loading?: string | boolean | undefined;
|
||||
position?: "absolute" | "fixed" | "relative" | "static" | "sticky" | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
image?: string | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
text?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
item?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
item?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:item"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, 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";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
flat: boolean;
|
||||
hover: boolean;
|
||||
link: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
subtitle: string | number | boolean;
|
||||
text: string | number | boolean;
|
||||
title: string | number | 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;
|
||||
}>[];
|
||||
append: () => 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;
|
||||
}>[];
|
||||
subtitle: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: () => 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;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: () => 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;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
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>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
disabled: BooleanConstructor;
|
||||
flat: BooleanConstructor;
|
||||
hover: BooleanConstructor;
|
||||
image: StringConstructor;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
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>;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
position: {
|
||||
type: PropType<"absolute" | "fixed" | "relative" | "static" | "sticky">;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
disabled: BooleanConstructor;
|
||||
flat: BooleanConstructor;
|
||||
hover: BooleanConstructor;
|
||||
image: StringConstructor;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
text: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}>>;
|
||||
export type VCard = InstanceType<typeof VCard>;
|
||||
+197
@@ -0,0 +1,197 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, withDirectives as _withDirectives } from "vue";
|
||||
/* eslint-disable complexity */
|
||||
|
||||
// Styles
|
||||
import "./VCard.css";
|
||||
|
||||
// Components
|
||||
import { VCardActions } from "./VCardActions.js";
|
||||
import { VCardItem } from "./VCardItem.js";
|
||||
import { VCardText } from "./VCardText.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.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 { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makePositionProps, usePosition } from "../../composables/position.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeRouterProps, useLink } from "../../composables/router.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Directives
|
||||
import vRipple from "../../directives/ripple/index.js"; // Utilities
|
||||
import { shallowRef, watch } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVCardProps = propsFactory({
|
||||
appendAvatar: String,
|
||||
appendIcon: IconValue,
|
||||
disabled: Boolean,
|
||||
flat: Boolean,
|
||||
hover: Boolean,
|
||||
image: String,
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
prependAvatar: String,
|
||||
prependIcon: IconValue,
|
||||
ripple: {
|
||||
type: [Boolean, Object],
|
||||
default: true
|
||||
},
|
||||
subtitle: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
text: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeLoaderProps(),
|
||||
...makeLocationProps(),
|
||||
...makePositionProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeRouterProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'elevated'
|
||||
})
|
||||
}, 'VCard');
|
||||
export const VCard = genericComponent()({
|
||||
name: 'VCard',
|
||||
directives: {
|
||||
vRipple
|
||||
},
|
||||
props: makeVCardProps(),
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
loaderClasses
|
||||
} = useLoader(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
positionClasses
|
||||
} = usePosition(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const link = useLink(props, attrs);
|
||||
const loadingColor = shallowRef(undefined);
|
||||
watch(() => props.loading, (val, old) => {
|
||||
loadingColor.value = !val && typeof old === 'string' ? old : typeof val === 'boolean' ? undefined : val;
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
useRender(() => {
|
||||
const isLink = props.link !== false && link.isLink.value;
|
||||
const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
|
||||
const Tag = isLink ? 'a' : props.tag;
|
||||
const hasTitle = !!(slots.title || props.title != null);
|
||||
const hasSubtitle = !!(slots.subtitle || props.subtitle != null);
|
||||
const hasHeader = hasTitle || hasSubtitle;
|
||||
const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
|
||||
const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
|
||||
const hasImage = !!(slots.image || props.image);
|
||||
const hasCardItem = hasHeader || hasPrepend || hasAppend;
|
||||
const hasText = !!(slots.text || props.text != null);
|
||||
return _withDirectives(_createVNode(Tag, _mergeProps(link.linkProps, {
|
||||
"class": ['v-card', {
|
||||
'v-card--disabled': props.disabled,
|
||||
'v-card--flat': props.flat,
|
||||
'v-card--hover': props.hover && !(props.disabled || props.flat),
|
||||
'v-card--link': isClickable
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
|
||||
"style": [colorStyles.value, dimensionStyles.value, locationStyles.value, {
|
||||
'--v-card-height': convertToUnit(props.height)
|
||||
}, props.style],
|
||||
"onClick": isClickable && link.navigate.value,
|
||||
"tabindex": props.disabled ? -1 : undefined
|
||||
}), {
|
||||
default: () => [hasImage && _createElementVNode("div", {
|
||||
"key": "image",
|
||||
"class": "v-card__image"
|
||||
}, [!slots.image ? _createVNode(VImg, {
|
||||
"key": "image-img",
|
||||
"cover": true,
|
||||
"src": props.image
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "image-defaults",
|
||||
"disabled": !props.image,
|
||||
"defaults": {
|
||||
VImg: {
|
||||
cover: true,
|
||||
src: props.image
|
||||
}
|
||||
}
|
||||
}, slots.image)]), _createVNode(LoaderSlot, {
|
||||
"name": "v-card",
|
||||
"active": !!props.loading,
|
||||
"color": loadingColor.value
|
||||
}, {
|
||||
default: slots.loader
|
||||
}), hasCardItem && _createVNode(VCardItem, {
|
||||
"key": "item",
|
||||
"prependAvatar": props.prependAvatar,
|
||||
"prependIcon": props.prependIcon,
|
||||
"title": props.title,
|
||||
"subtitle": props.subtitle,
|
||||
"appendAvatar": props.appendAvatar,
|
||||
"appendIcon": props.appendIcon
|
||||
}, {
|
||||
default: slots.item,
|
||||
prepend: slots.prepend,
|
||||
title: slots.title,
|
||||
subtitle: slots.subtitle,
|
||||
append: slots.append
|
||||
}), hasText && _createVNode(VCardText, {
|
||||
"key": "text"
|
||||
}, {
|
||||
default: () => [slots.text?.() ?? props.text]
|
||||
}), slots.default?.(), slots.actions && _createVNode(VCardActions, null, {
|
||||
default: slots.actions
|
||||
}), genOverlays(isClickable, 'v-card')]
|
||||
}), [[vRipple, isClickable && props.ripple]]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCard.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+210
@@ -0,0 +1,210 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-card
|
||||
display: block
|
||||
overflow: hidden
|
||||
overflow-wrap: $card-overflow-wrap
|
||||
position: relative
|
||||
padding: $card-padding
|
||||
text-decoration: none
|
||||
transition-duration: $card-transition-duration
|
||||
transition-property: $card-transition-property
|
||||
transition-timing-function: $card-transition-timing-function
|
||||
z-index: 0
|
||||
|
||||
@include tools.border($card-border...)
|
||||
@include tools.position($card-positions)
|
||||
@include tools.rounded($card-border-radius)
|
||||
@include tools.states('.v-card__overlay')
|
||||
@include tools.variant($card-variants...)
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
user-select: none
|
||||
|
||||
>:not(.v-card__loader)
|
||||
opacity: $card-disabled-opacity
|
||||
|
||||
&--flat
|
||||
box-shadow: none
|
||||
|
||||
&--hover
|
||||
cursor: pointer
|
||||
|
||||
&::before,
|
||||
&::after
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
content: ''
|
||||
display: block
|
||||
left: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: inherit
|
||||
|
||||
&::before
|
||||
opacity: 1
|
||||
z-index: -1
|
||||
|
||||
@include tools.elevation($card-elevation)
|
||||
|
||||
&::after
|
||||
z-index: 1
|
||||
opacity: 0
|
||||
|
||||
@include tools.elevation($card-hover-elevation)
|
||||
|
||||
&:hover::after
|
||||
opacity: 1
|
||||
|
||||
&:hover::before
|
||||
opacity: 0
|
||||
|
||||
&:hover
|
||||
@include tools.elevation($card-hover-elevation)
|
||||
|
||||
&--link
|
||||
cursor: pointer
|
||||
|
||||
.v-card-actions
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: $card-actions-flex
|
||||
min-height: $card-actions-min-height
|
||||
padding: $card-actions-padding
|
||||
gap: $card-actions-gap
|
||||
|
||||
.v-card-item
|
||||
align-items: $card-item-align-items
|
||||
display: grid
|
||||
flex: $card-header-flex
|
||||
grid-template-areas: "prepend content append"
|
||||
grid-template-columns: max-content auto max-content
|
||||
padding: $card-item-padding
|
||||
|
||||
+ .v-card-text
|
||||
padding-top: 0
|
||||
|
||||
&__prepend,
|
||||
&__append
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
&__prepend
|
||||
grid-area: prepend
|
||||
padding-inline-end: $card-prepend-padding-inline-end
|
||||
|
||||
&__append
|
||||
grid-area: append
|
||||
padding-inline-start: $card-append-padding-inline-start
|
||||
|
||||
.v-card-item__content
|
||||
align-self: center
|
||||
grid-area: content
|
||||
overflow: hidden
|
||||
|
||||
.v-card-title
|
||||
display: block
|
||||
flex: $card-title-flex
|
||||
font-size: $card-title-font-size
|
||||
font-weight: $card-title-font-weight
|
||||
hyphens: $card-title-hyphens
|
||||
letter-spacing: $card-title-letter-spacing
|
||||
min-width: 0
|
||||
overflow-wrap: $card-title-overflow-wrap
|
||||
overflow: $card-title-overflow
|
||||
padding: $card-title-padding
|
||||
text-overflow: $card-title-text-overflow
|
||||
text-transform: $card-title-text-transform
|
||||
white-space: $card-title-white-space
|
||||
word-break: $card-title-word-break
|
||||
word-wrap: $card-title-word-wrap
|
||||
|
||||
@include card-line-height-densities($card-title-densities)
|
||||
|
||||
.v-card-item &
|
||||
padding: $card-title-header-padding
|
||||
|
||||
+ .v-card-text,
|
||||
+ .v-card-actions
|
||||
padding-top: 0
|
||||
|
||||
.v-card-subtitle
|
||||
display: block
|
||||
flex: $card-subtitle-flex
|
||||
font-size: $card-subtitle-font-size
|
||||
font-weight: $card-subtitle-font-weight
|
||||
letter-spacing: $card-subtitle-letter-spacing
|
||||
opacity: $card-subtitle-opacity
|
||||
overflow: $card-subtitle-overflow
|
||||
padding: $card-subtitle-padding
|
||||
text-overflow: $card-subtitle-text-overflow
|
||||
text-transform: $card-subtitle-text-transform
|
||||
white-space: $card-subtitle-white-space
|
||||
|
||||
@include card-line-height-densities($card-subtitle-density-line-height)
|
||||
|
||||
.v-card-item &
|
||||
padding: $card-subtitle-header-padding
|
||||
|
||||
.v-card-text
|
||||
flex: $card-text-flex
|
||||
font-size: $card-text-font-size
|
||||
font-weight: $card-text-font-weight
|
||||
letter-spacing: $card-text-letter-spacing
|
||||
opacity: $card-text-opacity
|
||||
padding: $card-text-padding
|
||||
text-transform: $card-text-text-transform
|
||||
|
||||
@include card-line-height-densities($card-text-density-line-height)
|
||||
|
||||
.v-card__image
|
||||
display: flex
|
||||
height: 100%
|
||||
flex: $card-img-flex
|
||||
left: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
z-index: -1
|
||||
|
||||
.v-card__content
|
||||
border-radius: inherit
|
||||
overflow: hidden
|
||||
position: relative
|
||||
|
||||
.v-card__loader
|
||||
bottom: $card-loader-bottom
|
||||
top: $card-loader-top
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
width: 100%
|
||||
z-index: 1
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-progress-linear
|
||||
border: none
|
||||
|
||||
.v-card__overlay
|
||||
background-color: currentColor
|
||||
border-radius: inherit
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
pointer-events: none
|
||||
opacity: 0
|
||||
transition: opacity 0.2s ease-in-out
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-card
|
||||
&:not(&--variant-text, &--variant-plain)
|
||||
border: thin solid
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
export declare const makeVCardActionsProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
};
|
||||
export declare const VCardActions: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
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;
|
||||
}, {}, 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 | import("../../util/index.js").JSXComponent;
|
||||
}, 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 | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
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;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
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;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}, {}, 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: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VCardActions = InstanceType<typeof VCardActions>;
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVCardActionsProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VCardActions');
|
||||
export const VCardActions = genericComponent()({
|
||||
name: 'VCardActions',
|
||||
props: makeVCardActionsProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
slim: true,
|
||||
variant: 'text'
|
||||
}
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-card-actions', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCardActions.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VCardActions.js","names":["makeComponentProps","provideDefaults","makeTagProps","genericComponent","propsFactory","useRender","makeVCardActionsProps","VCardActions","name","props","setup","slots","VBtn","slim","variant","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VCard/VCardActions.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVCardActionsProps = propsFactory({\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VCardActions')\n\nexport const VCardActions = genericComponent()({\n name: 'VCardActions',\n\n props: makeVCardActionsProps(),\n\n setup (props, { slots }) {\n provideDefaults({\n VBtn: {\n slim: true,\n variant: 'text',\n },\n })\n\n useRender(() => (\n <props.tag\n class={[\n 'v-card-actions',\n props.class,\n ]}\n style={ props.style }\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VCardActions = InstanceType<typeof VCardActions>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChD,GAAGJ,kBAAkB,CAAC,CAAC;EACvB,GAAGE,YAAY,CAAC;AAClB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMK,YAAY,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EAC7CK,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEH,qBAAqB,CAAC,CAAC;EAE9BI,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBV,eAAe,CAAC;MACdW,IAAI,EAAE;QACJC,IAAI,EAAE,IAAI;QACVC,OAAO,EAAE;MACX;IACF,CAAC,CAAC;IAEFT,SAAS,CAAC,MAAAU,YAAA,CAAAN,KAAA,CAAAO,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,gBAAgB,EAChBR,KAAK,CAACS,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOV,KAAK,CAACW,KAAK;IAAA,GACTT,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+316
@@ -0,0 +1,316 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export type VCardItemSlots = {
|
||||
default: never;
|
||||
prepend: never;
|
||||
append: never;
|
||||
title: never;
|
||||
subtitle: never;
|
||||
};
|
||||
export declare const makeCardItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
tag?: unknown;
|
||||
appendAvatar?: unknown;
|
||||
appendIcon?: unknown;
|
||||
prependAvatar?: unknown;
|
||||
prependIcon?: unknown;
|
||||
subtitle?: unknown;
|
||||
title?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
appendAvatar: unknown extends Defaults["appendAvatar"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"]>;
|
||||
default: unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
prependAvatar: unknown extends Defaults["prependAvatar"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"]>;
|
||||
default: unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"];
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
subtitle: unknown extends Defaults["subtitle"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["subtitle"] ? string | number | boolean : string | number | boolean | Defaults["subtitle"]>;
|
||||
default: unknown extends Defaults["subtitle"] ? string | number | boolean : Defaults["subtitle"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["title"] ? string | number | boolean : string | number | boolean | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string | number | boolean : Defaults["title"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
};
|
||||
export declare const VCardItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | 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;
|
||||
}>[];
|
||||
append: () => 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;
|
||||
}>[];
|
||||
subtitle: () => 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: (() => 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;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | 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;
|
||||
}>[];
|
||||
append: () => 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;
|
||||
}>[];
|
||||
subtitle: () => 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;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: import("vue").PropType<IconValue>;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: import("vue").PropType<IconValue>;
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: import("vue").PropType<IconValue>;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: import("vue").PropType<IconValue>;
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
}>>;
|
||||
export type VCardItem = InstanceType<typeof VCardItem>;
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Components
|
||||
import { VCardSubtitle } from "./VCardSubtitle.js";
|
||||
import { VCardTitle } from "./VCardTitle.js";
|
||||
import { VAvatar } from "../VAvatar/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { toDisplayString } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeCardItemProps = propsFactory({
|
||||
appendAvatar: String,
|
||||
appendIcon: IconValue,
|
||||
prependAvatar: String,
|
||||
prependIcon: IconValue,
|
||||
subtitle: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeTagProps()
|
||||
}, 'VCardItem');
|
||||
export const VCardItem = genericComponent()({
|
||||
name: 'VCardItem',
|
||||
props: makeCardItemProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => {
|
||||
const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
|
||||
const hasPrepend = !!(hasPrependMedia || slots.prepend);
|
||||
const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
|
||||
const hasAppend = !!(hasAppendMedia || slots.append);
|
||||
const hasTitle = !!(props.title != null || slots.title);
|
||||
const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-card-item', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-card-item__prepend"
|
||||
}, [!slots.prepend ? _createElementVNode(_Fragment, null, [props.prependAvatar && _createVNode(VAvatar, {
|
||||
"key": "prepend-avatar",
|
||||
"density": props.density,
|
||||
"image": props.prependAvatar
|
||||
}, null), props.prependIcon && _createVNode(VIcon, {
|
||||
"key": "prepend-icon",
|
||||
"density": props.density,
|
||||
"icon": props.prependIcon
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !hasPrependMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
density: props.density,
|
||||
image: props.prependAvatar
|
||||
},
|
||||
VIcon: {
|
||||
density: props.density,
|
||||
icon: props.prependIcon
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), _createElementVNode("div", {
|
||||
"class": "v-card-item__content"
|
||||
}, [hasTitle && _createVNode(VCardTitle, {
|
||||
"key": "title"
|
||||
}, {
|
||||
default: () => [slots.title?.() ?? toDisplayString(props.title)]
|
||||
}), hasSubtitle && _createVNode(VCardSubtitle, {
|
||||
"key": "subtitle"
|
||||
}, {
|
||||
default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
|
||||
}), slots.default?.()]), hasAppend && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-card-item__append"
|
||||
}, [!slots.append ? _createElementVNode(_Fragment, null, [props.appendIcon && _createVNode(VIcon, {
|
||||
"key": "append-icon",
|
||||
"density": props.density,
|
||||
"icon": props.appendIcon
|
||||
}, null), props.appendAvatar && _createVNode(VAvatar, {
|
||||
"key": "append-avatar",
|
||||
"density": props.density,
|
||||
"image": props.appendAvatar
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "append-defaults",
|
||||
"disabled": !hasAppendMedia,
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
density: props.density,
|
||||
image: props.appendAvatar
|
||||
},
|
||||
VIcon: {
|
||||
density: props.density,
|
||||
icon: props.appendIcon
|
||||
}
|
||||
}
|
||||
}, slots.append)])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCardItem.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+139
@@ -0,0 +1,139 @@
|
||||
export declare const makeVCardSubtitleProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
opacity?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VCardSubtitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, 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 | import("../../util/index.js").JSXComponent;
|
||||
}, 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 | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}, {}, 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: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VCardSubtitle = InstanceType<typeof VCardSubtitle>;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVCardSubtitleProps = propsFactory({
|
||||
opacity: [Number, String],
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VCardSubtitle');
|
||||
export const VCardSubtitle = genericComponent()({
|
||||
name: 'VCardSubtitle',
|
||||
props: makeVCardSubtitleProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-card-subtitle', props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-card-subtitle-opacity': props.opacity
|
||||
}, props.style])
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCardSubtitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VCardSubtitle.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVCardSubtitleProps","opacity","Number","String","VCardSubtitle","name","props","setup","slots","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VCard/VCardSubtitle.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVCardSubtitleProps = propsFactory({\n opacity: [Number, String],\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VCardSubtitle')\n\nexport const VCardSubtitle = genericComponent()({\n name: 'VCardSubtitle',\n\n props: makeVCardSubtitleProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <props.tag\n class={[\n 'v-card-subtitle',\n props.class,\n ]}\n style={[\n { '--v-card-subtitle-opacity': props.opacity },\n props.style,\n ]}\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VCardSubtitle = InstanceType<typeof VCardSubtitle>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjDG,OAAO,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAEzB,GAAGR,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMQ,aAAa,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EAC9CQ,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEN,sBAAsB,CAAC,CAAC;EAE/BO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAAU,YAAA,CAAAH,KAAA,CAAAI,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,iBAAiB,EACjBL,KAAK,CAACM,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACL;QAAE,2BAA2B,EAAEP,KAAK,CAACL;MAAQ,CAAC,EAC9CK,KAAK,CAACQ,KAAK,CACZ;IAAA,GACSN,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
export declare const makeVCardTextProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
opacity?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VCardText: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, 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 | import("../../util/index.js").JSXComponent;
|
||||
}, 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 | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$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;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}, {}, 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: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VCardText = InstanceType<typeof VCardText>;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVCardTextProps = propsFactory({
|
||||
opacity: [Number, String],
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VCardText');
|
||||
export const VCardText = genericComponent()({
|
||||
name: 'VCardText',
|
||||
props: makeVCardTextProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-card-text', props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-card-text-opacity': props.opacity
|
||||
}, props.style])
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCardText.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VCardText.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVCardTextProps","opacity","Number","String","VCardText","name","props","setup","slots","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VCard/VCardText.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVCardTextProps = propsFactory({\n opacity: [Number, String],\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VCardText')\n\nexport const VCardText = genericComponent()({\n name: 'VCardText',\n\n props: makeVCardTextProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <props.tag\n class={[\n 'v-card-text',\n props.class,\n ]}\n style={[\n { '--v-card-text-opacity': props.opacity },\n props.style,\n ]}\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VCardText = InstanceType<typeof VCardText>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,kBAAkB,GAAGF,YAAY,CAAC;EAC7CG,OAAO,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAEzB,GAAGR,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,WAAW,CAAC;AAEf,OAAO,MAAMQ,SAAS,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EAC1CQ,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEN,kBAAkB,CAAC,CAAC;EAE3BO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAAU,YAAA,CAAAH,KAAA,CAAAI,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,aAAa,EACbL,KAAK,CAACM,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACL;QAAE,uBAAuB,EAAEP,KAAK,CAACL;MAAQ,CAAC,EAC1CK,KAAK,CAACQ,KAAK,CACZ;IAAA,GACSN,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VCardTitle: {
|
||||
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 VCardTitle = InstanceType<typeof VCardTitle>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VCardTitle = createSimpleFunctional('v-card-title');
|
||||
//# sourceMappingURL=VCardTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VCardTitle.js","names":["createSimpleFunctional","VCardTitle"],"sources":["../../../src/components/VCard/VCardTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VCardTitle = createSimpleFunctional('v-card-title')\n\nexport type VCardTitle = InstanceType<typeof VCardTitle>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,UAAU,GAAGD,sBAAsB,CAAC,cAAc,CAAC","ignoreList":[]}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@mixin card-line-height-densities ($map) {
|
||||
@each $density, $lineHeight in $map {
|
||||
@if $density == null {
|
||||
.v-card & {
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
} @else {
|
||||
.v-card--density-#{$density} & {
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VCard
|
||||
$card-append-padding-inline-start: .5rem !default;
|
||||
$card-background: rgb(var(--v-theme-surface)) !default;
|
||||
$card-border-color: settings.$border-color-root !default;
|
||||
$card-border-radius: settings.$border-radius-root !default;
|
||||
$card-border-style: settings.$border-style-root !default;
|
||||
$card-border-thin-width: thin !default;
|
||||
$card-border-width: 0 !default;
|
||||
$card-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$card-disabled-opacity: 0.6 !default;
|
||||
$card-elevation: 1 !default;
|
||||
$card-loader-top: 0 !default;
|
||||
$card-loader-bottom: auto !default;
|
||||
$card-hover-elevation: 3 !default;
|
||||
$card-img-flex: 1 1 auto !default;
|
||||
$card-item-align-items: center !default;
|
||||
$card-item-padding: .625rem 1rem !default;
|
||||
$card-overflow-wrap: break-word !default;
|
||||
$card-padding: 0 !default;
|
||||
$card-plain-opacity: .62 !default;
|
||||
$card-positions: absolute fixed !default;
|
||||
$card-prepend-padding-inline-end: .5rem !default;
|
||||
$card-transition-duration: 0.28s !default;
|
||||
$card-transition-property: box-shadow, opacity, background, --v-elevation-overlay !default;
|
||||
$card-transition-timing-function: settings.$standard-easing !default;
|
||||
|
||||
// VCardActions
|
||||
$card-actions-flex: none !default;
|
||||
$card-actions-min-height: 52px !default;
|
||||
$card-actions-padding: .5rem !default;
|
||||
$button-card-actions-margin: .5rem !default; // deprecated
|
||||
$card-actions-gap: $button-card-actions-margin !default;
|
||||
|
||||
// VCardHeader
|
||||
$card-header-flex: none !default;
|
||||
|
||||
// VCardTitle
|
||||
$card-title-comfortable-line-height: 1.75rem !default;
|
||||
$card-title-compact-line-height: 1.55rem !default;
|
||||
$card-title-flex: none !default;
|
||||
$card-title-font-size: tools.map-deep-get(settings.$typography, 'title-large', 'size') !default;
|
||||
$card-title-font-weight: tools.map-deep-get(settings.$typography, 'title-large', 'weight') !default;
|
||||
$card-title-header-padding: 0 !default;
|
||||
$card-title-hyphens: auto !default;
|
||||
$card-title-letter-spacing: tools.map-deep-get(settings.$typography, 'title-large', 'letter-spacing') !default;
|
||||
$card-title-line-height: tools.map-deep-get(settings.$typography, 'title-large', 'line-height') !default;
|
||||
$card-title-overflow-wrap: normal !default;
|
||||
$card-title-overflow: hidden !default;
|
||||
$card-title-padding: .5rem 1rem !default;
|
||||
$card-title-text-overflow: ellipsis !default;
|
||||
$card-title-text-transform: none !default;
|
||||
$card-title-white-space: nowrap !default;
|
||||
$card-title-word-break: normal !default;
|
||||
$card-title-word-wrap: break-word !default;
|
||||
|
||||
// VCardSubtitle
|
||||
$card-subtitle-color: tools.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$card-subtitle-comfortable-line-height: 1.125rem !default;
|
||||
$card-subtitle-compact-line-height: 1rem !default;
|
||||
$card-subtitle-flex: none !default;
|
||||
$card-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-medium', 'size') !default;
|
||||
$card-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-medium', 'weight') !default;
|
||||
$card-subtitle-header-padding: 0 0 .25rem !default;
|
||||
$card-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing') !default;
|
||||
$card-subtitle-line-height: tools.map-deep-get(settings.$typography, 'body-medium', 'line-height') !default;
|
||||
$card-subtitle-opacity: var(--v-card-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default;
|
||||
$card-subtitle-overflow: hidden !default;
|
||||
$card-subtitle-padding: 0 1rem !default;
|
||||
$card-subtitle-text-overflow: ellipsis !default;
|
||||
$card-subtitle-text-transform: none !default;
|
||||
$card-subtitle-white-space: nowrap !default;
|
||||
|
||||
// VCardText
|
||||
$card-text-comfortable-line-height: 1.2rem !default;
|
||||
$card-text-compact-line-height: 1.15rem !default;
|
||||
$card-text-flex: 1 1 auto !default;
|
||||
$card-text-font-size: tools.map-deep-get(settings.$typography, 'body-medium', 'size') !default;
|
||||
$card-text-font-weight: tools.map-deep-get(settings.$typography, 'body-medium', 'weight') !default;
|
||||
$card-text-opacity: var(--v-card-text-opacity, 1) !default;
|
||||
$card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing') !default;
|
||||
$card-text-line-height: tools.map-deep-get(settings.$typography, 'body-medium', 'line-height') !default;
|
||||
$card-text-padding: 1rem !default;
|
||||
$card-text-text-transform: none !default;
|
||||
|
||||
// Lists
|
||||
$card-border: (
|
||||
$card-border-color,
|
||||
$card-border-style,
|
||||
$card-border-width,
|
||||
$card-border-thin-width
|
||||
) !default;
|
||||
|
||||
$card-title-densities: () !default;
|
||||
$card-title-densities: map.merge((
|
||||
null: $card-title-line-height,
|
||||
'comfortable': $card-title-comfortable-line-height,
|
||||
'compact': $card-title-compact-line-height
|
||||
), $card-title-densities);
|
||||
|
||||
$card-subtitle-density-line-height: () !default;
|
||||
$card-subtitle-density-line-height: map.merge((
|
||||
null: $card-subtitle-line-height,
|
||||
'comfortable': $card-subtitle-comfortable-line-height,
|
||||
'compact': $card-subtitle-compact-line-height
|
||||
), $card-subtitle-density-line-height);
|
||||
|
||||
$card-text-density-line-height: () !default;
|
||||
$card-text-density-line-height: map.merge((
|
||||
null: $card-text-line-height,
|
||||
'comfortable': $card-text-comfortable-line-height,
|
||||
'compact': $card-text-compact-line-height
|
||||
), $card-text-density-line-height);
|
||||
|
||||
$card-variants: (
|
||||
$card-background,
|
||||
$card-color,
|
||||
$card-elevation,
|
||||
$card-plain-opacity,
|
||||
'v-card'
|
||||
) !default;
|
||||
|
||||
// Deprecated
|
||||
$card-avatar-align-self: flex-start !default;
|
||||
$card-avatar-header-padding: 0 !default;
|
||||
$card-avatar-padding: .5rem 1rem !default;
|
||||
$card-title-padding-top: 1rem !default;
|
||||
$card-text-padding-bottom: 1rem !default;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export { VCard } from './VCard.js';
|
||||
export { VCardActions } from './VCardActions.js';
|
||||
export { VCardItem } from './VCardItem.js';
|
||||
export { VCardSubtitle } from './VCardSubtitle.js';
|
||||
export { VCardText } from './VCardText.js';
|
||||
export { VCardTitle } from './VCardTitle.js';
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
export { VCard } from "./VCard.js";
|
||||
export { VCardActions } from "./VCardActions.js";
|
||||
export { VCardItem } from "./VCardItem.js";
|
||||
export { VCardSubtitle } from "./VCardSubtitle.js";
|
||||
export { VCardText } from "./VCardText.js";
|
||||
export { VCardTitle } from "./VCardTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VCard","VCardActions","VCardItem","VCardSubtitle","VCardText","VCardTitle"],"sources":["../../../src/components/VCard/index.ts"],"sourcesContent":["export { VCard } from './VCard'\nexport { VCardActions } from './VCardActions'\nexport { VCardItem } from './VCardItem'\nexport { VCardSubtitle } from './VCardSubtitle'\nexport { VCardText } from './VCardText'\nexport { VCardTitle } from './VCardTitle'\n"],"mappings":"SAASA,KAAK;AAAA,SACLC,YAAY;AAAA,SACZC,SAAS;AAAA,SACTC,aAAa;AAAA,SACbC,SAAS;AAAA,SACTC,UAAU","ignoreList":[]}
|
||||
Reference in New Issue
Block a user