Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/patient-63-adjustment

app/components/pub/my-ui/form/file-field.vue

@@ -5,7 +5,7 @@ import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
-const props = defineProps<{
+interface Props {
   fieldName: string
   label?: string
   placeholder?: string
@@ -18,6 +18,19 @@ const props = defineProps<{
   isRequired?: boolean
   isDisabled?: boolean
   icons?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: 'Choose file...',
+  maxSizeMb: 1,
+  isDisabled: false,
+  isRequired: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: File | null): void
+  (e: 'fileSelected', file: File | null): void
 }>()
 
 const hintMsg = computed(() => {
@@ -32,7 +45,26 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
 
+  if (!file) {
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
+  // Validate file size
+  const maxSizeBytes = props.maxSizeMb * 1024 * 1024
+  if (file.size > maxSizeBytes) {
+    console.warn(`File size exceeds ${props.maxSizeMb}MB limit`)
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
   handleChange(file)
+  emit('update:modelValue', file)
+  emit('fileSelected', file)
 }
 </script>
 

app/components/pub/my-ui/form/text-area-input.vue

@@ -47,7 +47,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1"
+      class="font-medium mb-1"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
@@ -69,7 +69,7 @@ function handleInput(event: Event) {
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"

app/components/pub/my-ui/form/view/detail-row.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-defineProps<{
+import { cn } from '~/lib/utils';
+
+const props = defineProps<{
   label: string
+  class?: string
+  labelClass?: string
 }>()
 </script>
 
 <template>
-  <div class="flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3">
+  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
     <!-- Label -->
-    <span class="text-md font-normal text-muted-foreground">
+    <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>