Merge branch 'dev' into feat/prescription

app/components/pub/my-ui/data-table/data-table.vue

@@ -22,7 +22,7 @@ const selected = ref<any[]>([])
 function toggleSelection(row: any, event?: Event) {
   if (event) event.stopPropagation() // cegah event bubble ke TableRow
 
-  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
 
   // gunakan pembanding berdasarkan id atau stringify data
   const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
@@ -128,7 +128,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           'bg-green-50':
             props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
           'bg-blue-50':
-            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
             selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"

app/components/pub/my-ui/data/types.ts

@@ -8,6 +8,7 @@ export interface ListItemDto {
 }
 
 export type ComponentType = Component
+export type ComponentWithProps = { component: Component, props: Record<string, any> }
 
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
@@ -45,13 +46,13 @@ export interface RefSearchNav {
 export interface HeaderPrep {
   title?: string
   icon?: string
+  components?: ComponentWithProps[]
   refSearchNav?: RefSearchNav
   quickSearchNav?: QuickSearchNav
   filterNav?: ButtonNav
   addNav?: ButtonNav
   printNav?: ButtonNav
 }
-
 export interface KeyLabel {
   key: string
   label: string

app/components/pub/my-ui/nav-header/prep.vue

@@ -30,15 +30,24 @@ function btnClick() {
       <div class="flex items-center">
         <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
           <Icon
-            :name="props.prep.icon!"
+            :name="prep.icon!"
             class="mr-2 align-middle md:size-6"
           />
-          {{ props.prep.title }}
+          {{ prep.title }}
         </div>
       </div>
       <div class="flex items-center">
+        <div v-if="prep.components">
+          <template v-for="cwp in prep.components">
+            <component
+              :is="cwp.component"
+              class="mr-2"
+              v-bind="cwp.props"
+            />
+          </template>
+        </div>
         <div
-          v-if="props.refSearchNav"
+          v-if="refSearchNav"
           class="text-lg text-gray-900"
         >
           <Input

app/components/pub/my-ui/toggle/provided-toggle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, inject } from "vue"
+// import Toggle from '~/components/pub/ui/toggle/Toggle.vue'
+
+const props = defineProps<{
+  label: string,
+  providedKey?: string,
+  variant?: 'default' | 'outline' | null | undefined
+}>()
+
+const model = defineModel<boolean>()
+const provideKey = props.providedKey || 'toggle-provide'
+const { updateProvidedVal }  = inject(provideKey)
+
+watch(model, (newVal) => {
+  updateProvidedVal(newVal)
+})
+</script>
+
+<template>
+  <Button
+    @click="() => model = !model"
+    :variant="model ? 'default' : 'outline'"
+  >
+    {{ label }}
+  </Button>
+  <!-- <Toggle
+    v-model="xval"
+    :variant="variant ?? 'default'"
+    :aria-label="label"
+  >
+  </Toggle> -->
+  <!-- {{ xval }} -->
+</template>