dev: hotfix

comps/pub/myui
+ updated data/types
+ updated data-table
+ updated nav-header
+ added toggle

comps/pub/ui
+ updated button
+ updated toggle

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>

app/components/pub/ui/button/index.ts

@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'md:h8 2xl:h-9 px-4 py-2',
+        default: 'md:h-8 2xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',

app/components/pub/ui/toggle/index.ts

@@ -4,16 +4,16 @@ import { cva } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-xs 2xl:text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
+        default: 'md:h-8 2xl:h-9 px-3',
         sm: 'h-8 px-2',
         lg: 'h-10 px-3',
       },