586 lines
18 KiB
JavaScript
586 lines
18 KiB
JavaScript
import { createVNode, capitalize, computed, h, Fragment, withDirectives, mergeProps, resolveDirective } from 'vue';
|
|
import { t as propsFactory, v as makeComponentProps, x as makeDimensionProps, C as makeTagProps, l as genericComponent, af as useRtl, K as useDimension, o as useRender, aX as breakpoints, ah as provideDefaults, q as createSimpleFunctional, I as IconValue, w as makeDensityProps, a1 as VAvatar, f as VIcon, S as VDefaultsProvider, ad as makeBorderProps, y as makeElevationProps, aP as makeLoaderProps, z as makeLocationProps, A as makePositionProps, B as makeRoundedProps, az as makeRouterProps, D as makeThemeProps, E as makeVariantProps, an as Ripple, G as provideTheme, aA as useBorder, H as useVariant, J as useDensity, L as useElevation, aQ as useLoader, M as useLocation, N as usePosition, O as useRounded, aD as useLink, aY as VImg, aR as LoaderSlot, R as genOverlays } from './server.mjs';
|
|
|
|
const makeVContainerProps = propsFactory({
|
|
fluid: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
...makeComponentProps(),
|
|
...makeDimensionProps(),
|
|
...makeTagProps()
|
|
}, "VContainer");
|
|
const VContainer = genericComponent()({
|
|
name: "VContainer",
|
|
props: makeVContainerProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
rtlClasses
|
|
} = useRtl();
|
|
const {
|
|
dimensionStyles
|
|
} = useDimension(props);
|
|
useRender(() => createVNode(props.tag, {
|
|
"class": ["v-container", {
|
|
"v-container--fluid": props.fluid
|
|
}, rtlClasses.value, props.class],
|
|
"style": [dimensionStyles.value, props.style]
|
|
}, slots));
|
|
return {};
|
|
}
|
|
});
|
|
const breakpointProps = (() => {
|
|
return breakpoints.reduce((props, val) => {
|
|
props[val] = {
|
|
type: [Boolean, String, Number],
|
|
default: false
|
|
};
|
|
return props;
|
|
}, {});
|
|
})();
|
|
const offsetProps = (() => {
|
|
return breakpoints.reduce((props, val) => {
|
|
const offsetKey = "offset" + capitalize(val);
|
|
props[offsetKey] = {
|
|
type: [String, Number],
|
|
default: null
|
|
};
|
|
return props;
|
|
}, {});
|
|
})();
|
|
const orderProps = (() => {
|
|
return breakpoints.reduce((props, val) => {
|
|
const orderKey = "order" + capitalize(val);
|
|
props[orderKey] = {
|
|
type: [String, Number],
|
|
default: null
|
|
};
|
|
return props;
|
|
}, {});
|
|
})();
|
|
const propMap$1 = {
|
|
col: Object.keys(breakpointProps),
|
|
offset: Object.keys(offsetProps),
|
|
order: Object.keys(orderProps)
|
|
};
|
|
function breakpointClass$1(type, prop, val) {
|
|
let className = type;
|
|
if (val == null || val === false) {
|
|
return void 0;
|
|
}
|
|
if (prop) {
|
|
const breakpoint = prop.replace(type, "");
|
|
className += `-${breakpoint}`;
|
|
}
|
|
if (type === "col") {
|
|
className = "v-" + className;
|
|
}
|
|
if (type === "col" && (val === "" || val === true)) {
|
|
return className.toLowerCase();
|
|
}
|
|
className += `-${val}`;
|
|
return className.toLowerCase();
|
|
}
|
|
const ALIGN_SELF_VALUES = ["auto", "start", "end", "center", "baseline", "stretch"];
|
|
const makeVColProps = propsFactory({
|
|
cols: {
|
|
type: [Boolean, String, Number],
|
|
default: false
|
|
},
|
|
...breakpointProps,
|
|
offset: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
...offsetProps,
|
|
order: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
...orderProps,
|
|
alignSelf: {
|
|
type: String,
|
|
default: null,
|
|
validator: (str) => ALIGN_SELF_VALUES.includes(str)
|
|
},
|
|
...makeComponentProps(),
|
|
...makeTagProps()
|
|
}, "VCol");
|
|
const VCol = genericComponent()({
|
|
name: "VCol",
|
|
props: makeVColProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const classes = computed(() => {
|
|
const classList = [];
|
|
let type;
|
|
for (type in propMap$1) {
|
|
propMap$1[type].forEach((prop) => {
|
|
const value = props[prop];
|
|
const className = breakpointClass$1(type, prop, value);
|
|
if (className) classList.push(className);
|
|
});
|
|
}
|
|
const hasColClasses = classList.some((className) => className.startsWith("v-col-"));
|
|
classList.push({
|
|
// Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified.
|
|
"v-col": !hasColClasses || !props.cols,
|
|
[`v-col-${props.cols}`]: props.cols,
|
|
[`offset-${props.offset}`]: props.offset,
|
|
[`order-${props.order}`]: props.order,
|
|
[`align-self-${props.alignSelf}`]: props.alignSelf
|
|
});
|
|
return classList;
|
|
});
|
|
return () => {
|
|
var _a;
|
|
return h(props.tag, {
|
|
class: [classes.value, props.class],
|
|
style: props.style
|
|
}, (_a = slots.default) == null ? void 0 : _a.call(slots));
|
|
};
|
|
}
|
|
});
|
|
const ALIGNMENT = ["start", "end", "center"];
|
|
const SPACE = ["space-between", "space-around", "space-evenly"];
|
|
function makeRowProps(prefix, def) {
|
|
return breakpoints.reduce((props, val) => {
|
|
const prefixKey = prefix + capitalize(val);
|
|
props[prefixKey] = def();
|
|
return props;
|
|
}, {});
|
|
}
|
|
const ALIGN_VALUES = [...ALIGNMENT, "baseline", "stretch"];
|
|
const alignValidator = (str) => ALIGN_VALUES.includes(str);
|
|
const alignProps = makeRowProps("align", () => ({
|
|
type: String,
|
|
default: null,
|
|
validator: alignValidator
|
|
}));
|
|
const JUSTIFY_VALUES = [...ALIGNMENT, ...SPACE];
|
|
const justifyValidator = (str) => JUSTIFY_VALUES.includes(str);
|
|
const justifyProps = makeRowProps("justify", () => ({
|
|
type: String,
|
|
default: null,
|
|
validator: justifyValidator
|
|
}));
|
|
const ALIGN_CONTENT_VALUES = [...ALIGNMENT, ...SPACE, "stretch"];
|
|
const alignContentValidator = (str) => ALIGN_CONTENT_VALUES.includes(str);
|
|
const alignContentProps = makeRowProps("alignContent", () => ({
|
|
type: String,
|
|
default: null,
|
|
validator: alignContentValidator
|
|
}));
|
|
const propMap = {
|
|
align: Object.keys(alignProps),
|
|
justify: Object.keys(justifyProps),
|
|
alignContent: Object.keys(alignContentProps)
|
|
};
|
|
const classMap = {
|
|
align: "align",
|
|
justify: "justify",
|
|
alignContent: "align-content"
|
|
};
|
|
function breakpointClass(type, prop, val) {
|
|
let className = classMap[type];
|
|
if (val == null) {
|
|
return void 0;
|
|
}
|
|
if (prop) {
|
|
const breakpoint = prop.replace(type, "");
|
|
className += `-${breakpoint}`;
|
|
}
|
|
className += `-${val}`;
|
|
return className.toLowerCase();
|
|
}
|
|
const makeVRowProps = propsFactory({
|
|
dense: Boolean,
|
|
noGutters: Boolean,
|
|
align: {
|
|
type: String,
|
|
default: null,
|
|
validator: alignValidator
|
|
},
|
|
...alignProps,
|
|
justify: {
|
|
type: String,
|
|
default: null,
|
|
validator: justifyValidator
|
|
},
|
|
...justifyProps,
|
|
alignContent: {
|
|
type: String,
|
|
default: null,
|
|
validator: alignContentValidator
|
|
},
|
|
...alignContentProps,
|
|
...makeComponentProps(),
|
|
...makeTagProps()
|
|
}, "VRow");
|
|
const VRow = genericComponent()({
|
|
name: "VRow",
|
|
props: makeVRowProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const classes = computed(() => {
|
|
const classList = [];
|
|
let type;
|
|
for (type in propMap) {
|
|
propMap[type].forEach((prop) => {
|
|
const value = props[prop];
|
|
const className = breakpointClass(type, prop, value);
|
|
if (className) classList.push(className);
|
|
});
|
|
}
|
|
classList.push({
|
|
"v-row--no-gutters": props.noGutters,
|
|
"v-row--dense": props.dense,
|
|
[`align-${props.align}`]: props.align,
|
|
[`justify-${props.justify}`]: props.justify,
|
|
[`align-content-${props.alignContent}`]: props.alignContent
|
|
});
|
|
return classList;
|
|
});
|
|
return () => {
|
|
var _a;
|
|
return h(props.tag, {
|
|
class: ["v-row", classes.value, props.class],
|
|
style: props.style
|
|
}, (_a = slots.default) == null ? void 0 : _a.call(slots));
|
|
};
|
|
}
|
|
});
|
|
const VCardActions = genericComponent()({
|
|
name: "VCardActions",
|
|
props: makeComponentProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
provideDefaults({
|
|
VBtn: {
|
|
slim: true,
|
|
variant: "text"
|
|
}
|
|
});
|
|
useRender(() => {
|
|
var _a;
|
|
return createVNode("div", {
|
|
"class": ["v-card-actions", props.class],
|
|
"style": props.style
|
|
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
const makeVCardSubtitleProps = propsFactory({
|
|
opacity: [Number, String],
|
|
...makeComponentProps(),
|
|
...makeTagProps()
|
|
}, "VCardSubtitle");
|
|
const VCardSubtitle = genericComponent()({
|
|
name: "VCardSubtitle",
|
|
props: makeVCardSubtitleProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => createVNode(props.tag, {
|
|
"class": ["v-card-subtitle", props.class],
|
|
"style": [{
|
|
"--v-card-subtitle-opacity": props.opacity
|
|
}, props.style]
|
|
}, slots));
|
|
return {};
|
|
}
|
|
});
|
|
const VCardTitle = createSimpleFunctional("v-card-title");
|
|
const makeCardItemProps = propsFactory({
|
|
appendAvatar: String,
|
|
appendIcon: IconValue,
|
|
prependAvatar: String,
|
|
prependIcon: IconValue,
|
|
subtitle: [String, Number],
|
|
title: [String, Number],
|
|
...makeComponentProps(),
|
|
...makeDensityProps()
|
|
}, "VCardItem");
|
|
const VCardItem = genericComponent()({
|
|
name: "VCardItem",
|
|
props: makeCardItemProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => {
|
|
var _a;
|
|
const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
|
|
const hasPrepend = !!(hasPrependMedia || slots.prepend);
|
|
const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
|
|
const hasAppend = !!(hasAppendMedia || slots.append);
|
|
const hasTitle = !!(props.title != null || slots.title);
|
|
const hasSubtitle = !!(props.subtitle != null || slots.subtitle);
|
|
return createVNode("div", {
|
|
"class": ["v-card-item", props.class],
|
|
"style": props.style
|
|
}, [hasPrepend && createVNode("div", {
|
|
"key": "prepend",
|
|
"class": "v-card-item__prepend"
|
|
}, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
|
|
"key": "prepend-avatar",
|
|
"density": props.density,
|
|
"image": props.prependAvatar
|
|
}, null), props.prependIcon && createVNode(VIcon, {
|
|
"key": "prepend-icon",
|
|
"density": props.density,
|
|
"icon": props.prependIcon
|
|
}, null)]) : createVNode(VDefaultsProvider, {
|
|
"key": "prepend-defaults",
|
|
"disabled": !hasPrependMedia,
|
|
"defaults": {
|
|
VAvatar: {
|
|
density: props.density,
|
|
image: props.prependAvatar
|
|
},
|
|
VIcon: {
|
|
density: props.density,
|
|
icon: props.prependIcon
|
|
}
|
|
}
|
|
}, slots.prepend)]), createVNode("div", {
|
|
"class": "v-card-item__content"
|
|
}, [hasTitle && createVNode(VCardTitle, {
|
|
"key": "title"
|
|
}, {
|
|
default: () => {
|
|
var _a3;
|
|
var _a2;
|
|
return [(_a3 = (_a2 = slots.title) == null ? void 0 : _a2.call(slots)) != null ? _a3 : props.title];
|
|
}
|
|
}), hasSubtitle && createVNode(VCardSubtitle, {
|
|
"key": "subtitle"
|
|
}, {
|
|
default: () => {
|
|
var _a3;
|
|
var _a2;
|
|
return [(_a3 = (_a2 = slots.subtitle) == null ? void 0 : _a2.call(slots)) != null ? _a3 : props.subtitle];
|
|
}
|
|
}), (_a = slots.default) == null ? void 0 : _a.call(slots)]), hasAppend && createVNode("div", {
|
|
"key": "append",
|
|
"class": "v-card-item__append"
|
|
}, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
|
|
"key": "append-icon",
|
|
"density": props.density,
|
|
"icon": props.appendIcon
|
|
}, null), props.appendAvatar && createVNode(VAvatar, {
|
|
"key": "append-avatar",
|
|
"density": props.density,
|
|
"image": props.appendAvatar
|
|
}, null)]) : createVNode(VDefaultsProvider, {
|
|
"key": "append-defaults",
|
|
"disabled": !hasAppendMedia,
|
|
"defaults": {
|
|
VAvatar: {
|
|
density: props.density,
|
|
image: props.appendAvatar
|
|
},
|
|
VIcon: {
|
|
density: props.density,
|
|
icon: props.appendIcon
|
|
}
|
|
}
|
|
}, slots.append)])]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
const makeVCardTextProps = propsFactory({
|
|
opacity: [Number, String],
|
|
...makeComponentProps(),
|
|
...makeTagProps()
|
|
}, "VCardText");
|
|
const VCardText = genericComponent()({
|
|
name: "VCardText",
|
|
props: makeVCardTextProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => createVNode(props.tag, {
|
|
"class": ["v-card-text", props.class],
|
|
"style": [{
|
|
"--v-card-text-opacity": props.opacity
|
|
}, props.style]
|
|
}, slots));
|
|
return {};
|
|
}
|
|
});
|
|
const makeVCardProps = propsFactory({
|
|
appendAvatar: String,
|
|
appendIcon: IconValue,
|
|
disabled: Boolean,
|
|
flat: Boolean,
|
|
hover: Boolean,
|
|
image: String,
|
|
link: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
prependAvatar: String,
|
|
prependIcon: IconValue,
|
|
ripple: {
|
|
type: [Boolean, Object],
|
|
default: true
|
|
},
|
|
subtitle: [String, Number],
|
|
text: [String, Number],
|
|
title: [String, Number],
|
|
...makeBorderProps(),
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeDimensionProps(),
|
|
...makeElevationProps(),
|
|
...makeLoaderProps(),
|
|
...makeLocationProps(),
|
|
...makePositionProps(),
|
|
...makeRoundedProps(),
|
|
...makeRouterProps(),
|
|
...makeTagProps(),
|
|
...makeThemeProps(),
|
|
...makeVariantProps({
|
|
variant: "elevated"
|
|
})
|
|
}, "VCard");
|
|
const VCard = genericComponent()({
|
|
name: "VCard",
|
|
directives: {
|
|
Ripple
|
|
},
|
|
props: makeVCardProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
borderClasses
|
|
} = useBorder(props);
|
|
const {
|
|
colorClasses,
|
|
colorStyles,
|
|
variantClasses
|
|
} = useVariant(props);
|
|
const {
|
|
densityClasses
|
|
} = useDensity(props);
|
|
const {
|
|
dimensionStyles
|
|
} = useDimension(props);
|
|
const {
|
|
elevationClasses
|
|
} = useElevation(props);
|
|
const {
|
|
loaderClasses
|
|
} = useLoader(props);
|
|
const {
|
|
locationStyles
|
|
} = useLocation(props);
|
|
const {
|
|
positionClasses
|
|
} = usePosition(props);
|
|
const {
|
|
roundedClasses
|
|
} = useRounded(props);
|
|
const link = useLink(props, attrs);
|
|
const isLink = computed(() => props.link !== false && link.isLink.value);
|
|
const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value));
|
|
useRender(() => {
|
|
const Tag = isLink.value ? "a" : props.tag;
|
|
const hasTitle = !!(slots.title || props.title != null);
|
|
const hasSubtitle = !!(slots.subtitle || props.subtitle != null);
|
|
const hasHeader = hasTitle || hasSubtitle;
|
|
const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
|
|
const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
|
|
const hasImage = !!(slots.image || props.image);
|
|
const hasCardItem = hasHeader || hasPrepend || hasAppend;
|
|
const hasText = !!(slots.text || props.text != null);
|
|
return withDirectives(createVNode(Tag, mergeProps({
|
|
"class": ["v-card", {
|
|
"v-card--disabled": props.disabled,
|
|
"v-card--flat": props.flat,
|
|
"v-card--hover": props.hover && !(props.disabled || props.flat),
|
|
"v-card--link": isClickable.value
|
|
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
|
|
"style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
|
|
"onClick": isClickable.value && link.navigate,
|
|
"tabindex": props.disabled ? -1 : void 0
|
|
}, link.linkProps), {
|
|
default: () => {
|
|
var _a;
|
|
return [hasImage && createVNode("div", {
|
|
"key": "image",
|
|
"class": "v-card__image"
|
|
}, [!slots.image ? createVNode(VImg, {
|
|
"key": "image-img",
|
|
"cover": true,
|
|
"src": props.image
|
|
}, null) : createVNode(VDefaultsProvider, {
|
|
"key": "image-defaults",
|
|
"disabled": !props.image,
|
|
"defaults": {
|
|
VImg: {
|
|
cover: true,
|
|
src: props.image
|
|
}
|
|
}
|
|
}, slots.image)]), createVNode(LoaderSlot, {
|
|
"name": "v-card",
|
|
"active": !!props.loading,
|
|
"color": typeof props.loading === "boolean" ? void 0 : props.loading
|
|
}, {
|
|
default: slots.loader
|
|
}), hasCardItem && createVNode(VCardItem, {
|
|
"key": "item",
|
|
"prependAvatar": props.prependAvatar,
|
|
"prependIcon": props.prependIcon,
|
|
"title": props.title,
|
|
"subtitle": props.subtitle,
|
|
"appendAvatar": props.appendAvatar,
|
|
"appendIcon": props.appendIcon
|
|
}, {
|
|
default: slots.item,
|
|
prepend: slots.prepend,
|
|
title: slots.title,
|
|
subtitle: slots.subtitle,
|
|
append: slots.append
|
|
}), hasText && createVNode(VCardText, {
|
|
"key": "text"
|
|
}, {
|
|
default: () => {
|
|
var _a3;
|
|
var _a2;
|
|
return [(_a3 = (_a2 = slots.text) == null ? void 0 : _a2.call(slots)) != null ? _a3 : props.text];
|
|
}
|
|
}), (_a = slots.default) == null ? void 0 : _a.call(slots), slots.actions && createVNode(VCardActions, null, {
|
|
default: slots.actions
|
|
}), genOverlays(isClickable.value, "v-card")];
|
|
}
|
|
}), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
|
|
export { VCard as V, VCardTitle as a, VCardText as b, VContainer as c, VRow as d, VCol as e };
|
|
//# sourceMappingURL=VCard-BaBxGxNH.mjs.map
|