122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
// Styles
|
|
import "./VGrid.css";
|
|
|
|
// Composables
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { breakpoints } from "../../composables/display.mjs";
|
|
import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
|
|
import { capitalize, computed, h } from 'vue';
|
|
import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types
|
|
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 undefined;
|
|
}
|
|
if (prop) {
|
|
// alignSm -> Sm
|
|
const breakpoint = prop.replace(type, '');
|
|
className += `-${breakpoint}`;
|
|
}
|
|
// .align-items-sm-center
|
|
className += `-${val}`;
|
|
return className.toLowerCase();
|
|
}
|
|
export 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');
|
|
export const VRow = genericComponent()({
|
|
name: 'VRow',
|
|
props: makeVRowProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const classes = computed(() => {
|
|
const classList = [];
|
|
|
|
// Loop through `align`, `justify`, `alignContent` breakpoint props
|
|
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 () => h(props.tag, {
|
|
class: ['v-row', classes.value, props.class],
|
|
style: props.style
|
|
}, slots.default?.());
|
|
}
|
|
});
|
|
//# sourceMappingURL=VRow.mjs.map
|