@inkline/inkline/components/IRow/script.mjs

Inkline is the Vue.js UI/UX Library built for creating your next design system

import { defineComponent } from 'vue';
import { breakpointKeys } from '../../constants/index.mjs';
import { breakpointClass, capitalizeFirst } from '../../helpers/index.mjs';
/**
 * Slot for default row content
 * @name default
 * @kind slot
 */
/**
 * Justify the content to the start of the row
 * @name start
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on extra-small screens
 * @name start-xs
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on small screens
 * @name start-sm
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on medium screens
 * @name start-md
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on large screens
 * @name start-lg
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on extra-large screens
 * @name start-xl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the start of the row on extra-extra-large screens
 * @name start-xxl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row
 * @name center
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on extra-small screens
 * @name center-xs
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on small screens
 * @name center-sm
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on medium screens
 * @name center-md
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on large screens
 * @name center-lg
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on extra-large screens
 * @name center-xl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the center of the row on extra-extra-large screens
 * @name center-xxl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row
 * @name end
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on extra-small screens
 * @name end-xs
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on small screens
 * @name end-sm
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on medium screens
 * @name end-md
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on large screens
 * @name end-lg
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on extra-large screens
 * @name end-xl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to the end of the row on extra-extra-large screens
 * @name end-xxl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row
 * @name top
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on extra-small screens
 * @name top-xs
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on small screens
 * @name top-sm
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on medium screens
 * @name top-md
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on large screens
 * @name top-lg
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on extra-large screens
 * @name top-xl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the top of the row on extra-extra-large screens
 * @name top-xxl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row
 * @name middle
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on extra-small screens
 * @name middle-xs
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on small screens
 * @name middle-sm
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on medium screens
 * @name middle-md
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on large screens
 * @name middle-lg
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on extra-large screens
 * @name middle-xl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the middle of the row on extra-extra-large screens
 * @name middle-xxl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row
 * @name bottom
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on extra-small screens
 * @name bottom-xs
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on small screens
 * @name bottom-sm
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on medium screens
 * @name bottom-md
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on large screens
 * @name bottom-lg
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on extra-large screens
 * @name bottom-xl
 * @type Boolean
 * @default false
 */
/**
 * Align the content to the bottom of the row on extra-extra-large screens
 * @name bottom-xxl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row
 * @name around
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on extra-small screens
 * @name around-xs
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on small screens
 * @name around-sm
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on medium screens
 * @name around-md
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on large screens
 * @name around-lg
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on extra-large screens
 * @name around-xl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space around each item inside the row on extra-extra-large screens
 * @name around-xxl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row
 * @name between
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on extra-small screens
 * @name between-xs
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on small screens
 * @name between-sm
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on medium screens
 * @name between-md
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on large screens
 * @name between-lg
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on extra-large screens
 * @name between-xl
 * @type Boolean
 * @default false
 */
/**
 * Justify the content to have space between each item inside the row on extra-extra-large screens
 * @name between-xxl
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row
 * @name reverse
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on extra-small screens
 * @name reverse-xs
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on small screens
 * @name reverse-sm
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on medium screens
 * @name reverse-md
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on large screens
 * @name reverse-lg
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on extra-large screens
 * @name reverse-xl
 * @type Boolean
 * @default false
 */
/**
 * Order the content in reverse order inside the row on extra-extra-large screens
 * @name reverse-xxl
 * @type Boolean
 * @default false
 */
const properties = {};
for (const breakpoint of breakpointKeys) {
    for (const property of ['start', 'center', 'end', 'top', 'middle', 'bottom', 'around', 'between', 'reverse']) {
        properties[`${property}${capitalizeFirst(breakpoint)}`] = {
            type: Boolean,
            default: false
        };
    }
}
const componentName = 'IRow';
export default defineComponent({
    name: componentName,
    props: {
        noGutter: {
            type: Boolean,
            default: false
        },
        noCollapse: {
            type: Boolean,
            default: false
        },
        ...properties
    },
    computed: {
        classes() {
            const responsiveClasses = Object.keys(properties)
                .reduce((acc, property) => {
                if (this[property]) {
                    acc[breakpointClass(`-${property}`, this[property])] = true;
                }
                return acc;
            }, {});
            return {
                '-no-gutter': this.noGutter,
                '-no-collapse': this.noCollapse,
                ...responsiveClasses
            };
        }
    }
});
//# sourceMappingURL=script.mjs.map