@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
60 lines • 1.59 kB
JavaScript
import { defineComponent } from 'vue';
import { defaultPropValue, colorVariantClass } from '../../mixins/index.mjs';
const componentName = 'IHamburgerMenu';
export default defineComponent({
name: componentName,
props: {
/**
* The animation of the hamburger menu
* @type close | arrow-up | arrow-down | arrow-left | arrow-right | plus | minus
* @default close
* @name animation
*/
animation: {
type: String,
default: 'close'
},
/**
* The color variant of the hamburger menu
* @type light | dark
* @default light
* @name color
*/
color: {
type: String,
default: defaultPropValue(componentName, 'color')
},
/**
* Used to set the hamburger menu as opened or closed
* @type Boolean
* @default false
* @name modelValue
*/
modelValue: {
type: Boolean,
default: false
}
},
emits: [
/**
* Event emitted for setting the modelValue
* @event update:modelValue
*/
'update:modelValue'
],
computed: {
classes() {
return {
...colorVariantClass(this),
'-active': this.modelValue,
[`-${this.animation}`]: true
};
}
},
methods: {
onClick() {
this.$emit('update:modelValue', !this.modelValue);
}
}
});
//# sourceMappingURL=script.mjs.map