pgo-ui 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/App.vue

@@ -18,7 +18,6 @@
         fixed
         :dense="isDense"
         elevation="4"
-        II
         border="border-b"
         p="px-2"
         :rtl="rtl || isRtl"
@@ -59,7 +58,7 @@
         <!-- ACTIONS -->
         <template #actions>
           <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
-            <HeroIcon name="bell" size="22" />
+            <HeroIcon name="bell" size="22" class="text-black" />
           </button>
 
           <button class="hidden md:block p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">

package/src/components/examples/FormExample.vue

@@ -9,6 +9,7 @@
       <div>Form Valid: {{ isValid }}</div>
       <div>Form Data: {{ data }}</div>
     </div>
+    
 
     <!-- New Vuetify-style Form -->
     <Form
@@ -17,6 +18,18 @@
       validate-on="blur"
       padding="p-4 space-y-4"
     >
+    <div class="flex gap-1 items-center mb-4">
+    <Select
+          v-model="data.country"
+          label="Country"
+          :items="countries"
+          item-title="text"
+          item-value="value"
+          :rules="[rules.required]"
+          :searchable="true"
+          :multiple="false"
+      />
+      </div>
       <div class="space-y-4">
         <InputSearch
           v-model="data.name"

package/src/components/pgo/AppBar.vue

@@ -37,7 +37,7 @@
               class="md:hidden inline-flex items-center justify-center .vts-pa-2 rounded-md"
             >
               <slot name="drawer-icon">
-                <HeroIcon name="bars-3" size="24" color="text-gray-600" />
+                <HeroIcon name="bars-3" size="24" color="text-current" />
               </slot>
             </button>
 
@@ -65,10 +65,10 @@
             <!-- Overflow actions -->
             <div v-if="overflowActions.length" class="relative">
               <button @click="toggleOverflow" class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10">
-                <svg class="h-5 w-5" fill="none" stroke="currentColor">
+                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <circle cx="5" cy="12" r="2" />
                   <circle cx="12" cy="12" r="2" />
                   <circle cx="19" cy="12" r="2" />
-                  <circle cx="5" cy="12" r="2" />
                 </svg>
               </button>
 
@@ -86,10 +86,37 @@
               </div>
             </div>
 
+            <!-- Font Size Accessibility -->
+            <div class="flex items-center">
+              <button
+                @click="onDecreaseFontScale"
+                :disabled="fontScaleAtMin"
+                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                title="Decrease font size"
+              >
+                <span class="font-bold" style="font-size: 0.7rem;">A-</span>
+              </button>
+              <button
+                @click="onResetFontScale"
+                class="px-1 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
+                title="Reset font size"
+              >
+                <span style="font-size: 0.65rem;">{{ currentFontScale }}%</span>
+              </button>
+              <button
+                @click="onIncreaseFontScale"
+                :disabled="fontScaleAtMax"
+                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                title="Increase font size"
+              >
+                <span class="font-bold" style="font-size: 0.85rem;">A+</span>
+              </button>
+            </div>
+
             <!-- Language Selector -->
             <div class="relative" ref="langMenuRef">
               <button @click="toggleLangMenu" class="px-2 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
-                <HeroIcon name="language" size="22" />
+                <HeroIcon name="language" size="22" color="text-current" />
               </button>
               <div
                 v-if="isLangOpen"
@@ -185,6 +212,19 @@
 
   const globalRtl = inject('globalRtl', ref(false))
   const selectedRtl = computed(() => props.rtl !== undefined ? props.rtl : globalRtl.value)
+
+  /* ---------------------------------------------
+ * font size accessibility
+ ----------------------------------------------*/
+  const globalFontScale = inject('globalFontScale', ref(100))
+  const onIncreaseFontScale = inject('increaseFontScale', () => {}) as () => void
+  const onDecreaseFontScale = inject('decreaseFontScale', () => {}) as () => void
+  const onResetFontScale = inject('resetFontScale', () => {}) as () => void
+
+  const FONT_SCALE_STEPS = [85, 100, 115, 130, 145]
+  const currentFontScale = computed(() => globalFontScale.value)
+  const fontScaleAtMin = computed(() => globalFontScale.value <= FONT_SCALE_STEPS[0])
+  const fontScaleAtMax = computed(() => globalFontScale.value >= FONT_SCALE_STEPS[FONT_SCALE_STEPS.length - 1])
   /* ---------------------------------------------
  * layout integration
  ----------------------------------------------*/

package/src/components/pgo/CopyTextBox copy.vue

