routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+237
@@ -0,0 +1,237 @@
|
||||
@layer vuetify-components {
|
||||
.v-expansion-panel {
|
||||
background-color: 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-expansion-panel:not(:first-child)::after {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-expansion-panel--disabled .v-expansion-panel-title {
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) 26%, transparent);
|
||||
}
|
||||
.v-expansion-panel--disabled .v-expansion-panel-title .v-expansion-panel-title__overlay {
|
||||
opacity: 0.4615384615;
|
||||
}
|
||||
.v-expansion-panels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-expansion-panels > :first-child {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.v-expansion-panels > :last-child {
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > .v-expansion-panel--active {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > .v-expansion-panel--before-active {
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > .v-expansion-panel--after-active {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > :not(:first-child):not(.v-expansion-panel--after-active):not(.v-expansion-panel--active) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) > :not(:last-child):not(.v-expansion-panel--before-active):not(.v-expansion-panel--active) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > :first-child:not(:last-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > :last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > :last-child:not(:first-child) .v-expansion-panel-title--active {
|
||||
border-bottom-left-radius: initial;
|
||||
border-bottom-right-radius: initial;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > :not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-expansion-panels--variant-accordion .v-expansion-panel-title__overlay {
|
||||
transition: 0.3s border-radius cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-expansion-panel {
|
||||
flex: 1 0 100%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: margin-top, border-radius, border, max-width;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-expansion-panel {
|
||||
transition-property: border-radius, border;
|
||||
}
|
||||
}
|
||||
.v-expansion-panel:not(:first-child)::after {
|
||||
border-top-style: solid;
|
||||
border-top-width: thin;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-expansion-panel--disabled .v-expansion-panel-title {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-expansion-panel--active:not(:first-child),
|
||||
.v-expansion-panel--active + .v-expansion-panel {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.v-expansion-panel--active:not(:first-child)::after,
|
||||
.v-expansion-panel--active + .v-expansion-panel::after {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-expansion-panel--active > .v-expansion-panel-title {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-expansion-panel--active > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
|
||||
min-height: 64px;
|
||||
}
|
||||
.v-expansion-panel__shadow {
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-expansion-panel__shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-expansion-panel__shadow {
|
||||
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-expansion-panel-title {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
align-items: center;
|
||||
text-align: start;
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
font: inherit;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1;
|
||||
min-height: 48px;
|
||||
outline: none;
|
||||
padding: 16px 24px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.v-expansion-panel-title {
|
||||
transition: 0.3s min-height cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-expansion-panel-title:focus-visible > .v-expansion-panel-title__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-expansion-panel-title:focus > .v-expansion-panel-title__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-expansion-panel-title--focusable.v-expansion-panel-title--active .v-expansion-panel-title__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-expansion-panel-title--focusable.v-expansion-panel-title--active:hover .v-expansion-panel-title__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-expansion-panel-title--focusable.v-expansion-panel-title--active:focus-visible .v-expansion-panel-title__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-expansion-panel-title--focusable.v-expansion-panel-title--active:focus .v-expansion-panel-title__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-expansion-panel-title__overlay {
|
||||
background-color: currentColor;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
}
|
||||
.v-expansion-panel-title__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-expansion-panel-title__icon {
|
||||
display: inline-flex;
|
||||
margin-bottom: -4px;
|
||||
margin-top: -4px;
|
||||
user-select: none;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.v-expansion-panel-text {
|
||||
display: flex;
|
||||
}
|
||||
.v-expansion-panel-text__wrapper {
|
||||
padding: 8px 24px 16px;
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > .v-expansion-panel {
|
||||
margin-top: 0;
|
||||
}
|
||||
.v-expansion-panels--variant-accordion > .v-expansion-panel::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-expansion-panels--variant-popout > .v-expansion-panel {
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
.v-expansion-panels--variant-popout > .v-expansion-panel--active {
|
||||
max-width: calc(100% + 16px);
|
||||
}
|
||||
.v-expansion-panels--variant-inset > .v-expansion-panel {
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-expansion-panels--variant-inset > .v-expansion-panel--active {
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
.v-expansion-panels--flat > .v-expansion-panel::after {
|
||||
border-top: none;
|
||||
}
|
||||
.v-expansion-panels--flat > .v-expansion-panel .v-expansion-panel__shadow {
|
||||
display: none;
|
||||
}
|
||||
.v-expansion-panels--tile {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-expansion-panels--tile > .v-expansion-panel {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+565
@@ -0,0 +1,565 @@
|
||||
export declare const makeVExpansionPanelProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
value?: unknown;
|
||||
disabled?: unknown;
|
||||
selectedClass?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
eager?: unknown;
|
||||
color?: unknown;
|
||||
expandIcon?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
hideActions?: unknown;
|
||||
focusable?: unknown;
|
||||
static?: unknown;
|
||||
ripple?: unknown;
|
||||
readonly?: unknown;
|
||||
title?: unknown;
|
||||
text?: unknown;
|
||||
bgColor?: 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>;
|
||||
};
|
||||
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: import("vue").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: import("vue").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: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").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: import("vue").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: import("vue").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: import("vue").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: import("vue").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: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
eager: unknown extends Defaults["eager"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"]>;
|
||||
default: unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
hideActions: unknown extends Defaults["hideActions"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"]>;
|
||||
default: unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"];
|
||||
};
|
||||
focusable: unknown extends Defaults["focusable"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"]>;
|
||||
default: unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"];
|
||||
};
|
||||
static: unknown extends Defaults["static"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"]>;
|
||||
default: unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"];
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
};
|
||||
export type VExpansionPanelSlots = {
|
||||
default: never;
|
||||
title: never;
|
||||
text: never;
|
||||
};
|
||||
export declare const VExpansionPanel: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
selectedClass?: 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;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, {
|
||||
groupItem: import("../../composables/group.js").GroupItemProvide;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
selectedClass?: 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;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, {
|
||||
groupItem: import("../../composables/group.js").GroupItemProvide;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
selectedClass?: 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;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
text?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, {
|
||||
groupItem: import("../../composables/group.js").GroupItemProvide;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, 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;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
eager: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
eager: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
text: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
}>>;
|
||||
export type VExpansionPanel = InstanceType<typeof VExpansionPanel>;
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Components
|
||||
import { VExpansionPanelSymbol } from "./shared.js";
|
||||
import { makeVExpansionPanelTextProps, VExpansionPanelText } from "./VExpansionPanelText.js";
|
||||
import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from "./VExpansionPanelTitle.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeGroupItemProps, useGroupItem } from "../../composables/group.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed, provide, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVExpansionPanelProps = propsFactory({
|
||||
title: String,
|
||||
text: String,
|
||||
bgColor: String,
|
||||
...makeElevationProps(),
|
||||
...makeGroupItemProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeVExpansionPanelTitleProps(),
|
||||
...makeVExpansionPanelTextProps()
|
||||
}, 'VExpansionPanel');
|
||||
export const VExpansionPanel = genericComponent()({
|
||||
name: 'VExpansionPanel',
|
||||
props: makeVExpansionPanelProps(),
|
||||
emits: {
|
||||
'group:selected': val => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const groupItem = useGroupItem(props, VExpansionPanelSymbol);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled);
|
||||
const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
|
||||
if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
|
||||
return arr;
|
||||
}, []));
|
||||
const isBeforeSelected = computed(() => {
|
||||
const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
|
||||
return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === 1);
|
||||
});
|
||||
const isAfterSelected = computed(() => {
|
||||
const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
|
||||
return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
|
||||
});
|
||||
provide(VExpansionPanelSymbol, groupItem);
|
||||
useRender(() => {
|
||||
const hasText = !!(slots.text || props.text);
|
||||
const hasTitle = !!(slots.title || props.title);
|
||||
const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
|
||||
const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-expansion-panel', {
|
||||
'v-expansion-panel--active': groupItem.isSelected.value,
|
||||
'v-expansion-panel--before-active': isBeforeSelected.value,
|
||||
'v-expansion-panel--after-active': isAfterSelected.value,
|
||||
'v-expansion-panel--disabled': isDisabled.value
|
||||
}, roundedClasses.value, backgroundColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-expansion-panel__shadow', ...elevationClasses.value])
|
||||
}, null), _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VExpansionPanelTitle: {
|
||||
...expansionPanelTitleProps
|
||||
},
|
||||
VExpansionPanelText: {
|
||||
...expansionPanelTextProps
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [hasTitle && _createVNode(VExpansionPanelTitle, {
|
||||
"key": "title"
|
||||
}, {
|
||||
default: () => [slots.title ? slots.title() : props.title]
|
||||
}), hasText && _createVNode(VExpansionPanelText, {
|
||||
"key": "text"
|
||||
}, {
|
||||
default: () => [slots.text ? slots.text() : props.text]
|
||||
}), slots.default?.()]
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {
|
||||
groupItem
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VExpansionPanel.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+215
@@ -0,0 +1,215 @@
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Theme
|
||||
.v-expansion-panel
|
||||
background-color: $expansion-panel-background-color
|
||||
color: $expansion-panel-color
|
||||
|
||||
&:not(:first-child)::after
|
||||
border-color: $expansion-panel-border-color
|
||||
|
||||
&--disabled
|
||||
.v-expansion-panel-title
|
||||
color: $expansion-panel-disabled-color
|
||||
|
||||
.v-expansion-panel-title__overlay
|
||||
// This is multiplied by the text opacity,
|
||||
// so we need to divide it to get the desired value
|
||||
// TODO: Should disabled be part of states mixin?
|
||||
opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity)
|
||||
|
||||
// Block
|
||||
.v-expansion-panels
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
list-style-type: none
|
||||
padding: 0
|
||||
width: 100%
|
||||
position: relative
|
||||
z-index: 1
|
||||
border-radius: $expansion-panel-border-radius
|
||||
|
||||
@include tools.layer('overrides')
|
||||
> :first-child
|
||||
border-top-left-radius: inherit
|
||||
border-top-right-radius: inherit
|
||||
|
||||
> :last-child
|
||||
border-bottom-left-radius: inherit
|
||||
border-bottom-right-radius: inherit
|
||||
|
||||
&:not(&--variant-accordion)
|
||||
> .v-expansion-panel--active
|
||||
border-radius: inherit
|
||||
|
||||
> .v-expansion-panel--before-active
|
||||
border-bottom-left-radius: inherit
|
||||
border-bottom-right-radius: inherit
|
||||
|
||||
> .v-expansion-panel--after-active
|
||||
border-top-left-radius: inherit
|
||||
border-top-right-radius: inherit
|
||||
|
||||
> :not(:first-child):not(.v-expansion-panel--after-active):not(.v-expansion-panel--active)
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
> :not(:last-child):not(.v-expansion-panel--before-active):not(.v-expansion-panel--active)
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
&--variant-accordion
|
||||
> :first-child:not(:last-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
> :last-child:not(:first-child)
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.v-expansion-panel-title--active
|
||||
border-bottom-left-radius: initial
|
||||
border-bottom-right-radius: initial
|
||||
|
||||
> :not(:first-child):not(:last-child)
|
||||
border-radius: 0
|
||||
|
||||
&--variant-accordion
|
||||
.v-expansion-panel-title__overlay
|
||||
transition: 0.3s border-radius settings.$standard-easing
|
||||
|
||||
// Element
|
||||
.v-expansion-panel
|
||||
flex: 1 0 100%
|
||||
max-width: 100%
|
||||
position: relative
|
||||
transition: .3s all settings.$standard-easing
|
||||
transition-property: margin-top, border-radius, border, max-width
|
||||
border-radius: $expansion-panel-border-radius
|
||||
|
||||
@media (prefers-reduced-motion: reduce)
|
||||
transition-property: border-radius, border
|
||||
|
||||
&:not(:first-child)::after
|
||||
border-top-style: solid
|
||||
border-top-width: thin
|
||||
content: ''
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: 0.3s opacity settings.$standard-easing
|
||||
|
||||
&--disabled
|
||||
.v-expansion-panel-title
|
||||
pointer-events: none
|
||||
|
||||
&--active
|
||||
&:not(:first-child),
|
||||
+ .v-expansion-panel
|
||||
margin-top: $expansion-panel-active-margin
|
||||
|
||||
&::after
|
||||
opacity: 0
|
||||
|
||||
> .v-expansion-panel-title
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
&:not(.v-expansion-panel-title--static)
|
||||
min-height: $expansion-panel-active-title-min-height
|
||||
|
||||
.v-expansion-panel__shadow
|
||||
border-radius: inherit
|
||||
z-index: -1
|
||||
@include tools.absolute()
|
||||
@include tools.elevation(1)
|
||||
|
||||
.v-expansion-panel-title
|
||||
background-color: transparent
|
||||
border: none
|
||||
margin: 0
|
||||
appearance: none
|
||||
align-items: center
|
||||
text-align: start
|
||||
border-radius: inherit
|
||||
display: flex
|
||||
font: inherit
|
||||
font-size: $expansion-panel-title-font-size
|
||||
line-height: 1
|
||||
min-height: $expansion-panel-title-min-height
|
||||
outline: none
|
||||
padding: $expansion-panel-title-padding
|
||||
position: relative
|
||||
width: 100%
|
||||
justify-content: space-between
|
||||
|
||||
@media (prefers-reduced-motion: no-preference)
|
||||
transition: .3s min-height settings.$standard-easing
|
||||
|
||||
@include tools.states('.v-expansion-panel-title__overlay', false)
|
||||
|
||||
&--focusable.v-expansion-panel-title--active
|
||||
@include tools.active-states('.v-expansion-panel-title__overlay')
|
||||
|
||||
.v-expansion-panel-title__overlay
|
||||
background-color: currentColor
|
||||
border-radius: inherit
|
||||
opacity: 0
|
||||
@include tools.absolute()
|
||||
|
||||
.v-expansion-panel-title__icon
|
||||
display: inline-flex
|
||||
margin-bottom: -4px
|
||||
margin-top: -4px
|
||||
user-select: none
|
||||
margin-inline-start: auto
|
||||
|
||||
.v-expansion-panel-text
|
||||
display: flex
|
||||
|
||||
&__wrapper
|
||||
padding: $expansion-panel-text-padding
|
||||
flex: 1 1 auto
|
||||
max-width: 100%
|
||||
|
||||
// Variants
|
||||
.v-expansion-panels--variant-accordion
|
||||
> .v-expansion-panel
|
||||
margin-top: 0
|
||||
|
||||
&::after
|
||||
opacity: 1
|
||||
|
||||
.v-expansion-panels--variant-popout
|
||||
> .v-expansion-panel
|
||||
max-width: $expansion-panel-popout-max-width
|
||||
|
||||
&--active
|
||||
max-width: $expansion-panel-popout-active-max-width
|
||||
|
||||
.v-expansion-panels--variant-inset
|
||||
> .v-expansion-panel
|
||||
max-width: $expansion-panel-inset-max-width
|
||||
|
||||
&--active
|
||||
max-width: $expansion-panel-inset-active-max-width
|
||||
|
||||
.v-expansion-panels--flat
|
||||
> .v-expansion-panel
|
||||
&::after
|
||||
border-top: none
|
||||
|
||||
.v-expansion-panel__shadow
|
||||
display: none
|
||||
|
||||
.v-expansion-panels--tile
|
||||
border-radius: 0
|
||||
|
||||
> .v-expansion-panel
|
||||
border-radius: 0
|
||||
Generated
Vendored
+117
@@ -0,0 +1,117 @@
|
||||
export declare const makeVExpansionPanelTextProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
eager?: 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>;
|
||||
};
|
||||
eager: unknown extends Defaults["eager"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"]>;
|
||||
default: unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"];
|
||||
};
|
||||
};
|
||||
export declare const VExpansionPanelText: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
eager: boolean;
|
||||
} & {
|
||||
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;
|
||||
eager: boolean;
|
||||
}, 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;
|
||||
eager: boolean;
|
||||
} & {
|
||||
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;
|
||||
eager: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
eager: boolean;
|
||||
} & {
|
||||
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;
|
||||
eager: boolean;
|
||||
}, {}, 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;
|
||||
};
|
||||
eager: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
eager: BooleanConstructor;
|
||||
}>>;
|
||||
export type VExpansionPanelText = InstanceType<typeof VExpansionPanelText>;
|
||||
Generated
Vendored
+38
@@ -0,0 +1,38 @@
|
||||
import { createElementVNode as _createElementVNode, vShow as _vShow, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { VExpansionPanelSymbol } from "./shared.js";
|
||||
import { VExpandTransition } from "../transitions/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeLazyProps, useLazy } from "../../composables/lazy.js"; // Utilities
|
||||
import { inject } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVExpansionPanelTextProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...makeLazyProps()
|
||||
}, 'VExpansionPanelText');
|
||||
export const VExpansionPanelText = genericComponent()({
|
||||
name: 'VExpansionPanelText',
|
||||
props: makeVExpansionPanelTextProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const expansionPanel = inject(VExpansionPanelSymbol);
|
||||
if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel');
|
||||
const {
|
||||
hasContent,
|
||||
onAfterLeave
|
||||
} = useLazy(props, expansionPanel.isSelected);
|
||||
useRender(() => _createVNode(VExpandTransition, {
|
||||
"onAfterLeave": onAfterLeave
|
||||
}, {
|
||||
default: () => [_withDirectives(_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-expansion-panel-text', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, [slots.default && hasContent.value && _createElementVNode("div", {
|
||||
"class": "v-expansion-panel-text__wrapper"
|
||||
}, [slots.default?.()])]), [[_vShow, expansionPanel.isSelected.value]])]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VExpansionPanelText.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VExpansionPanelText.js","names":["VExpansionPanelSymbol","VExpandTransition","makeComponentProps","makeLazyProps","useLazy","inject","genericComponent","propsFactory","useRender","makeVExpansionPanelTextProps","VExpansionPanelText","name","props","setup","slots","expansionPanel","Error","hasContent","onAfterLeave","isSelected","_createVNode","default","_withDirectives","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","value","_vShow"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanelText.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { VExpandTransition } from '@/components/transitions'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\n\n// Utilities\nimport { inject } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVExpansionPanelTextProps = propsFactory({\n ...makeComponentProps(),\n ...makeLazyProps(),\n}, 'VExpansionPanelText')\n\nexport const VExpansionPanelText = genericComponent()({\n name: 'VExpansionPanelText',\n\n props: makeVExpansionPanelTextProps(),\n\n setup (props, { slots }) {\n const expansionPanel = inject(VExpansionPanelSymbol)\n\n if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel')\n\n const { hasContent, onAfterLeave } = useLazy(props, expansionPanel.isSelected)\n\n useRender(() => (\n <VExpandTransition onAfterLeave={ onAfterLeave }>\n <div\n class={[\n 'v-expansion-panel-text',\n props.class,\n ]}\n style={ props.style }\n v-show={ expansionPanel.isSelected.value }\n >\n { slots.default && hasContent.value && (\n <div class=\"v-expansion-panel-text__wrapper\">\n { slots.default?.() }\n </div>\n )}\n </div>\n </VExpandTransition>\n ))\n\n return {}\n },\n})\n\nexport type VExpansionPanelText = InstanceType<typeof VExpansionPanelText>\n"],"mappings":";AAAA;AAAA,SACSA,qBAAqB;AAAA,SACrBC,iBAAiB,mCAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,aAAa,EAAEC,OAAO,qCAE/B;AACA,SAASC,MAAM,QAAQ,KAAK;AAAA,SACnBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,4BAA4B,GAAGF,YAAY,CAAC;EACvD,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGC,aAAa,CAAC;AACnB,CAAC,EAAE,qBAAqB,CAAC;AAEzB,OAAO,MAAMO,mBAAmB,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EACpDK,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAEH,4BAA4B,CAAC,CAAC;EAErCI,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAMC,cAAc,GAAGV,MAAM,CAACL,qBAAqB,CAAC;IAEpD,IAAI,CAACe,cAAc,EAAE,MAAM,IAAIC,KAAK,CAAC,8EAA8E,CAAC;IAEpH,MAAM;MAAEC,UAAU;MAAEC;IAAa,CAAC,GAAGd,OAAO,CAACQ,KAAK,EAAEG,cAAc,CAACI,UAAU,CAAC;IAE9EX,SAAS,CAAC,MAAAY,YAAA,CAAAnB,iBAAA;MAAA,gBAC0BiB;IAAY;MAAAG,OAAA,EAAAA,CAAA,MAAAC,eAAA,CAAAC,mBAAA;QAAA,SAAAC,eAAA,CAEnC,CACL,wBAAwB,EACxBZ,KAAK,CAACa,KAAK,CACZ;QAAA,SAAAC,eAAA,CACOd,KAAK,CAACe,KAAK;MAAA,IAGjBb,KAAK,CAACO,OAAO,IAAIJ,UAAU,CAACW,KAAK,IAAAL,mBAAA;QAAA;MAAA,IAE7BT,KAAK,CAACO,OAAO,GAAG,CAAC,EAEtB,MAAAQ,MAAA,EANQd,cAAc,CAACI,UAAU,CAACS,KAAK;IAAA,EAS7C,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
Generated
Vendored
+361
@@ -0,0 +1,361 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { RippleDirectiveBinding } from '../../directives/ripple/index.js';
|
||||
interface ExpansionPanelTitleSlot {
|
||||
collapseIcon: IconValue;
|
||||
disabled: boolean | undefined;
|
||||
expanded: boolean;
|
||||
expandIcon: IconValue;
|
||||
readonly: boolean;
|
||||
}
|
||||
export type VExpansionPanelTitleSlots = {
|
||||
default: ExpansionPanelTitleSlot;
|
||||
actions: ExpansionPanelTitleSlot;
|
||||
};
|
||||
export declare const makeVExpansionPanelTitleProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
color?: unknown;
|
||||
expandIcon?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
hideActions?: unknown;
|
||||
focusable?: unknown;
|
||||
static?: unknown;
|
||||
ripple?: unknown;
|
||||
readonly?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
hideActions: unknown extends Defaults["hideActions"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"]>;
|
||||
default: unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"];
|
||||
};
|
||||
focusable: unknown extends Defaults["focusable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"]>;
|
||||
default: unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"];
|
||||
};
|
||||
static: unknown extends Defaults["static"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"]>;
|
||||
default: unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
};
|
||||
export declare const VExpansionPanelTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ExpansionPanelTitleSlot) => 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;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: ExpansionPanelTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: (arg: ExpansionPanelTitleSlot) => 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;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
actions?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:actions"?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ExpansionPanelTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
expandIcon: IconValue;
|
||||
collapseIcon: IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: ExpansionPanelTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
actions: (arg: ExpansionPanelTitleSlot) => 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: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
}>>;
|
||||
export type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>;
|
||||
|
||||
Generated
Vendored
+88
@@ -0,0 +1,88 @@
|
||||
import { createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives } from "vue";
|
||||
// Components
|
||||
import { VExpansionPanelSymbol } from "./shared.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { IconValue } from "../../composables/icons.js"; // Directives
|
||||
import vRipple from "../../directives/ripple/index.js"; // Utilities
|
||||
import { computed, inject, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVExpansionPanelTitleProps = propsFactory({
|
||||
color: String,
|
||||
expandIcon: {
|
||||
type: IconValue,
|
||||
default: '$expand'
|
||||
},
|
||||
collapseIcon: {
|
||||
type: IconValue,
|
||||
default: '$collapse'
|
||||
},
|
||||
hideActions: Boolean,
|
||||
focusable: Boolean,
|
||||
static: Boolean,
|
||||
ripple: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
readonly: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps()
|
||||
}, 'VExpansionPanelTitle');
|
||||
export const VExpansionPanelTitle = genericComponent()({
|
||||
name: 'VExpansionPanelTitle',
|
||||
directives: {
|
||||
vRipple
|
||||
},
|
||||
props: makeVExpansionPanelTitleProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const expansionPanel = inject(VExpansionPanelSymbol);
|
||||
if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel');
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const slotProps = computed(() => ({
|
||||
collapseIcon: props.collapseIcon,
|
||||
disabled: expansionPanel.disabled.value,
|
||||
expanded: expansionPanel.isSelected.value,
|
||||
expandIcon: props.expandIcon,
|
||||
readonly: props.readonly
|
||||
}));
|
||||
const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
|
||||
useRender(() => _withDirectives(_createElementVNode("button", {
|
||||
"class": _normalizeClass(['v-expansion-panel-title', {
|
||||
'v-expansion-panel-title--active': expansionPanel.isSelected.value,
|
||||
'v-expansion-panel-title--focusable': props.focusable,
|
||||
'v-expansion-panel-title--static': props.static
|
||||
}, backgroundColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
|
||||
"type": "button",
|
||||
"tabindex": expansionPanel.disabled.value ? -1 : undefined,
|
||||
"disabled": expansionPanel.disabled.value,
|
||||
"aria-expanded": expansionPanel.isSelected.value,
|
||||
"onClick": !props.readonly ? expansionPanel.toggle : undefined
|
||||
}, [_createElementVNode("span", {
|
||||
"class": "v-expansion-panel-title__overlay"
|
||||
}, null), slots.default?.(slotProps.value), !props.hideActions && _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: icon.value
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createElementVNode("span", {
|
||||
"class": "v-expansion-panel-title__icon"
|
||||
}, [slots.actions?.(slotProps.value) ?? _createVNode(VIcon, null, null)])]
|
||||
})]), [[vRipple, props.ripple]]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VExpansionPanelTitle.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+514
@@ -0,0 +1,514 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
declare const allowedVariants: readonly ['default', 'accordion', 'inset', 'popout'];
|
||||
type Variant = (typeof allowedVariants)[number];
|
||||
export type VExpansionPanelSlot = {
|
||||
prev: () => void;
|
||||
next: () => void;
|
||||
};
|
||||
export type VExpansionPanelSlots = {
|
||||
default: VExpansionPanelSlot;
|
||||
};
|
||||
export declare const makeVExpansionPanelsProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
modelValue?: unknown;
|
||||
multiple?: unknown;
|
||||
mandatory?: unknown;
|
||||
max?: unknown;
|
||||
selectedClass?: unknown;
|
||||
disabled?: unknown;
|
||||
eager?: unknown;
|
||||
color?: unknown;
|
||||
expandIcon?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
hideActions?: unknown;
|
||||
focusable?: unknown;
|
||||
static?: unknown;
|
||||
ripple?: unknown;
|
||||
readonly?: unknown;
|
||||
bgColor?: unknown;
|
||||
flat?: unknown;
|
||||
variant?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: null;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
mandatory: unknown extends Defaults["mandatory"] ? PropType<"force" | boolean> : {
|
||||
type: PropType<unknown extends Defaults["mandatory"] ? "force" | boolean : "force" | boolean | Defaults["mandatory"]>;
|
||||
default: unknown extends Defaults["mandatory"] ? "force" | boolean : Defaults["mandatory"] | NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? NumberConstructor : {
|
||||
type: PropType<unknown extends Defaults["max"] ? number : number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? number : number | Defaults["max"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
eager: unknown extends Defaults["eager"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"]>;
|
||||
default: unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
hideActions: unknown extends Defaults["hideActions"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"]>;
|
||||
default: unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"];
|
||||
};
|
||||
focusable: unknown extends Defaults["focusable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"]>;
|
||||
default: unknown extends Defaults["focusable"] ? boolean : boolean | Defaults["focusable"];
|
||||
};
|
||||
static: unknown extends Defaults["static"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"]>;
|
||||
default: unknown extends Defaults["static"] ? boolean : boolean | Defaults["static"];
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
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>;
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"]>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean : boolean | Defaults["readonly"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "accordion" | "default" | "inset" | "popout" : "accordion" | "default" | "inset" | "popout" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "accordion" | "default" | "inset" | "popout" : Defaults["variant"] | NonNullable<"accordion" | "default" | "inset" | "popout">;
|
||||
};
|
||||
};
|
||||
export declare const VExpansionPanels: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (val: unknown) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VExpansionPanelSlot) => 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
color?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (val: unknown) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
eager: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
hideActions: boolean;
|
||||
focusable: boolean;
|
||||
static: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
readonly: boolean;
|
||||
flat: boolean;
|
||||
variant: "accordion" | "default" | "inset" | "popout";
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VExpansionPanelSlot) => 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 & (new <TModel>(props: {
|
||||
modelValue?: TModel;
|
||||
'onUpdate:modelValue'?: (value: TModel) => void;
|
||||
}, slots: VExpansionPanelSlots) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
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;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: PropType<boolean | 'force'>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
eager: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
bgColor: StringConstructor;
|
||||
flat: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
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;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: PropType<boolean | 'force'>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
eager: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
expandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
focusable: BooleanConstructor;
|
||||
static: BooleanConstructor;
|
||||
ripple: {
|
||||
type: PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
readonly: BooleanConstructor;
|
||||
bgColor: StringConstructor;
|
||||
flat: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
}>>;
|
||||
export type VExpansionPanels = InstanceType<typeof VExpansionPanels>;
|
||||
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VExpansionPanel.css";
|
||||
|
||||
// Components
|
||||
import { VExpansionPanelSymbol } from "./shared.js";
|
||||
import { makeVExpansionPanelProps } from "./VExpansionPanel.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeGroupProps, useGroup } from "../../composables/group.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
|
||||
export const makeVExpansionPanelsProps = propsFactory({
|
||||
flat: Boolean,
|
||||
...makeGroupProps(),
|
||||
...pick(makeVExpansionPanelProps(), ['bgColor', 'collapseIcon', 'color', 'eager', 'elevation', 'expandIcon', 'focusable', 'hideActions', 'readonly', 'ripple', 'static']),
|
||||
...makeRoundedProps(),
|
||||
...makeThemeProps(),
|
||||
...makeComponentProps(),
|
||||
...makeTagProps(),
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: v => allowedVariants.includes(v)
|
||||
}
|
||||
}, 'VExpansionPanels');
|
||||
export const VExpansionPanels = genericComponent()({
|
||||
name: 'VExpansionPanels',
|
||||
props: makeVExpansionPanelsProps(),
|
||||
emits: {
|
||||
'update:modelValue': val => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
next,
|
||||
prev
|
||||
} = useGroup(props, VExpansionPanelSymbol);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
|
||||
provideDefaults({
|
||||
VExpansionPanel: {
|
||||
bgColor: toRef(() => props.bgColor),
|
||||
collapseIcon: toRef(() => props.collapseIcon),
|
||||
color: toRef(() => props.color),
|
||||
eager: toRef(() => props.eager),
|
||||
elevation: toRef(() => props.elevation),
|
||||
expandIcon: toRef(() => props.expandIcon),
|
||||
focusable: toRef(() => props.focusable),
|
||||
hideActions: toRef(() => props.hideActions),
|
||||
readonly: toRef(() => props.readonly),
|
||||
ripple: toRef(() => props.ripple),
|
||||
static: toRef(() => props.static)
|
||||
}
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-expansion-panels', {
|
||||
'v-expansion-panels--flat': props.flat,
|
||||
'v-expansion-panels--tile': props.tile
|
||||
}, themeClasses.value, roundedClasses.value, variantClass.value, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [slots.default?.({
|
||||
prev,
|
||||
next
|
||||
})]
|
||||
}));
|
||||
return {
|
||||
next,
|
||||
prev
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VExpansionPanels.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+25
@@ -0,0 +1,25 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VExpansionPanel
|
||||
$expansion-panel-active-margin: 16px !default;
|
||||
$expansion-panel-background-color: rgb(var(--v-theme-surface)) !default;
|
||||
$expansion-panel-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
$expansion-panel-border-radius: settings.$border-radius-root !default;
|
||||
$expansion-panel-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$expansion-panel-disabled-opacity: 0.26 !default;
|
||||
$expansion-panel-disabled-color: tools.theme-color('on-surface', $expansion-panel-disabled-opacity) !default;
|
||||
$expansion-panel-disabled-overlay: 0.12 !default;
|
||||
$expansion-panel-inset-active-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;
|
||||
$expansion-panel-inset-max-width: 100% !default;
|
||||
$expansion-panel-popout-active-max-width: calc(100% + #{$expansion-panel-active-margin}) !default;
|
||||
$expansion-panel-popout-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default;
|
||||
|
||||
// VExpansionPanelTitle
|
||||
$expansion-panel-active-title-min-height: 64px !default;
|
||||
$expansion-panel-title-font-size: 0.9375rem !default;
|
||||
$expansion-panel-title-min-height: 48px !default;
|
||||
$expansion-panel-title-padding: 16px 24px !default;
|
||||
|
||||
// VExpansionPanelText
|
||||
$expansion-panel-text-padding: 8px 24px 16px !default;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VExpansionPanels } from './VExpansionPanels.js';
|
||||
export { VExpansionPanel } from './VExpansionPanel.js';
|
||||
export { VExpansionPanelText } from './VExpansionPanelText.js';
|
||||
export { VExpansionPanelTitle } from './VExpansionPanelTitle.js';
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export { VExpansionPanels } from "./VExpansionPanels.js";
|
||||
export { VExpansionPanel } from "./VExpansionPanel.js";
|
||||
export { VExpansionPanelText } from "./VExpansionPanelText.js";
|
||||
export { VExpansionPanelTitle } from "./VExpansionPanelTitle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VExpansionPanels","VExpansionPanel","VExpansionPanelText","VExpansionPanelTitle"],"sources":["../../../src/components/VExpansionPanel/index.ts"],"sourcesContent":["export { VExpansionPanels } from './VExpansionPanels'\nexport { VExpansionPanel } from './VExpansionPanel'\nexport { VExpansionPanelText } from './VExpansionPanelText'\nexport { VExpansionPanelTitle } from './VExpansionPanelTitle'\n"],"mappings":"SAASA,gBAAgB;AAAA,SAChBC,eAAe;AAAA,SACfC,mBAAmB;AAAA,SACnBC,oBAAoB","ignoreList":[]}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { InjectionKey } from 'vue';
|
||||
import type { GroupItemProvide } from '../../composables/group.js';
|
||||
export declare const VExpansionPanelSymbol: InjectionKey<GroupItemProvide>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Types
|
||||
|
||||
export const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
|
||||
//# sourceMappingURL=shared.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"shared.js","names":["VExpansionPanelSymbol","Symbol","for"],"sources":["../../../src/components/VExpansionPanel/shared.ts"],"sourcesContent":["// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')\n"],"mappings":"AAAA;;AAIA,OAAO,MAAMA,qBAAqD,GAAGC,MAAM,CAACC,GAAG,CAAC,2BAA2B,CAAC","ignoreList":[]}
|
||||
Reference in New Issue
Block a user