<script>
import { computed, defineComponent } from "vue";
import { breakpointClassName } from "@inkline/inkline/utils";
const componentName = "IRow";
export default defineComponent({
  name: componentName,
  inheritAttrs: false,
  props: {
    /**
     * Justify the content to the start of the row
     * @name start
     * @type Boolean
     * @default false
     */
    start: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on extra-small screens
     * @name start-xs
     * @type Boolean
     * @default false
     */
    startXs: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on small screens
     * @name start-sm
     * @type Boolean
     * @default false
     */
    startSm: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on medium screens
     * @name start-md
     * @type Boolean
     * @default false
     */
    startMd: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on large screens
     * @name start-lg
     * @type Boolean
     * @default false
     */
    startLg: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on extra-large screens
     * @name start-xl
     * @type Boolean
     * @default false
     */
    startXl: { type: Boolean, default: false },
    /**
     * Justify the content to the start of the row on extra-extra-large screens
     * @name start-2xl
     * @type Boolean
     * @default false
     */
    start2xl: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row
     * @name center
     * @type Boolean
     * @default false
     */
    center: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on extra-small screens
     * @name center-xs
     * @type Boolean
     * @default false
     */
    centerXs: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on small screens
     * @name center-sm
     * @type Boolean
     * @default false
     */
    centerSm: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on medium screens
     * @name center-md
     * @type Boolean
     * @default false
     */
    centerMd: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on large screens
     * @name center-lg
     * @type Boolean
     * @default false
     */
    centerLg: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on extra-large screens
     * @name center-xl
     * @type Boolean
     * @default false
     */
    centerXl: { type: Boolean, default: false },
    /**
     * Justify the content to the center of the row on extra-extra-large screens
     * @name center-2xl
     * @type Boolean
     * @default false
     */
    center2xl: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row
     * @name end
     * @type Boolean
     * @default false
     */
    end: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on extra-small screens
     * @name end-xs
     * @type Boolean
     * @default false
     */
    endXs: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on small screens
     * @name end-sm
     * @type Boolean
     * @default false
     */
    endSm: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on medium screens
     * @name end-md
     * @type Boolean
     * @default false
     */
    endMd: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on large screens
     * @name end-lg
     * @type Boolean
     * @default false
     */
    endLg: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on extra-large screens
     * @name end-xl
     * @type Boolean
     * @default false
     */
    endXl: { type: Boolean, default: false },
    /**
     * Justify the content to the end of the row on extra-extra-large screens
     * @name end-2xl
     * @type Boolean
     * @default false
     */
    end2xl: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row
     * @name top
     * @type Boolean
     * @default false
     */
    top: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on extra-small screens
     * @name top-xs
     * @type Boolean
     * @default false
     */
    topXs: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on small screens
     * @name top-sm
     * @type Boolean
     * @default false
     */
    topSm: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on medium screens
     * @name top-md
     * @type Boolean
     * @default false
     */
    topMd: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on large screens
     * @name top-lg
     * @type Boolean
     * @default false
     */
    topLg: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on extra-large screens
     * @name top-xl
     * @type Boolean
     * @default false
     */
    topXl: { type: Boolean, default: false },
    /**
     * Align the content to the top of the row on extra-extra-large screens
     * @name top-2xl
     * @type Boolean
     * @default false
     */
    top2xl: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row
     * @name middle
     * @type Boolean
     * @default false
     */
    middle: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on extra-small screens
     * @name middle-xs
     * @type Boolean
     * @default false
     */
    middleXs: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on small screens
     * @name middle-sm
     * @type Boolean
     * @default false
     */
    middleSm: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on medium screens
     * @name middle-md
     * @type Boolean
     * @default false
     */
    middleMd: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on large screens
     * @name middle-lg
     * @type Boolean
     * @default false
     */
    middleLg: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on extra-large screens
     * @name middle-xl
     * @type Boolean
     * @default false
     */
    middleXl: { type: Boolean, default: false },
    /**
     * Align the content to the middle of the row on extra-extra-large screens
     * @name middle-2xl
     * @type Boolean
     * @default false
     */
    middle2xl: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row
     * @name bottom
     * @type Boolean
     * @default false
     */
    bottom: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on extra-small screens
     * @name bottom-xs
     * @type Boolean
     * @default false
     */
    bottomXs: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on small screens
     * @name bottom-sm
     * @type Boolean
     * @default false
     */
    bottomSm: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on medium screens
     * @name bottom-md
     * @type Boolean
     * @default false
     */
    bottomMd: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on large screens
     * @name bottom-lg
     * @type Boolean
     * @default false
     */
    bottomLg: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on extra-large screens
     * @name bottom-xl
     * @type Boolean
     * @default false
     */
    bottomXl: { type: Boolean, default: false },
    /**
     * Align the content to the bottom of the row on extra-extra-large screens
     * @name bottom-2xl
     * @type Boolean
     * @default false
     */
    bottom2xl: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row
     * @name around
     * @type Boolean
     * @default false
     */
    around: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on extra-small screens
     * @name around-xs
     * @type Boolean
     * @default false
     */
    aroundXs: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on small screens
     * @name around-sm
     * @type Boolean
     * @default false
     */
    aroundSm: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on medium screens
     * @name around-md
     * @type Boolean
     * @default false
     */
    aroundMd: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on large screens
     * @name around-lg
     * @type Boolean
     * @default false
     */
    aroundLg: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on extra-large screens
     * @name around-xl
     * @type Boolean
     * @default false
     */
    aroundXl: { type: Boolean, default: false },
    /**
     * Justify the content to have space around each item inside the row on extra-extra-large screens
     * @name around-2xl
     * @type Boolean
     * @default false
     */
    around2xl: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row
     * @name between
     * @type Boolean
     * @default false
     */
    between: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on extra-small screens
     * @name between-xs
     * @type Boolean
     * @default false
     */
    betweenXs: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on small screens
     * @name between-sm
     * @type Boolean
     * @default false
     */
    betweenSm: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on medium screens
     * @name between-md
     * @type Boolean
     * @default false
     */
    betweenMd: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on large screens
     * @name between-lg
     * @type Boolean
     * @default false
     */
    betweenLg: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on extra-large screens
     * @name between-xl
     * @type Boolean
     * @default false
     */
    betweenXl: { type: Boolean, default: false },
    /**
     * Justify the content to have space between each item inside the row on extra-extra-large screens
     * @name between-2xl
     * @type Boolean
     * @default false
     */
    between2xl: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row
     * @name reverse
     * @type Boolean
     * @default false
     */
    reverse: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on extra-small screens
     * @name reverse-xs
     * @type Boolean
     * @default false
     */
    reverseXs: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on small screens
     * @name reverse-sm
     * @type Boolean
     * @default false
     */
    reverseSm: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on medium screens
     * @name reverse-md
     * @type Boolean
     * @default false
     */
    reverseMd: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on large screens
     * @name reverse-lg
     * @type Boolean
     * @default false
     */
    reverseLg: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on extra-large screens
     * @name reverse-xl
     * @type Boolean
     * @default false
     */
    reverseXl: { type: Boolean, default: false },
    /**
     * Order the content in reverse order inside the row on extra-extra-large screens
     * @name reverse-2xl
     * @type Boolean
     * @default false
     */
    reverse2xl: { type: Boolean, default: false },
    /**
     * Remove gutter between columns
     * @name no-gutter
     * @type Boolean
     * @default false
     */
    noGutter: {
      type: Boolean,
      default: false
    },
    /**
     * Disable wrapping of columns
     * @name no-collapse
     * @type Boolean
     * @default false
     */
    noCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const classes = computed(() => {
      const responsiveClasses = Object.keys(props).reduce(
        (acc, property) => {
          const value = props[property];
          if (value) {
            const className = breakpointClassName(property, value);
            acc[className] = true;
          }
          return acc;
        },
        {}
      );
      return {
        "-no-gutter": props.noGutter,
        "-no-collapse": props.noCollapse,
        ...responsiveClasses
      };
    });
    return {
      classes
    };
  }
});
</script>

<template>
    <div v-bind="$attrs" class="row" :class="classes">
        <!-- @slot default Slot for default row content -->
        <slot />
    </div>
</template>
