@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
83 lines • 2.24 kB
JavaScript
import { defineComponent } from 'vue';
import { defaultPropValue, sizePropValidator, colorVariantClass } from '../../mixins/index.mjs';
import IContainer from '../IContainer/index.vue';
import IRow from '../IRow/index.vue';
import IColumn from '../IColumn/index.vue';
/**
* Slot for default header content
* @name default
* @kind slot
*/
const componentName = 'IHeader';
export default defineComponent({
name: componentName,
components: {
IContainer,
IRow,
IColumn
},
props: {
/**
* The color variant of the header
* @type primary | light | dark
* @default light
* @name color
*/
color: {
type: String,
default: defaultPropValue(componentName, 'color')
},
/**
* Display the header background as cover, always covering the whole header width or height
* @type Boolean
* @default false
* @name cover
*/
cover: {
type: Boolean,
default: false
},
/**
* Display the inner content container as fluid, covering 100% of the header width
* @type Boolean
* @default false
* @name fluid
*/
fluid: {
type: Boolean,
default: false
},
/**
* Display the header as fullscreen, covering 100% screen height and 100% screen width
* @type Boolean
* @default true
* @name fullscreen
*/
fullscreen: {
type: Boolean,
default: false
},
/**
* The size variant of the header
* @type sm | md | lg
* @default md
* @name size
*/
size: {
type: String,
default: defaultPropValue(componentName, 'size'),
validator: sizePropValidator
}
},
computed: {
classes() {
return {
...colorVariantClass(this),
[`-${this.size}`]: Boolean(this.size),
'-cover': this.cover,
'-fullscreen': this.fullscreen
};
}
}
});
//# sourceMappingURL=script.mjs.map