<template>
  <div :class="['n-grid', wrapperClass, gapClasses]">
    <slot />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NGrid",

  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    spacing: {
      type: [Number, String],
      default: undefined,
    },
    xSpacing: {
      type: [Number, String],
      default: 5,
    },
    ySpacing: {
      type: [Number, String],
      default: 10,
    },
  },
  computed: {
    gapClasses() {
      const { spacing, xSpacing, ySpacing } = this;

      if (this.isValidType(spacing)) {
        return `n-gap-${spacing}`;
      }

      let classes = ``;

      if (this.isValidType(xSpacing)) {
        classes += ` n-gap-x-${xSpacing}`;
      }

      if (this.isValidType(ySpacing)) {
        classes += ` n-gap-y-${ySpacing}`;
      }

      return classes;
    },
  },
  methods: {
    isValidType(value) {
      return ["number", "string"].includes(typeof value);
    },
  },
});
</script>
