⚠️ refactor (form): refactor label component for improved styling and responsiveness

app/components/pub/form/field-group.vue

@@ -16,71 +16,29 @@ const props = withDefaults(
   },
 )
 
-const classVal = computed(() => {
-  let val = ''
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0',
 
-  if (props.column === 2) val += 'column-2 '
-  else if (props.column === 3) val += 'column-3 '
-  else val += 'column-1 '
+  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
+  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
+  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
+  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
 
-  if (props.density === 'dense') val += 'density-dense '
+  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
 
-  if (props.side === 'break') val += 'side-break '
+  props.side !== 'break' ? 'md:flex' : '',
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
+  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
 
-  return (val + (props.class || '')).trim()
-})
+  props.class,
+])
 </script>
 
 <template>
-  <div
-    :class="[
-      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
-      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
-      side !== 'break' ? 'md:flex' : '',
-      position === 'dynamic' ? 'ps-4' : '',
-      props.class,
-    ]"
-  >
+  <div :class="wrapperClass">
     <slot />
   </div>
 </template>
 
-<style scoped>
-.column-1,
-.column-2,
-.column-3 {
-  @apply w-full flex-shrink-0;
-}
-
-.column-1:not(.density-dense):not(:last-child),
-.column-2:not(.density-dense):not(:last-child),
-.column-3:not(.density-dense):not(:last-child) {
-  @apply mb-2 md:mb-2.5 xl:mb-3;
-}
-
-.column-2:not(.position-dynamic),
-.column-3:not(.position-dynamic) {
-  @apply pe-4;
-}
-
-.column-2:is(.position-dynamic),
-.column-3:is(.position-dynamic) {
-  @apply ps-4;
-}
-
-.column-1:not(.side-break),
-.column-2:not(.side-break),
-.column-3:not(.side-break) {
-  @apply md:flex;
-}
-
-.column-2:not(.side-break) {
-  @apply md:w-1/2;
-}
-
-.column-3:not(.side-break) {
-  @apply md:w-1/3;
-}
-</style>
+<style scoped></style>

app/components/pub/form/label.vue

@@ -4,69 +4,49 @@ const props = withDefaults(
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
-    class?: string
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
-    class: '',
   },
 )
 
-const classVal = computed(() => {
-  let val = ''
+const sizeMap = {
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+} as const
 
-  if (props.size === 'narrow') val += 'size-narrow '
-  else if (props.size === 'wide') val += 'size-wide '
-  else val += 'size-default '
+const heightMap = {
+  default: 'pt-2 2xl:pt-2.5',
+  compact: 'leading-[14pt]',
+} as const
 
-  if (props.height === 'compact') val += 'height-compact '
-  else val += 'height-default '
+const positionWrapMap = {
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
-  else val += 'position-default '
+const positionChildMap = {
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
 
-  return (val + (props.class || '')).trim()
-})
+const wrapperClass = computed(() => [
+  'block shrink-0',
+  sizeMap[props.size],
+  heightMap[props.height],
+  positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => positionChildMap[props.position])
 </script>
 
 <template>
-  <div class="label" :class="classVal">
-    <label>
+  <div :class="wrapperClass">
+    <label :class="labelClass">
       <slot />
     </label>
   </div>
 </template>
-
-<style scoped>
-.label {
-  @apply block flex-shrink-0 shrink-0;
-}
-
-.size-default {
-  @apply w-28 2xl:w-36;
-}
-.size-narrow {
-  @apply w-24 2xl:w-28;
-}
-.size-wide {
-  @apply w-44 2xl:w-48;
-}
-
-.height-default {
-  @apply pt-2 2xl:pt-2.5;
-}
-
-.height-compact {
-  line-height: 14pt;
-}
-
-.position-default {
-  @apply pe-2 text-start;
-}
-
-.position-dynamic > * {
-  @apply block pe-2.5 md:text-end;
-}
-</style>