feat: enhance FormattedInput component with description slot and useAttrs for better attribute handling

(cherry picked from commit 00470770744f2590b84b8eafe4014250c5f1ec56)

crm/fcrm/doctype/crm_products/crm_products.json

@@ -11,13 +11,16 @@
   "product_name",
   "section_break_fnvf",
   "qty",
+  "column_break_ajac",
+  "rate",
   "section_break_olqb",
   "discount_percentage",
+  "column_break_uvra",
   "discount_amount",
   "section_break_cnpb",
   "column_break_pozr",
-  "rate",
   "amount",
+  "column_break_ejqw",
   "net_amount"
  ],
  "fields": [
@@ -102,13 +105,25 @@
    "fieldname": "qty",
    "fieldtype": "Float",
    "label": "Quantity"
+  },
+  {
+   "fieldname": "column_break_ajac",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "column_break_uvra",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "column_break_ejqw",
+   "fieldtype": "Column Break"
   }
  ],
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2025-05-14 17:16:06.475177",
+ "modified": "2025-05-14 18:52:26.183306",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Products",

frontend/src/components/Controls/FormattedInput.vue

@@ -6,10 +6,15 @@
     @blur="isFocused = false"
     v-bind="$attrs"
   />
+  <slot name="description">
+    <p v-if="attrs.description" class="mt-1.5" :class="descriptionClasses">
+      {{ attrs.description }}
+    </p>
+  </slot>
 </template>
 <script setup>
 import { TextInput } from 'frappe-ui'
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, useAttrs } from 'vue'
 
 const props = defineProps({
   value: {
@@ -22,6 +27,8 @@ const props = defineProps({
   },
 })
 
+const attrs = useAttrs()
+
 const isFocused = ref(false)
 const inputRef = ref(null)
 
@@ -38,4 +45,14 @@ function handleFocus() {
 const displayValue = computed(() => {
   return isFocused.value ? props.value : props.formattedValue || props.value
 })
+
+const descriptionClasses = computed(() => {
+  return [
+    {
+      sm: 'text-xs',
+      md: 'text-base',
+    }[attrs.size || 'sm'],
+    'text-ink-gray-5',
+  ]
+})
 </script>