Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/fe-encounter-68

app/components/pub/base/data-table/data-table.vue

@@ -62,7 +62,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50">
+    <TableHeader class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
           v-for="(h, idx) in header[0]"
@@ -79,7 +79,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
         </TableCell>
       </TableRow>
     </TableBody>

app/components/pub/custom-ui/doc-entry/block.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// ---------- Imports ----------
+import { computed, useSlots } from 'vue'
+
+// Types
+const props = defineProps({
+  mode: { type: String, default: 'entry' },
+  gridPoint: { type: String, default: 'lg' },
+  cellFlex: { type: Boolean, default: true },
+  cellFlexPoint: { type: String, default: 'md' },
+  labelSize: { type: String, default: 'medium' },
+  labelSizePoint: { type: String, default: 'md' },
+  colCount: { type: Number, default: 1 },
+  defaultClass: { type: String, default: 'mb-5' },
+  class: { type: String, default: '' },
+})
+
+const slots = useSlots()
+
+// Utility functions (minimal, can be expanded)
+const breakpoints = ['grid', 'sm:grid', 'md:grid', 'lg:grid', 'xl:grid', '2xl:grid']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp.startsWith(point)))
+}
+const labelSizes = ['small', 'medium', 'large', 'xl', '2xl']
+const getLabelSizeIdx = (size: string) => {
+  return Math.max(0, labelSizes.findIndex(s => s === size))
+}
+
+const settingClass = computed(() => {
+  const breakPointIdx = getBreakpointIdx(props.gridPoint)
+  let cls = breakpoints[breakPointIdx]
+  cls += ' gap-4 xl:gap-5 ' + [
+    'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
+    'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
+  ][props.colCount - 1]
+  cls += breakPointIdx === 0 ? ' gap-3 ' : ''
+  cls += ' ' + [
+    ' [&_.cell]:!mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:md:mb-0',
+    ' [&_.cell]:mb-2.5 [&_.cell]:lg:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:xl:mb-0',
+    ' [&_.cell]:mb-3 [&_.cell]:2xl:mb-0',
+  ][breakPointIdx]
+  if (props.cellFlex) {
+    cls += ' ' + [
+      '[&_.cell]:flex',
+      '[&_.cell]:sm:flex',
+      '[&_.cell]:md:flex',
+      '[&_.cell]:lg:flex',
+      '[&_.cell]:xl:flex',
+      '[&_.cell]:2xl:flex',
+    ][getBreakpointIdx(props.cellFlexPoint)]
+    cls += ' [&_.label]:sm:pt-2 ' + [
+      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-24 [&_.label]:xl:w-32',
+      '[&_.label]:md:w-32 [&_.label]:xl:w-40',
+      '[&_.label]:md:w-44 [&_.label]:xl:w-52',
+    ][getLabelSizeIdx(props.labelSize)]
+  }
+  cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
+  cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
+  cls += '[&_label]:text-xs [&_label]:xl:text-sm'
+  return cls
+})
+</script>
+
+<template>
+  <div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+</style>

app/components/pub/custom-ui/doc-entry/cell.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  colSpan: { type: Number, default: undefined },
+  colStart: { type: Number, default: undefined },
+  colEnd: { type: Number, default: undefined },
+  class: { type: String, default: '' },
+})
+
+const settingClass = computed(() => {
+  let cls = 'cell'
+  if (props.colSpan) {
+    cls += ' ' + [
+      'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
+      'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9', 'col-span-10',
+    ][props.colSpan - 1]
+  }
+  if (props.colStart) {
+    cls += ' ' + [
+      'col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5',
+      'col-start-6', 'col-start-7', 'col-start-8', 'col-start-9', 'col-start-10',
+    ][props.colStart - 1]
+  }
+  if (props.colEnd) {
+    cls += ' ' + [
+      'col-end-1', 'col-end-2', 'col-end-3', 'col-end-4', 'col-end-5',
+      'col-end-6', 'col-end-7', 'col-end-8', 'col-end-9', 'col-end-10',
+    ][props.colEnd - 1]
+  }
+  if (props.class) {
+    cls += ' ' + props.class.trim()
+  }
+  return cls
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <slot />
+  </div>
+</template>

app/components/pub/custom-ui/doc-entry/field.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  errMessage: { type: String, default: '' },
+  defaultClass: { type: String, default: 'field grow shrink-0 overflow-hidden' },
+  class: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <div :class="`${props.defaultClass} ${props.class}`">
+    <slot />
+    <div v-if="props.errMessage" class="mt-1 text-xs font-medium text-red-500">{{ props.errMessage }}</div>
+  </div>
+</template>

app/components/pub/custom-ui/doc-entry/label.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: 'default' }, // 'default' | 'compact'
+  position: { type: String, default: 'default' }, // 'default' | 'dynamic'
+  positionPoint: { type: String, default: 'lg' },
+  class: { type: String, default: '' },
+})
+
+const breakpoints = ['','sm','md','lg','xl','2xl']
+const getBreakpointIdx = (point: string) => {
+  return Math.max(0, breakpoints.findIndex(bp => bp === point))
+}
+
+const settingClass = computed(() => {
+  let cls = 'label'
+  cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
+  if (props.position === 'dynamic') {
+    cls += ' ' + [
+      'text-end pe-2.5',
+      'sm:text-end pe-2.5',
+      'md:text-end pe-2.5',
+      'lg:text-end pe-2.5',
+      'xl:text-end pe-2.5',
+      '2xl:text-end pe-2.5',
+    ][getBreakpointIdx(props.positionPoint)]
+  }
+  return cls + ' ' + (props.class?.trim() || '')
+})
+</script>
+
+<template>
+  <div :class="settingClass">
+    <label>
+      <slot />
+    </label>
+  </div>
+</template>

app/components/pub/ui/card/CardContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('p-4 xl:p-5 2xl:p-6', props.class)">
     <slot />
   </div>
 </template>

app/components/pub/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input ring-offset-background placeholder:text-muted-foreground flex  h-10 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full  rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium  disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

app/components/pub/ui/sidebar/SidebarInset.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <main
     :class="cn(
-      'overflow-x-auto relative flex min-h-svh flex-1 flex-col bg-background',
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col',
       'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
       props.class,
     )"