@@ -0,0 +1,187 @@
+<template>
+  <Chip
+    v-tooltip="{en: 'Copy', dv: 'ކޮޕީ'}"
+    v-bind="chipProps"
+    clickable
+    :class="[
+      'transition-all duration-200 cursor-pointer select-none',
+      'hover:opacity-80 hover:scale-101',
+      copied ? 'animate-pulse' : '',
+      $attrs.class
+    ]"
+    @click="handleChipClick"
+  >
+    <template #append v-if="showIcon && appendIcon === undefined">
+        <HeroIcon v-if="copied" :name="copied ? 'check' : 'clipboard'" type="outline" :size="iconSizes['sm']" color="text-current" />
+        <HeroIcon v-else name="clipboard" type="outline" :size="iconSizes['sm']" color="text-current" />
+    </template>
+  </Chip>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue'
+import Chip from './buttons/Chip.vue'
+import { iconSizes} from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+  // Text to copy (optional - will use label if not provided) 
+  text: {
+    type: String,
+    default: ''
+  },
+  
+  // All Chip props
+  label: String,
+  size: {
+    type: String,
+    default: 'sm'
+  },
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  
+  // CopyChip specific props
+  showIcon: {
+    type: Boolean,
+    default: false
+  },
+  showSuccessMessage: {
+    type: Boolean,
+    default: true
+  },
+  successMessage: {
+    type: String,
+    default: ''
+  },
+  successDuration: {
+    type: Number,
+    default: 1500
+  },
+  
+  // Pass through all other Chip props
+  variant: String,
+  prependIcon: String,
+  appendIcon: String,
+  disabled: Boolean,
+  rounded: { type: String, default: 'sm' },
+})
+
+const emit = defineEmits(['copy', 'copy-success', 'copy-error'])
+
+const copied = ref(false)
+const snackbar = inject('snackbar', null)
+
+// Computed for append icon
+// const getAppendIcon = computed(() => {
+//   if (props.showIcon) {
+//     return copied.value ? 'check' : 'clipboard'
+//   }
+//   return props.appendIcon || undefined
+// })
+
+// Computed props to pass to Chip (excluding CopyChip specific props AND appendIcon)
+const chipProps = computed(() => {
+  const { 
+    text, 
+    showIcon, 
+    showSuccessMessage, 
+    successMessage, 
+    successDuration,
+    ...rest 
+  } = props
+  return rest
+})
+
+// Use text prop if provided, otherwise use label 
+const textToCopy = computed(() => {
+  return props.text || props.label || ''
+})
+
+const handleChipClick = (event) => {
+  // console.log('Chip clicked!')
+  if (event && event.stopPropagation) {
+    event.stopPropagation()
+  }
+  handleCopy()
+}
+
+const handleCopy = async () => {
+  // console.log('handleCopy called')
+  // console.log('textToCopy:', textToCopy.value)
+  // console.log('disabled:', props.disabled)
+  
+  if (props.disabled || !textToCopy.value) {
+    // console.log('Copy cancelled - disabled or no text')
+    return
+  }
+  
+  // Check if clipboard API is available
+  // console.log('navigator.clipboard available:', !!navigator.clipboard)
+  
+  try {
+    await navigator.clipboard.writeText(textToCopy.value)
+    // console.log('Copy successful via clipboard API')
+    
+    // Show copied state
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, props.successDuration)
+    
+    // Show success message
+    if (props.showSuccessMessage && snackbar) {
+      const message = props.successMessage || `Copied: ${textToCopy.value}`
+      snackbar.show({ 
+        message, 
+        variant: 'success',
+        duration: props.successDuration
+      })
+    } else {
+      console.log('No snackbar available or showSuccessMessage is false')
+    }
+    
+    emit('copy', textToCopy.value)
+    emit('copy-success', textToCopy.value)
+    
+  } catch (err) {
+    console.error('Clipboard API failed:', err)
+    
+    // Fallback for older browsers or HTTPS issues
+    try {
+      const textArea = document.createElement('textarea')
+      textArea.value = textToCopy.value
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      textArea.style.top = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      const successful = document.execCommand('copy')
+      document.body.removeChild(textArea)
+      
+      if (successful) {
+        // console.log('Copy successful via fallback method')
+        copied.value = true
+        setTimeout(() => {
+          copied.value = false
+        }, props.successDuration)
+        emit('copy-success', textToCopy.value)
+      } else {
+        throw new Error('execCommand failed')
+      }
+      
+    } catch (fallbackErr) {
+      console.error('Fallback copy also failed:', fallbackErr)
+      emit('copy-error', fallbackErr)
+      
+      if (snackbar) {
+        snackbar.show({ 
+          message: 'Failed to copy text', 
+          variant: 'error' 
+        })
+      }
+    }
+  }
+}
+</script>

