simrsx-fe/app/components/pub/my-ui/doc-entry/block.vue

<script setup lang="ts">
// ---------- Imports ----------
import { computed, useSlots } from 'vue'

// Types
const props = defineProps({
  mode: { type: String, default: 'entry' },
  gridPoint: { type: String, default: 'lg' },
  cellFlex: { type: Boolean, default: true },
  cellFlexPoint: { type: String, default: 'md' },
  labelSize: { type: String, default: 'medium' },
  labelSizePoint: { type: String, default: 'md' },
  colCount: { type: Number, default: 1 },
  defaultClass: { type: String, default: 'mb-5' },
  class: { type: String, default: '' },
})

const slots = useSlots()

// Utility functions (minimal, can be expanded)
const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
const getBreakpointIdx = (point: string) => {
  return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
}
const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
const getLabelSizeIdx = (size: string) => {
  return Math.max(0, labelSizes.findIndex(s => s === size))
}

const settingClass = computed(() => {
  const breakPointIdx = getBreakpointIdx(props.gridPoint)
  let cls = breakpoints[breakPointIdx]
  cls += ' gap-x-4 2xl:gap-x-5 ' + [
    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
    'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
  ][props.colCount - 1]
  cls += breakPointIdx === 0 ? ' gap-x-3 ' : ''
  cls += ' ' + [
    ' [&_.cell]:!mb-0',
    ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
    ' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
    ' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
    ' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
    ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
  ][breakPointIdx]
  if (props.cellFlex) {
    cls += ' gap-y-2 2xl:gap-y-3 ' + [
      '[&_.cell]:flex',
      '[&_.cell]:sm:flex',
      '[&_.cell]:md:flex',
      '[&_.cell]:lg:flex',
      '[&_.cell]:xl:flex',
      '[&_.cell]:2xl:flex',
    ][getBreakpointIdx(props.cellFlexPoint)]
    cls += ' [&_.label]:flex-shrink-0 ' + [
      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
      '[&_.label]:md:w-20 [&_.label]:xl:w-24',
      '[&_.label]:md:w-24 [&_.label]:xl:w-32',
      '[&_.label]:md:w-32 [&_.label]:xl:w-40',
      '[&_.label]:md:w-44 [&_.label]:xl:w-52',
    ][getLabelSizeIdx(props.labelSize)]
  } else {
    cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
  }
  cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
  cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
  cls += '[&_label]:md:text-xs [&_label]:2xl:!text-sm '
  return cls
})
</script>

<template>
  <div :class="`block ${mode} ${props.defaultClass} ${settingClass} ${props.class}`">
    <slot />
  </div>
</template>

<style scoped>
</style>