<script setup>
import { computed } from "vue";
const props = defineProps({
  md: { type: [Number, String], required: false, default: 12 },
  sm: { type: [Number, String], required: false, default: 12 },
  xs: { type: [Number, String], required: false, default: 12 },
  gutter: { type: String, required: false, default: "md" }
});
const classes = computed(() => {
  return {
    "col-12": true,
    // default class "col-12
    [`col-md-${props.md}`]: true,
    [`col-sm-${props.sm}`]: true,
    [`col-xs-${props.xs}`]: true
  };
});
</script>

<template>
    <div :class="classes">
        <div :class="`q-gutter-${props.gutter}`">
            <slot></slot>
        </div>
    </div>
</template>
