pgo-uiux2 1.0.0

package/src/components/pgo/DataTable.vue

@@ -0,0 +1,845 @@
+<template>
+  <div :class="['data-table-container', loading ? 'opacity-50 pointer-events-none relative' : '']">
+    <!-- Header with title and actions -->
+    <div v-if="title || $slots.header" class="data-table-header mb-6">
+      <div class="flex justify-between items-center">
+        <div>
+          <h2 v-if="title" :class="[headerClass || 'text-2xl font-semibold text-gray-800']">{{ title }}</h2>
+          <slot name="header" />
+        </div>
+        <div class="flex items-center gap-3">
+          <!-- Search -->
+          <div v-if="searchable" class="search-container">
+            <div class="relative">
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="searchPlaceholder"
+                :class="[
+                  'pl-10 pr-4 py-2 rounded-lg w-64 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0',
+                  inputBorder
+                ]"
+                @input="debounceSearch"
+              />
+              <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
+                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <slot name="header-actions" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Table Container -->
+    <div :class="['w-full', tableClass]">
+      <div :class="[rounded, border, shadow, bg, 'overflow-hidden', 'relative']">
+        <!-- Loading Bar -->
+        <div class="absolute top-0 left-0 right-0 z-10 h-1  overflow-hidden">
+          <div v-if="loading" class="bg-gray-200 w-full">
+            <div class="h-full bg-primary animate-loading-bar"></div>
+          </div>
+        </div>
+
+        <table class="w-full caption-bottom text-sm">
+          <!-- Table Header -->
+          <thead :class="[headerBg]">
+            <tr :class="[headerBorder, 'transition-colors']">
+              <!-- Selection checkbox -->
+              <th v-if="selectable" :class="['h-10 px-3 text-left align-middle font-medium', headerText, 'w-12']">
+                <div class="flex items-center justify-center">
+                  <input
+                    type="checkbox"
+                    :checked="allSelected"
+                    :indeterminate.prop="someSelected"
+                    class="h-4 w-4 rounded border border-gray-200 text-primary focus:ring-2 focus:ring-primary-500 focus:ring-offset-0"
+                    @change="toggleSelectAll"
+                  />
+                </div>
+              </th>
+              <!-- Column Headers -->
+              <th
+                v-for="header in headers"
+                :key="header.value"
+                :class="[
+                  'h-10 px-3 text-left align-middle font-medium cursor-pointer select-none transition-colors',
+                  headerText,
+                  getColumnFont(header.lang),
+                  'hover:bg-input-hover-border',
+                  { 'bg-surface': isSorted(header.value) }
+                ]"
+                @click="header.sortable !== false ? toggleSort(header.value) : null"
+              >
+                <div class="flex items-center space-x-2">
+                  <span class="whitespace-nowrap">{{ header.title }}</span>
+                  <div v-if="header.sortable !== false" class="flex h-4 w-4 items-center justify-center">
+                    <!-- Unsorted state -->
+                    <svg
+                      v-if="!isSorted(header.value)"
+                      class="h-4 w-4 text-gray-400"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+                    </svg>
+                    <!-- Ascending -->
+                    <svg
+                      v-else-if="getSortDirection(header.value) === 'asc'"
+                      class="h-4 w-4 text-blue-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                    </svg>
+                    <!-- Descending -->
+                    <svg
+                      v-else
+                      class="h-4 w-4 text-blue-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </div>
+                </div>
+              </th>
+              <!-- Actions column -->
+              <th v-if="$slots['item-actions'] || showActions" :class="['h-10 px-3 text-end align-middle font-medium', headerText]">
+                <Button 
+                  v-if="inlineEdit"
+                  :label="editMode ? 'Cancel Edit' : 'Inline Edit'"
+                  :color="editMode ? 'danger' : 'primary'"
+                  size="xs"
+                  @click="toggleEditMode"
+                />
+              </th>
+            </tr>
+          </thead>
+
+          <!-- Table Body -->
+          <tbody :class="[rowBorder, loading ? 'opacity-50 pointer-events-none' : '']">
+            <!-- No Data State -->
+            <tr v-if="!items || items.length === 0">
+              <td :colspan="totalColumns" 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>
+              </td>
+            </tr>
+
+            <!-- Data Rows -->
+            <tr
+              v-else
+              v-for="(item, index) in items"
+              :key="getItemKey(item, index)"
+              :class="[
+                'transition-colors cursor-pointer',
+                rowHover,
+                selectedItems.includes(getItemKey(item, index)) ? rowSelected : ''
+              ]"
+              @click="handleRowClick(item, index)"
+            >
+              <!-- Selection checkbox -->
+              <td v-if="selectable" class="px-6 py-4">
+                <div class="flex items-center justify-center">
+                  <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>
+              </td>
+
+              <!-- Data columns -->
+              <template v-for="header in headers" :key="header.value">
+                <td
+                  :class="[
+                    'px-6 py-4 whitespace-nowrap',
+                    header.displayType == 'englishText' ? 'eng-font' : 'faruma ',
+                    getColumnFont(header.lang)
+                  ]"
+                  @click.stop
+                >
+                  <slot
+                    :name="`item.${header.value}`"
+                    :item="item"
+                    :value="getNestedValue(item, header.value)"
+                    :header="header"
+                    :index="index"
+                  >
+                    <!-- Chip Display -->
+                    <div v-if="header.displayType == 'chip'" 
+                      :class="['align-middle leading-none', getColumnFont(header.lang)]"
+                    >
+                      <Chip 
+                        size="small" 
+                        v-bind="header.displayProps?.[getNestedValue(item, header.value)]"
+                      />
+                    </div>
+                    
+                    <!-- Checkbox (Inline Editable) -->
+                    <div v-else-if="header.displayType == 'checkbox'" 
+                      :class="['align-middle leading-none', 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>
+                    
+                    <!-- Select (Inline Editable) -->
+                    <div v-else-if="header.displayType == 'select'" 
+                      :class="['align-middle leading-none', getColumnFont(header.lang)]"
+                    >
+                      <Select 
+                        v-if="editMode && header.inlineEditable"
+                        :model-value="getNestedValue(item, header.value)"
+                        v-bind="header.displayProps"
+                        @update:model-value="(value) => handleCellUpdate(item, header.value, value, index)"
+                      />
+                      <div v-else :class="['text-sm', cellText]">
+                        {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                      </div>
+                    </div>
+                    
+                    <!-- Text Input (Inline Editable) -->
+                    <div v-else-if="header.displayType == 'input'" 
+                      :class="['align-middle leading-none', getColumnFont(header.lang)]"
+                    >
+                      <input
+                        v-if="editMode && header.inlineEditable"
+                        :value="getNestedValue(item, header.value)"
+                        type="text"
+                        class="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-primary"
+                        @input="(e) => handleCellUpdate(item, header.value, e.target.value, index)"
+                      />
+                         <div v-else :class="['text-sm', cellText]">
+                        {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                      </div>
+                    </div>
+                    
+                    <!-- Default Text Display -->
+                    <div v-else :class="['text-sm', cellText]">
+                      {{ formatCellValue(getNestedValue(item, header.value), header) }}
+                    </div>
+                  </slot>
+                </td>
+              </template>
+
+              <!-- Actions -->
+              <td v-if="$slots['item-actions'] || showActions" class="px-6 py-4">
+                <slot name="item-actions" :item="item" :index="index">
+                  <div class="flex items-center justify-end space-x-2">
+                    <Button v-if="showView" @click.stop="emit('view', item)" size="md" color="info" variant="text" icon="eye" icon-type="outline"  label="" />
+                    <Button v-if="showEdit" @click.stop="emit('edit', item)" size="md" icon="pencil-square" color="warning" variant="text" label="" />
+                    <Button v-if="showDelete" @click.stop="emit('delete', item)" size="md" color="danger" variant="text" icon="trash" label="" />
+                  </div>
+                </slot>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination Component -->
+      <Pagination
+        v-if="!hidePagination && !loading"
+        v-model:page="internalOptions.page"
+        v-model:items-per-page="internalOptions.itemsPerPage"
+        :items-length="internalOptions.itemsLength"
+        :items-per-page-options="itemsPerPageOptions"
+        :bg="paginationBg"
+        :border="paginationBorder"
+        :text-color="'text-textsecondary'"
+        :input-border="inputBorder"
+        :button-primary="buttonPrimary"
+        :button-secondary="buttonSecondary"
+        @change="handlePaginationChange"
+      />
+    </div>
+
+    <!-- Footer slot -->
+    <div v-if="$slots.footer" class="mt-4">
+      <slot name="footer" />
+    </div>
+
+    <!-- Confirmation Modal -->
+     <Model 
+      v-model="showConfirmation" 
+      persistent 
+      lang="en"
+
+      title="Confirm Update"
+    >
+      <p class="text-sm text-gray-600 mb-6">
+          Are you sure you want to update <strong>{{ pendingUpdate.header }}</strong> 
+          from <strong>{{ pendingUpdate.oldValue }}</strong> to <strong>{{ pendingUpdate.newValue }}</strong>?
+      </p>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+            <Button
+            label="Cancel"
+            color="secondary"
+            variant="outlined"
+            @click="cancelUpdate"
+          />
+          <Button
+            label="Confirm"
+            color="primary"
+            :loading="updateLoading"
+            @click="confirmUpdate"
+          />
+        </div>
+      </template>
+     </Model>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from 'vue'
+import Button from '../pgo/Button.vue'
+import Pagination from '../pgo/Pagination.vue'
+import Chip from '../pgo/buttons/Chip.vue'
+import Checkbox from '../pgo/inputs/Checkbox.vue'
+import Select from '../pgo/inputs/Select.vue'
+import Model from '../pgo/Modal.vue'
+
+const props = defineProps({
+  // Data
+  items: {
+    type: Array,
+    default: () => []
+  },
+  headers: {
+    type: Array,
+    required: true
+  },
+  
+  // Server-side options
+  serverSideOptions: {
+    type: Object,
+    default: () => ({
+      page: 1,
+      itemsPerPage: 10,
+      sortBy: [],
+      sortDesc: [],
+      itemsLength: 0
+    })
+  },
+
+  // Table configuration
+  title: {
+    type: String,
+    default: ''
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingText: {
+    type: String,
+    default: 'Loading...'
+  },
+  noDataText: {
+    type: String,
+    default: 'No data available'
+  },
+  
+  // Features
+  showActions: {
+    type: Boolean,
+    default: true
+  },
+  searchable: {
+    type: Boolean,
+    default: false
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Search...'
+  },
+  showView: {
+    type: Boolean,
+    default: true
+  },
+  showEdit: {
+    type: Boolean,
+    default: true
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  },
+
+  inlineEdit: {
+    type: Boolean,
+    default: false
+  },
+  updateUrl: {
+    type: String,
+    default: '' // API endpoint for updates
+  },
+
+  // Styling props - using Card defaults
+  tableClass: {
+    type: String,
+    default: ''
+  },
+  headerClass: {
+    type: String,
+    default: ''
+  },
+  // Container styling
+  bg: {
+    type: String,
+    default: 'bg-background'
+  },
+  border: {
+    type: String,
+    default: 'border-0'
+  },
+  rounded: {
+    type: String,
+    default: 'rounded-sm'
+  },
+  shadow: {
+    type: String,
+    default: 'shadow-none'
+  },
+  
+  // Header styling
+  headerBg: {
+    type: String,
+    default: 'bg-surface-elevated'
+  },
+  headerBorder: {
+    type: String,
+    default: 'border-b border-input-border'
+  },
+  headerText: {
+    type: String,
+    default: 'text-textcolor'
+  },
+  
+  // Row styling
+  rowBorder: {
+    type: String,
+    default: 'divide-y divide-input-border'
+  },
+  rowHover: {
+    type: String,
+    default: 'hover:bg-input-hover-border'
+  },
+  rowSelected: {
+    type: String,
+    default: 'bg-surface-elevated'
+  },
+  cellText: {
+    type: String,
+    default: 'text-textcolor'
+  },
+  
+  // Input styling
+  inputBorder: {
+    type: String,
+    default: 'border-input-border focus:border-input-focus-border focus:ring-input-focus-ring'
+  },
+  
+  // Button styling
+  buttonPrimary: {
+    type: String,
+    default: 'bg-primary hover:bg-secondary text-white'
+  },
+  buttonSecondary: {
+    type: String,
+    default: 'bg-surface hover:bg-input-hover-border text-textcolor border border-input-border'
+  },
+  
+  // Pagination styling
+  paginationBg: {
+    type: String,
+    default: 'bg-background'
+  },
+  paginationBorder: {
+    type: String,
+    default: 'border-t border-input-border'
+  },
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  hidePagination: {
+    type: Boolean,
+    default: false
+  },
+
+  // Pagination
+  itemsPerPageOptions: {
+    type: Array,
+    default: () => [5, 10, 25, 50, 100]
+  },
+
+  // Item key
+  itemKey: {
+    type: String,
+    default: 'id'
+  }
+})
+
+const emit = defineEmits([
+  'update:options',
+  'update:cell',
+  'inline-update', // New event for inline updates
+  'row-click',
+  'selection-change',
+  'search',
+  'view',
+  'edit',
+  'delete'
+])
+
+// Internal state
+const searchQuery = ref('')
+const selectedItems = ref([])
+const searchTimeout = ref(null)
+const editMode = ref(false)
+const showConfirmation = ref(false)
+const updateLoading = ref(false)
+const pendingUpdate = ref({
+  item: null,
+  key: '',
+  newValue: null,
+  oldValue: null,
+  header: '',
+  index: null
+})
+
+// Internal options that sync with parent
+const internalOptions = ref({
+  page: 1,
+  itemsPerPage: 10,
+  sortBy: [],
+  sortDesc: [],
+  itemsLength: 0,
+  search: '',
+  ...props.serverSideOptions
+})
+
+// Methods
+const handlePaginationChange = ({ page, itemsPerPage }) => {
+  internalOptions.value.page = page
+  internalOptions.value.itemsPerPage = itemsPerPage
+  emitOptionsUpdate()
+}
+
+// Computed properties
+const totalColumns = computed(() => {
+  let count = props.headers.length
+  if (props.selectable) count++
+  if (props.$slots?.['item-actions']) count++
+  return count
+})
+
+
+const allSelected = computed(() => {
+  return props.items.length > 0 && selectedItems.value.length === props.items.length
+})
+
+const someSelected = computed(() => {
+  return selectedItems.value.length > 0 && !allSelected.value
+})
+
+// Methods
+const getItemKey = (item, index) => {
+  return item[props.itemKey] ?? index
+}
+
+// const getNestedValue = (obj, path) => {
+//   return path.split('.').reduce((current, key) => current?.[key], obj)
+// }
+const getNestedValue = (obj, path) => {
+  if (!path) return '' // Safety check
+  return path.split('.').reduce((current, key) => current?.[key], obj)
+}
+
+const formatCellValue = (value, header) => {
+  if (header.format && typeof header.format === 'function') {
+    return header.format(value)
+  }
+  return value ?? ''
+}
+
+const toggleSort = (key) => {
+  // Find the header to check if it's sortable
+  const header = props.headers.find(h => h.key === key)
+  
+  // Don't sort if explicitly marked as not sortable
+  if (header && header.sortable === false) {
+    console.log('Column is not sortable:', key)
+    return
+  }
+  
+  const sortBy = [...internalOptions.value.sortBy]
+  const sortDesc = [...internalOptions.value.sortDesc]
+  
+  const index = sortBy.findIndex(item => item === key)
+  
+  if (index === -1) {
+    // Add new sort
+    sortBy.push(key)
+    sortDesc.push(false)
+    console.log('Adding new sort - ASC')
+  } else {
+    // Toggle existing sort
+    if (!sortDesc[index]) {
+      sortDesc[index] = true
+      console.log('Changing to DESC')
+    } else {
+      // Remove sort
+      sortBy.splice(index, 1)
+      sortDesc.splice(index, 1)
+      console.log('Removing sort')
+    }
+  }
+  
+  internalOptions.value.sortBy = sortBy
+  internalOptions.value.sortDesc = sortDesc
+  internalOptions.value.page = 1 // Reset to first page
+  
+  
+  emitOptionsUpdate()
+}
+
+const isSorted = (key) => {
+  return internalOptions.value.sortBy.includes(key)
+}
+
+const getSortDirection = (key) => {
+  const index = internalOptions.value.sortBy.findIndex(item => item === key)
+  if (index === -1) return null
+  return internalOptions.value.sortDesc[index] ? 'desc' : 'asc'
+}
+
+const getColumnFont = (lang) => {
+  if (!lang) return ''
+  
+  const fontMap = {
+    'en': 'font-inter',       // or whatever your English font is
+    'dv': 'faruma',      // Dhivehi font
+    // Add more languages as needed
+  }
+  
+  return fontMap[lang] || ''
+}
+
+const debounceSearch = () => {
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+  
+  searchTimeout.value = setTimeout(() => {
+    internalOptions.value.search = searchQuery.value
+    internalOptions.value.page = 1
+    emitOptionsUpdate()
+    emit('search', searchQuery.value)
+  }, 500)
+}
+
+const handleRowClick = (item, index) => {
+  emit('row-click', item, index)
+}
+
+const toggleItemSelection = (item, index) => {
+  const key = getItemKey(item, index)
+  const currentIndex = selectedItems.value.indexOf(key)
+  
+  if (currentIndex === -1) {
+    selectedItems.value.push(key)
+  } else {
+    selectedItems.value.splice(currentIndex, 1)
+  }
+  
+  emit('selection-change', selectedItems.value, getSelectedItems())
+}
+
+const toggleSelectAll = () => {
+  if (allSelected.value) {
+    selectedItems.value = []
+  } else {
+    selectedItems.value = props.items.map((item, index) => getItemKey(item, index))
+  }
+  
+  emit('selection-change', selectedItems.value, getSelectedItems())
+}
+
+const getSelectedItems = () => {
+  return props.items.filter((item, index) => 
+    selectedItems.value.includes(getItemKey(item, index))
+  )
+}
+
+const emitOptionsUpdate = () => {
+  emit('update:options', { ...internalOptions.value })
+}
+
+// Toggle edit mode
+const toggleEditMode = () => {
+  editMode.value = !editMode.value
+  if (!editMode.value) {
+    // Cancel any pending changes
+    showConfirmation.value = false
+  }
+}
+
+// Handle cell update
+const handleCellUpdate = (item, key, newValue, index) => {
+  const header = props.headers.find(h => h.key === key)
+  const oldValue = getNestedValue(item, key)
+  
+  // Only show confirmation if value actually changed
+  if (oldValue === newValue) return
+  
+  pendingUpdate.value = {
+    item,
+    key,
+    newValue,
+    oldValue,
+    header: header?.title || key,
+    index
+  }
+  
+  showConfirmation.value = true
+}
+
+// Confirm and send update
+const confirmUpdate = async () => {
+  updateLoading.value = true
+  
+  try {
+    const { item, key, newValue, index } = pendingUpdate.value
+    
+    // Prepare update data
+    const updateData = {
+      [props.itemKey]: item[props.itemKey],
+      [key]: newValue
+    }
+    
+    // Emit event to parent
+    emit('inline-update', {
+      item,
+      key,
+      value: newValue,
+      index,
+      updateData
+    })
+    
+    // If updateUrl is provided, send API request
+    if (props.updateUrl) {
+      const api = inject('api', null)
+      if (api) {
+        const url = `${props.updateUrl}/${item[props.itemKey]}`
+        await api.patch(url, updateData)
+      }
+    }
+    
+    // Update local data
+    item[key] = newValue
+    
+    // Reset confirmation
+    showConfirmation.value = false
+    updateLoading.value = false
+    pendingUpdate.value = {
+      item: null,
+      key: '',
+      newValue: null,
+      oldValue: null,
+      header: '',
+      index: null
+    }
+  } catch (error) {
+    console.error('Update failed:', error)
+    updateLoading.value = false
+    // You can add error handling here
+  }
+}
+
+// Cancel update
+const cancelUpdate = () => {
+  showConfirmation.value = false
+  pendingUpdate.value = {
+    item: null,
+    key: '',
+    newValue: null,
+    oldValue: null,
+    header: '',
+    index: null
+  }
+}
+
+// Watchers
+watch(() => props.serverSideOptions, (newOptions) => {
+  internalOptions.value = { ...internalOptions.value, ...newOptions }
+}, { deep: true })
+
+// Clear selection when items change
+watch(() => props.items, () => {
+  selectedItems.value = []
+}, { deep: true })
+
+// Initialize
+onMounted(() => {
+  if (props.serverSideOptions) {
+    internalOptions.value = { ...internalOptions.value, ...props.serverSideOptions }
+  }
+
+})
+</script>
+
+<style scoped>
+/* Only essential styles - everything else uses Tailwind classes */
+
+@keyframes loading-bar {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+
+.animate-loading-bar {
+  animation: loading-bar 1.5s ease-in-out infinite;
+}
+
+/* Table collapse */
+table {
+  /* border-collapse: separate; */
+  border-spacing: 0;
+}
+
+/* Checkbox indeterminate state */
+input[type="checkbox"]:indeterminate::after {
+  content: '';
+  position: absolute;
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: currentColor;
+  border-radius: 0.125rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>