✨ feat (form): add form components

app/components/pub/form/block.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  classValExt?: string
+}>()
+</script>
+
+<template>
+  <div :class="`mb-5 flex-wrap md:flex ${classValExt || ''}`">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    column?: 1 | 2 | 3
+    density?: 'default' | 'dense'
+    side?: 'default' | 'break'
+    position?: 'default' | 'dynamic'
+    class?: string
+  }>(),
+  {
+    column: 1,
+    density: 'default',
+    side: 'default',
+    position: 'default',
+    class: '',
+  },
+)
+
+const classVal = computed(() => {
+  let val = ''
+
+  if (props.column === 2) val += 'column-2 '
+  else if (props.column === 3) val += 'column-3 '
+  else val += 'column-1 '
+
+  if (props.density === 'dense') val += 'density-dense '
+
+  if (props.side === 'break') val += 'side-break '
+
+  if (props.position === 'dynamic') val += 'position-dynamic '
+
+  return (val + (props.class || '')).trim()
+})
+</script>
+
+<template>
+  <div :class="classVal">
+    <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>

app/components/pub/form/field.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+export interface XError {
+  message: string
+  [key: string]: any
+}
+
+defineProps<{
+  id?: string
+  errors?: Record<string, XError>
+}>()
+</script>
+
+<template>
+  <div class="grow">
+    <slot />
+    <div v-if="id && errors?.[id]" class="field-error-info">
+      {{ errors[id].message }}
+    </div>
+  </div>
+</template>