webapps/packages/layers/ux/app/components/XContainer/Buttons.vue

<!--This component is reusing @container and not defining its own-->

<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  axis?: string
  break?: `sm` | `md` | `lg` | `xl` | `2xl` | '3xl' | '4xl' | '5xl'
  align?: 'left' | 'center' | 'right'
  stretch?: boolean
}>()

const b = props.break ?? `undefined`

const fr = {
  undefined: ``,
  sm: `@sm:flex-row`,
  md: `@md:flex-row`,
  lg: `@lg:flex-row`,
  xl: `@xl:flex-row`,
  '2xl': `@2xl:flex-row`,
  '3xl': `@3xl:flex-row`,
  '4xl': `@4xl:flex-row`,
  '5xl': `@5xl:flex-row`,
}

const fc = {
  undefined: ``,
  sm: `@sm:flex-col`,
  md: `@md:flex-col`,
  lg: `@lg:flex-col`,
  xl: `@xl:flex-col`,
  '2xl': `@2xl:flex-col`,
  '3xl': `@3xl:flex-col`,
  '4xl': `@4xl:flex-col`,
  '5xl': `@5xl:flex-col`,
}

const fw = {
  undefined: ``,
  sm: `@sm:flex-wrap`,
  md: `@md:flex-wrap`,
  lg: `@lg:flex-wrap`,
  xl: `@xl:flex-wrap`,
  '2xl': `@2xl:flex-wrap`,
  '3xl': `@3xl:flex-wrap`,
  '4xl': `@4xl:flex-wrap`,
  '5xl': `@5xl:flex-wrap`,
}

const jb = {
  undefined: ``,
  sm: `@sm:justify-between`,
  md: `@md:justify-between`,
  lg: `@lg:justify-between`,
  xl: `@xl:justify-between`,
  '2xl': `@2xl:justify-between`,
  '3xl': `@3xl:justify-between`,
  '4xl': `@4xl:justify-between`,
  '5xl': `@5xl:justify-between`,
}

const js = {
  undefined: ``,
  sm: `@sm:justify-start`,
  md: `@md:justify-start`,
  lg: `@lg:justify-start`,
  xl: `@xl:justify-start`,
  '2xl': `@2xl:justify-start`,
  '3xl': `@3xl:justify-start`,
  '4xl': `@4xl:justify-start`,
  '5xl': `@5xl:justify-start`,
}

const jc = {
  undefined: ``,
  sm: `@sm:justify-center`,
  md: `@md:justify-center`,
  lg: `@lg:justify-center`,
  xl: `@xl:justify-center`,
  '2xl': `@2xl:justify-center`,
  '3xl': `@3xl:justify-center`,
  '4xl': `@4xl:justify-center`,
  '5xl': `@5xl:justify-center`,
}

const je = {
  undefined: ``,
  sm: `@sm:justify-end`,
  md: `@md:justify-end`,
  lg: `@lg:justify-end`,
  xl: `@xl:justify-end`,
  '2xl': `@2xl:justify-end`,
  '3xl': `@3xl:justify-end`,
  '4xl': `@4xl:justify-end`,
  '5xl': `@5xl:justify-end`,
}

const is = {
  undefined: ``,
  sm: `@sm:items-start`,
  md: `@md:items-start`,
  lg: `@lg:items-start`,
  xl: `@xl:items-start`,
  '2xl': `@2xl:items-start`,
  '3xl': `@3xl:items-start`,
  '4xl': `@4xl:items-start`,
  '5xl': `@5xl:items-start`,
}

const ic = {
  undefined: ``,
  sm: `@sm:items-center`,
  md: `@md:items-center`,
  lg: `@lg:items-center`,
  xl: `@xl:items-center`,
  '2xl': `@2xl:items-center`,
  '3xl': `@3xl:items-center`,
  '4xl': `@4xl:items-center`,
  '5xl': `@5xl:items-center`,
}

const ie = {
  undefined: ``,
  sm: `@sm:items-end`,
  md: `@md:items-end`,
  lg: `@lg:items-end`,
  xl: `@xl:items-end`,
  '2xl': `@2xl:items-end`,
  '3xl': `@3xl:items-end`,
  '4xl': `@4xl:items-end`,
  '5xl': `@5xl:items-end`,
}

const classes = useStyling(
  `containerButtons`,
  {
    slots: {
      base: `w-full self-start flex justify-start items-start [&>*]:min-w-[15ch] [&>*]:justify-center`,
    },
    variants: {
      axis: {
        row: {
          base: `flex-row ${fc[b]} flex-wrap`,
        },
        col: {
          base: `flex-col ${fr[b]}`,
        },
      },
      align: {
        left: {},
        center: {},
        right: {},
      },
      stretch: {
        true: {
          base: `items-stretch [&>*]:flex-[1_0_0]`,
        },
        false: {},
      },
    },
    compoundVariants: [
      {
        axis: 'row',
        align: 'left',
        stretch: false,
        class: {
          base: `justify-start ${is[b]}`,
        },
      },
      {
        axis: 'row',
        align: 'center',
        stretch: false,
        class: {
          base: `justify-center ${ic[b]}`,
        },
      },
      {
        axis: 'row',
        align: 'right',
        stretch: false,
        class: {
          base: `justify-end ${ie[b]}`,
        },
      },
      {
        axis: 'col',
        align: 'left',
        stretch: false,
        class: {
          base: `items-start ${js[b]}`,
        },
      },
      {
        axis: 'col',
        align: 'center',
        stretch: false,
        class: {
          base: `items-center ${jc[b]}`,
        },
      },
      {
        axis: 'col',
        align: 'right',
        stretch: false,
        class: {
          base: `items-end ${je[b]}`,
        },
      },
    ],
    defaultVariants: {
      axis: `row`,
      align: 'right',
      stretch: true,
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <slot />
  </div>
</template>