// Styles
import "./VGrid.sass"; // Composables

import { makeTagProps } from "../../composables/tag.mjs"; // Utilities

import { capitalize, computed, defineComponent, h } from 'vue';
import { makeProps } from "../../util/index.mjs"; // Types

const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs

const breakpointProps = (() => {
  return breakpoints.reduce((props, val) => {
    props[val] = {
      type: [Boolean, String, Number],
      default: false
    };
    return props;
  }, {});
})();

const offsetProps = (() => {
  return breakpoints.reduce((props, val) => {
    props['offset' + capitalize(val)] = {
      type: [String, Number],
      default: null
    };
    return props;
  }, {});
})();

const orderProps = (() => {
  return breakpoints.reduce((props, val) => {
    props['order' + capitalize(val)] = {
      type: [String, Number],
      default: null
    };
    return props;
  }, {});
})();

const propMap = {
  col: Object.keys(breakpointProps),
  offset: Object.keys(offsetProps),
  order: Object.keys(orderProps)
};

function breakpointClass(type, prop, val) {
  let className = type;

  if (val == null || val === false) {
    return undefined;
  }

  if (prop) {
    const breakpoint = prop.replace(type, '');
    className += "-".concat(breakpoint);
  }

  if (type === 'col') {
    className = 'v-' + className;
  } // Handling the boolean style prop when accepting [Boolean, String, Number]
  // means Vue will not convert <v-col sm></v-col> to sm: true for us.
  // Since the default is false, an empty string indicates the prop's presence.


  if (type === 'col' && (val === '' || val === true)) {
    // .v-col-md
    return className.toLowerCase();
  } // .order-md-6


  className += "-".concat(val);
  return className.toLowerCase();
}

export default defineComponent({
  name: 'VCol',
  props: makeProps({
    cols: {
      type: [Boolean, String, Number],
      default: false
    },
    ...breakpointProps,
    offset: {
      type: [String, Number],
      default: null
    },
    ...offsetProps,
    order: {
      type: [String, Number],
      default: null
    },
    ...orderProps,
    alignSelf: {
      type: String,
      default: null,
      validator: str => ['auto', 'start', 'end', 'center', 'baseline', 'stretch'].includes(str)
    },
    ...makeTagProps()
  }),

  setup(props, {
    slots
  }) {
    const classes = computed(() => {
      const classList = []; // Loop through `col`, `offset`, `order` breakpoint props

      let type;

      for (type in propMap) {
        propMap[type].forEach(prop => {
          const value = props[prop];
          const className = breakpointClass(type, prop, value);
          if (className) classList.push(className);
        });
      }

      const hasColClasses = classList.some(className => className.startsWith('v-col-'));
      classList.push({
        // Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified.
        'v-col': !hasColClasses || !props.cols,
        ["v-col-".concat(props.cols)]: props.cols,
        ["offset-".concat(props.offset)]: props.offset,
        ["order-".concat(props.order)]: props.order,
        ["align-self-".concat(props.alignSelf)]: props.alignSelf
      });
      return classList;
    });
    return () => h(props.tag, {
      class: classes.value
    }, slots.default == null ? void 0 : slots.default());
  }

});
//# sourceMappingURL=VCol.mjs.map