@braid/griddle/dist/vue/index.js

A visual grid overlay and Sass mixin system to help with your front-end development

import{h}from"vue";export default{props:{columnNumbers:{type:Boolean,default:!0},columnBorders:{type:Boolean,default:!0},visible:{type:Boolean,default:!1}},render(){return this.computedVisible?h("div",{ref:"griddle",class:["griddle-container"],"data-column-numbers":this.columnNumbers,"data-column-borders":this.columnBorders},new Array(this.numberOfColumns).fill("").map((e,t)=>h("div",{key:t,class:["griddle-column"]}))):null},data(){return{internalVisible:!1,numberOfColumns:0,tickInterval:null}},computed:{computedVisible(){return this.visible||this.internalVisible}},watch:{visible:{immediate:!0,handler(){this.internalVisible=this.visible,this.renderGriddle()}}},mounted(){window.addEventListener("keyup",e=>{e.ctrlKey&&e.shiftKey&&76===e.which&&(this.internalVisible=!this.internalVisible,this.renderGriddle())}),window.addEventListener("resize",()=>{this.setScrollbarWidth()}),this.setScrollbarWidth(),this.setGriddleBooted()},methods:{countColumns(){Object.keys(this.$refs).length&&this.$refs.griddle&&(this.numberOfColumns=getComputedStyle(this.$refs.griddle).gridTemplateColumns.split(" ").length)},setScrollbarWidth(){document.documentElement.style.setProperty("--scrollbar-width",window.innerWidth-document.documentElement.clientWidth+"px")},setGriddleBooted(){document.documentElement.setAttribute("data-griddle-booted",!0)},renderGriddle(){this.$emit("toggle",this.internalVisible),this.computedVisible?(this.$nextTick(()=>{this.countColumns()}),this.tickInterval=setInterval(()=>{this.countColumns()},1e3)):clearInterval(this.tickInterval)}}};