123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- // 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 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 = {
- col: Object.keys(breakpointProps),
- offset: Object.keys(offsetProps),
- order: Object.keys(orderProps)
- };
- function breakpointClass(type, prop, val) {
- let className = type;
- if (val == null || val === false) {
- return undefined;
- }
- if (prop) {
- const breakpoint = prop.replace(type, '');
- className += `-${breakpoint}`;
- }
- if (type === 'col') {
- className = 'v-' + className;
- }
- // Handling the boolean style prop when accepting [Boolean, String, Number]
- // means Vue will not convert <v-col sm></v-col> to sm: true for us.
- // Since the default is false, an empty string indicates the prop's presence.
- if (type === 'col' && (val === '' || val === true)) {
- // .v-col-md
- return className.toLowerCase();
- }
- // .order-md-6
- className += `-${val}`;
- return className.toLowerCase();
- }
- const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
- export 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');
- export const VCol = genericComponent()({
- name: 'VCol',
- props: makeVColProps(),
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const classes = computed(() => {
- const classList = [];
- // Loop through `col`, `offset`, `order` 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);
- });
- }
- 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 () => h(props.tag, {
- class: [classes.value, props.class],
- style: props.style
- }, slots.default?.());
- }
- });
- //# sourceMappingURL=VCol.mjs.map
|