package/src/components/pgo/CopyTextBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <Chip
+  <!-- <Chip
     v-tooltip="{en: 'Copy', dv: 'ކޮޕީ'}"
     v-bind="chipProps"
     clickable
@@ -15,13 +15,16 @@
         <HeroIcon v-if="copied" :name="copied ? 'check' : 'clipboard'" type="outline" :size="iconSizes['sm']" color="text-current" />
         <HeroIcon v-else name="clipboard" type="outline" :size="iconSizes['sm']" color="text-current" />
     </template>
-  </Chip>
+  </Chip> -->
+  <div v-tooltip="{en: 'Copy', dv: 'ކޮޕީ'}" class="cursor-pointer hover:text-gray-800"  @click="handleChipClick">
+      {{ text }}
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, inject } from 'vue'
-import Chip from './buttons/Chip.vue'
-import { iconSizes} from '../../pgo-components/lib/componentConfig'
+// import Chip from './buttons/Chip.vue'
+// import { iconSizes} from '../../pgo-components/lib/componentConfig'
 
 const props = defineProps({
   // Text to copy (optional - will use label if not provided) 
@@ -29,23 +32,7 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  
-  // All Chip props
-  label: String,
-  size: {
-    type: String,
-    default: 'sm'
-  },
-  color: {
-    type: String,
-    default: 'primary'
-  },
-  
-  // CopyChip specific props
-  showIcon: {
-    type: Boolean,
-    default: false
-  },
+
   showSuccessMessage: {
     type: Boolean,
     default: true
@@ -57,14 +44,7 @@ const props = defineProps({
   successDuration: {
     type: Number,
     default: 1500
-  },
-  
-  // Pass through all other Chip props
-  variant: String,
-  prependIcon: String,
-  appendIcon: String,
-  disabled: Boolean,
-  rounded: { type: String, default: 'sm' },
+  }
 })
 
 const emit = defineEmits(['copy', 'copy-success', 'copy-error'])
@@ -84,7 +64,7 @@ const snackbar = inject('snackbar', null)
 const chipProps = computed(() => {
   const { 
     text, 
-    showIcon, 
+    // showIcon, 
     showSuccessMessage, 
     successMessage, 
     successDuration,

package/src/components/pgo/{DataTable copy.vue → DataTable copy 2.vue }

@@ -225,6 +225,19 @@
                       </div>
                       <!-- Chip Display -->
 
+                      <div
+                        v-else-if="header.displayType == 'copyButton' "
+                        :class="['align-middle leading-0', getColumnFont(lang)]"
+                      >
+                        <!-- <pre style="font-size:10px">{{ JSON.stringify(getNestedValue(item, header.value)) }}</pre> -->
+                        <CopyTextBox 
+                          :text="getNestedValue(item, header.value)"
+                          class="mr-1 "
+                        />
+                        <!-- <span v-else class="text-xs text-gray-400">
+                          {{ getNestedValue(item, header.value) || '-' }}
+                        </span> -->
+                      </div>
                       <div
                         v-else-if="header.displayType == 'chip' "
                         :class="['align-middle leading-0', getColumnFont(lang)]"

package/src/components/pgo/DataTable.vue

@@ -43,7 +43,18 @@
           </div>
         </div>
 
-        <table :dir="dir" class="w-full caption-bottom text-sm">
+        <!-- Desktop Table View -->
+        <table :dir="dir" class="w-full caption-bottom text-sm hidden md:table" style="table-layout: fixed;">
+          <!-- Colgroup for consistent column widths -->
+          <colgroup>
+            <col v-if="selectable" style="width: 48px;" />
+            <col
+              v-for="header in headers"
+              :key="'col-' + header.value"
+              :style="{ width: header.width || 'auto' }"
+            />
+            <col v-if="$slots['item-actions'] || showActions" style="width: 120px;" />
+          </colgroup>
           <!-- Table Header -->
           <thead :class="[headerBg]">
             <tr :class="[headerBorder, 'transition-colors']">
@@ -63,7 +74,6 @@
               <th
                 v-for="header in headers"
                 :key="header.value"
-                :style="{ width: header.width || '' }"
                 :class="[
                   'min-h-8 px-3 align-middle font-medium cursor-pointer select-none transition-colors',
                   headerText,
@@ -75,13 +85,10 @@
                 @click="header.sortable == true ? toggleSort(header.value) : null"
               >
                 <div :class="['flex items-center space-x-2', textAlign[header.headerAlign ?? 'defaults']]">
-                  <span
-                    :class="['w-full', header.width ? 'truncate' : 'whitespace-nowrap',]"
-                    :style="{ maxWidth: header.width || 'auto', }"
-                  >
+                  <span class="w-full truncate whitespace-nowrap">
                     {{ header.title }}
                   </span>
-                  <div v-if="header.sortable == true" class="flex h-4 w-4 items-center justify-center">
+                  <div v-if="header.sortable == true" class="shrink-0 flex h-4 w-4 items-center justify-center">
                     <!-- Unsorted state -->
                     <svg
                       v-if="!isSorted(header.value)"
@@ -118,7 +125,6 @@
               <!-- Actions column -->
               <th
                 v-if="$slots['item-actions'] || showActions" :class="['h-10 px-3 text-end align-middle font-medium', headerText]"
-                :style="{ width: '25px' || 'auto' }"
               >
                 <Button
                   v-if="inlineEdit"
@@ -173,15 +179,12 @@
               <!-- Data columns -->
               <template v-for="header in headers" :key="header.value">
                 <td
-                  :style="{ width: header.width || 'flex', maxWidth: header.width || 'auto' }"
                   :class="[
-                    'px-2 py-2 ',
+                    'px-2 py-2 overflow-hidden',
                   ]"
                   @click.stop
                 >
-                  <div
-                    class="  "
-                  >
+                  <div class="min-w-0">
                     <slot
                       :name="`item.${header.value}`"
                       :item="item"
@@ -193,7 +196,7 @@
                       <!-- html -->
                       <div
                         v-if="header.displayType == 'html'" :class="[
-                          'text-sm truncate shrink',
+                          'text-sm truncate',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]" v-html="getCustomColumnData(header, item)"
@@ -202,22 +205,22 @@
                       <!-- Custom column -->
                       <div
                         v-else-if="header.displayType == 'custom'" :class="[
-                          'text-sm truncate shrink',
+                          'text-sm',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]"
                       >
                         <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
-                          <div class="flex flex-wrap items-center gap-1">
+                          <div class="flex flex-wrap items-center gap-1">fff
                             <template
                               v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox"
                               :key="idx"
-                            >
+                            >dda
                               <CopyTextBox
-                                v-bind="chip"
+                                :text="chip.text"
                                 class="mr-1 "
                               />
-
+ b
                             </template>
                           </div>
                         </template>
@@ -225,11 +228,20 @@
                       </div>
                       <!-- Chip Display -->
 
+                      <div
+                        v-else-if="header.displayType == 'copyButton'"
+                        :class="['align-middle leading-0', getColumnFont(lang)]"
+                      >
+                      
+                        <CopyTextBox
+                          :text="getNestedValue(item, header.value)"
+                          class="mr-1 "
+                        />
+                      </div>
                       <div
                         v-else-if="header.displayType == 'chip' "
                         :class="['align-middle leading-0', getColumnFont(lang)]"
                       >
-                        <!-- <pre style="font-size:10px">{{ JSON.stringify(getNestedValue(item, header.value)) }}</pre> -->
                         <Chip
                           size="small"
                           v-if="header?.chip && header?.chip[getNestedValue(item, header.value)]"
@@ -295,18 +307,9 @@
                           v-bind="header.docButton"
                           @view-file="emit('viewpdf', $event)"
                         />
-                        <!-- <Button
-                          icon="document-text"
-                          icon-type="solid"
-                          variant="text"
-                          size="xs"
-                          @click="emit('viewpdf', formatCellValue(getNestedValue(item, header.value), header))"
-                        /> -->
-                        <!-- @click="handlePdfView(formatCellValue(getNestedValue(item, header.value), header))" -->
                       </div>
 
                       <!-- Default Text Display -->
-                      <!-- <bdi class="flex items-center"></bdi> -->
                       <bdi
                         v-else :class="[
                           'text-sm',
@@ -316,8 +319,7 @@
                         ]"
                       >
                         <span
-                          :class="['w-full', header.width ? 'truncate' : 'truncate whitespace-nowrap',]"
-                          :style="{ maxWidth: header.width || 'auto', }"
+                          class="block truncate"
                         >
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </span>
@@ -340,6 +342,101 @@
             </tr>
           </tbody>
         </table>
+
+        <!-- Mobile Card View -->
+        <div class="md:hidden" :dir="dir">
+          <!-- No Data State -->
+          <div v-if="!items || items.length === 0" class="px-6 py-12 text-center">
+            <div class="flex flex-col items-center">
+              <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              <span class="text-sm text-gray-500">{{ noDataText }}</span>
+            </div>
+          </div>
+
+          <!-- Card Items -->
+          <div
+            v-else
+            v-for="(item, index) in items"
+            :key="'card-' + getItemKey(item, index)"
+            :class="[
+              'border-b border-input-border p-4 transition-colors cursor-pointer',
+              rowHover,
+              selectedItems.includes(getItemKey(item, index)) ? rowSelected : ''
+            ]"
+            @click="handleRowClick(item, index)"
+          >
+            <!-- Selection checkbox for mobile -->
+            <div v-if="selectable" class="flex items-center mb-3">
+              <input
+                type="checkbox"
+                :checked="selectedItems.includes(getItemKey(item, index))"
+                class="h-4 w-4 rounded border-2 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
+                @click.stop
+                @change="toggleItemSelection(item, index)"
+              >
+            </div>
+
+            <!-- Each header-value pair as a row -->
+            <div
+              v-for="header in headers"
+              :key="'card-field-' + header.value"
+              class="flex justify-between items-start py-1.5 gap-4"
+              @click.stop
+            >
+              <!-- Label -->
+              <span :class="['text-xs font-medium shrink-0 w-2/5', headerText, getColumnFont(lang)]">
+                {{ header.title }}
+              </span>
+              <!-- Value -->
+              <div class="flex-1 min-w-0 text-end">
+                <slot
+                  :name="`item.${header.value}`"
+                  :item="item"
+                  :value="getNestedValue(item, header.value)"
+                  :header="header"
+                  :index="index"
+                >
+                  <div v-if="header.displayType == 'html'" :class="['text-sm', cellText]" v-html="getCustomColumnData(header, item)" />
+                  <div v-else-if="header.displayType == 'custom'" :class="['text-sm', cellText]">
+                    <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
+                      <div class="flex flex-wrap items-center gap-1 justify-end">
+                        <CopyTextBox v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox" :key="idx" v-bind="chip" />
+                      </div>
+                    </template>
+                    <div v-else v-html="getCustomColumnData(header, item)" />
+                  </div>
+                  <div v-else-if="header.displayType == 'copyButton'" :class="['align-middle', getColumnFont(lang)]">
+                    <CopyTextBox :text="getNestedValue(item, header.value)" />
+                  </div>
+                  <div v-else-if="header.displayType == 'chip'" :class="['align-middle', getColumnFont(lang)]">
+                    <Chip size="small" v-if="header?.chip && header?.chip[getNestedValue(item, header.value)]" v-bind="header.chip[getNestedValue(item, header.value)]" />
+                    <span v-else class="text-xs text-gray-400">{{ getNestedValue(item, header.value) || '-' }}</span>
+                  </div>
+                  <div v-else-if="header.displayType == 'checkbox'" :class="['align-middle', getColumnFont(header.lang)]">
+                    <Checkbox :model-value="!!getNestedValue(item, header.value)" v-bind="header.displayProps" :disabled="!editMode || !header.inlineEditable" @update:model-value="(value) => handleCellUpdate(item, header.value, value, index)" />
+                  </div>
+                  <div v-else-if="header.displayType == 'docButton'" :class="['align-middle', getColumnFont(header.lang)]">
+                    <FileDisplay :item="getNestedValue(item, header.value)" v-bind="header.docButton" @view-file="emit('viewpdf', $event)" />
+                  </div>
+                  <bdi v-else :class="['text-sm', cellText, header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang)]">
+                    {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                  </bdi>
+                </slot>
+              </div>
+            </div>
+
+            <!-- Actions for mobile -->
+            <div v-if="$slots['item-actions'] || showActions" class="flex items-center justify-end space-x-2 mt-3 pt-2 border-t border-input-border">
+              <slot name="item-actions" :item="item" :index="index">
+                <Button v-if="showView && evaluateCondition(settings?.actions?.viewCondition, item)" v-tooltip="{en: 'View', dv: 'ވިއު'}" @click.stop="emit('view', item)" size="md" color="info" variant="text" icon="eye" icon-type="outline" label="" />
+                <Button v-if="showEdit && evaluateCondition(settings?.actions?.editCondition, item)" v-tooltip="{en: 'Edit', dv: 'އެޑިޓް'}" @click.stop="emit('edit', item)" size="md" icon="pencil-square" color="warning" variant="text" label="" />
+                <Button v-if="showDelete && evaluateCondition(settings?.actions?.deleteCondition, item)" v-tooltip="{en: 'Delete', dv: 'ޑިލީޓް'}" @click.stop="emit('delete', item)" size="md" color="danger" variant="text" icon="trash" label="" />
+              </slot>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Pagination Component -->