@coreui/vue/dist/cjs/components/navbar/CNavbar.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var props = require('../../props.js');

const CNavbar = vue.defineComponent({
    name: 'CNavbar',
    props: {
        /**
         * Component used for the root node. Either a string to use a HTML element or a component.
         */
        as: {
            type: String,
            default: 'nav',
        },
        /**
         * Sets the color context of the component to one of CoreUI’s themed colors.
         *
         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
         */
        color: props.Color,
        /**
         * Sets if the color of text should be colored for a light or dark dark background.
         *
         * @values 'dark', 'light'
         */
        colorScheme: {
            type: String,
            validator: (value) => {
                return ['dark', 'light'].includes(value);
            },
        },
        /**
         * Defines optional container wrapping children elements.
         *
         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'
         */
        container: {
            type: [Boolean, String],
            validator: (value) => {
                return (typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value));
            },
        },
        /**
         * Defines the responsive breakpoint to determine when content collapses.
         *
         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
         */
        expand: {
            type: [Boolean, String],
            validator: (value) => {
                return typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
            },
        },
        /**
         * Place component in non-static positions.
         *
         * @values 'fixed-top', 'fixed-bottom', 'sticky-top'
         */
        placement: {
            type: String,
            validator: (value) => {
                return ['fixed-top', 'fixed-bottom', 'sticky-top'].includes(value);
            },
        },
    },
    setup(props, { slots }) {
        return () => vue.h(props.as, {
            class: [
                'navbar',
                {
                    [`bg-${props.color}`]: props.color,
                    [typeof props.expand === 'boolean'
                        ? 'navbar-expand'
                        : `navbar-expand-${props.expand}`]: props.expand,
                },
                props.placement,
            ],
            ...(props.colorScheme && { 'data-coreui-theme': props.colorScheme }),
        }, props.container
            ? vue.h('div', { class: [`container${props.container === true ? '' : '-' + props.container}`] }, slots.default && slots.default())
            : slots.default && slots.default());
    },
});

exports.CNavbar = CNavbar;
//# sourceMappingURL=CNavbar.js.map