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

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>