pgo-ui 1.0.21 → 1.0.22

package/package.json

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

package/src/components/pgo/Card.vue

@@ -90,12 +90,12 @@ const { language } = inject('i18n')
 
         //footer props
         footerClass: { type: String, default: '' },
-        footerBg: { type: String, default: '' },
+        footerBg: { type: String, default: 'vts-bg-surface' },
         footerText: { type: String, default: 'text-input-text' },
         footerTextSize: { type: String, default: '' },
         footerBd: { type: String, default: '' },
         footerMargin: { type: String, default: '' },
-        footerPadding: { type: String, default: 'px-6 py-4' },
+        footerPadding: { type: String, default: 'px-4 py-4' },
 
     })
 

package/src/components/pgo/SearchBox.vue

@@ -45,28 +45,29 @@
                     @focus="handleFocus"
                     @blur="handleBlur"
                 />
-                <Button 
-                    type="button" 
-                    label="buttons.search"
-                    variant="tonal" 
-                    prepend-icon="magnifying-glass"
-                    size="xs" 
-                    icon-type="soild"
-                    :icon-rotate="props.iconRotate ? props.iconRotate : (computedLang === 'dv' ? 90 : 0)"
-                    :disabled="disabled || loading"
-                    @click="handleSubmit"  
-                />              
+                             
                     <!-- :icon-rotate="props.iconRotate ?? (computedLang === 'dv' ? 180 : 0)" -->
             </div>
         </template>
 
 
       <!-- Loading spinner in append slot -->
-      <template v-if="loading" #append>
-        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+      <template #append>
+        <svg v-if="loading" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
+        <Button 
+            type="button" 
+            label="buttons.search"
+            variant="tonal" 
+            prepend-icon="magnifying-glass"
+            size="xs" 
+            icon-type="soild"
+            :icon-rotate="props.iconRotate ? props.iconRotate : (computedLang === 'dv' ? 90 : 0)"
+            :disabled="disabled || loading"
+            @click="handleSubmit"  
+        /> 
       </template>
     </Base>
   </div>

package/src/components/pgo/base/Base.vue

@@ -46,6 +46,7 @@
             <HeroIcon :size="iconSizes[size]" :name="append" :type="iconType == 'outline' ? 'outline' : 'solid'" />
           </slot>
         </div>
+        <!-- <slot name="" -->
       </div>
     </div>
     <div v-if="messagesToShow.length" :class="['.vts-mt-1 text-xs', selectLanguage === 'dv' ? 'text-right' : 'text-left', 'text-input-text']">

package/src/components/pgo/forms/DynamicForm.vue

@@ -3,11 +3,12 @@
         v-model="open" 
         persistent
         padding="p-3"
+        :bg="bg"
     >
         <Banner
             v-if="form?.banner"
             v-bind="form?.banner"
-            bannerClass="mb-4"
+            bannerClass="mb-4" 
         />
         <Form 
             v-model="valid"
@@ -19,11 +20,12 @@
                 type="hidden"
             />
             <!-- Render grouped fields --> 
+             <!-- A0111904 -->
             <template v-if="form.groups">
                 <template v-for="(group, id) in form.groups" :key="id">
                     <div v-if="shouldShowGroup(group)" class="mb-4">
-                        <div :class="['relative grid border border-gray-300 rounded px-4 py-4 ', gridColsMap[group.numberOfColumns] || gridColsMap[2], 'gap-2']">
-                            <div v-if="group.title" :class="['absolute top-0 -translate-y-1/2 bg-white px-2 text-sm font-semibold mb-2', lang === 'dv' ? 'right-4' : 'left-4']">
+                        <div :class="['relative grid border border-gray-300 rounded px-4 pt-6 pb-4', bg, gridColsMap[group.numberOfColumns] || gridColsMap[2], 'gap-2']">
+                            <div v-if="group.title" :class="['absolute top-0 -translate-y-1/2 bg-inherit px-2 text-sm font-semibold mb-2', lang === 'dv' ? 'right-4' : 'left-4']">
                                 {{ group.title ? useLanguageSelected(group.title, lang) : '' }}
                             </div>
                             <template 
@@ -90,7 +92,7 @@
             </div>
         </Form>
         <template #footer>
-            <div class="flex justify-end gap-2">
+            <div class="flex justify-end gap-2 ">
                 <Button v-if="mode == 'edit'"
                     label="buttons.edit" 
                     color="primary" 
@@ -148,7 +150,9 @@
         lang:{ type: String, default: 'dv' },
         crudLink:{ type: String },
         editItemId: { type: [String, Number], default: null },
-        mode: { type: String, default: 'create', enum: ['create', 'edit'] }
+        mode: { type: String, default: 'create', enum: ['create', 'edit'] },
+
+        bg: { type: String, default: 'bg-background-color' },
     });
 
     const api = inject('api');
@@ -234,17 +238,17 @@
                         formData[field.key] = false;
                         break;
                     case 'array':
-                        formData[field.key] = [];
+                        formData[field.key] = null;
                         break;
                     case 'object':
-                        formData[field.key] = {};
+                        formData[field.key] = null;
                         break;
                     case 'string':
                     default:
                        if (field.inputType === 'checkbox') {
                             formData[field.key] = false; // Default checkboxes to false
                         } else {
-                            formData[field.key] = '';
+                            formData[field.key] = null;
                         }
                         break;
                 }
@@ -754,7 +758,8 @@
             
         } catch (error) {
             console.error('Form submission error:', error);
-        
+            const errorMessage = error.response?.data?.message || 'Form submission failed';
+            snackbar?.show({ message: errorMessage, variant: 'error' });
             if (error.response?.status === 422 || error.response?.data?.errors) {
                 const backendErrors = error.response.data.errors;
 
@@ -765,7 +770,6 @@
                 }
                 
                 const errorMessage = error.response.data.message || 'Validation failed';
-                snackbar?.show({ message: errorMessage, variant: 'error' });
                 emit('submit:error', error);
             }
         } finally {

package/src/components/pgo/forms/Form.vue

@@ -1,5 +1,6 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <form @submit.prevent="handleSubmit" enctype="multipart/form-data">
+
     <slot 
       :isValid="isValid" 
       :validate="validate"

package/src/pgo-components/lib/componentConfig.js

@@ -62,7 +62,7 @@ export const colorMap = {
     tonal: 'bg-blue-50 vts-text-info vts-transition-colors hover:bg-blue-100'
   },
   gray: {
-    contained: 'vts-bg-surface-elevated vts-text vts-transition-colors vts-hover-bg-surface',
+    contained: 'bg-gray-200 text-gray-700 vts-transition-colors hover:bg-gray-300',
     outlined: 'vts-border vts-border-color vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
     text: 'vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
     tonal: 'vts-bg-border-light vts-text-secondary vts-transition-colors vts-hover-bg-surface'

package/src/pgo-components/pages/ListView.vue

@@ -1,24 +1,7 @@
 <template>
     <div class="mx-auto m-4">
         <template v-if="items">
-            <!-- <Card >
-                <SearchBox 
-                    v-model="search"
-                    label="Find Users"
-                />
-            </Card> -->
-            <DynamicForm 
-                v-if="showDynamicForm && items.componentSettings?.form"
-                :form="items.componentSettings?.form"
-                rounded="sm"
-                :title="useLanguageSelected(formMode == 'edit' ? items.componentSettings?.form?.editTitle : items.componentSettings?.form?.createTitle) || ''"
-                @close="showDynamicForm = false"
-                @submit:success="handleFormSubmit"
-                :lang="lang"
-                :crud-link="props.items?.componentSettings?.meta?.crudLink"
-                :edit-item-id="editItemId"
-                :mode="formMode"
-            />
+            <slot name="topSlot" />
 
             <!-- <hr class="border-input-border my-2" /> -->
              <Card 
@@ -28,22 +11,24 @@
                 margin="mb-4"
                 shadow="shadow-lg"
             >
-                <Toolbar 
-                    v-if="items.componentSettings?.toolbar"
-                    :elevation="false"
-                    color="none"
-                    variant="contained"
-                    :title="useLanguageSelected(items.componentSettings?.toolbar?.title)"
-                    :quick-filters="items.componentSettings?.toolbar?.filters"
-                    :filter-section="items.componentSettings?.filterSection ? true : false"
-                    :filter-values="quickFilterValues"
-                    :filter-section-values="filterSectionValues"
-                    @update:filter-values="quickFilterValues = $event"
-                    @show-filter-section="showFilters = !showFilters"
-                    @search="handleSearch"
-                    @refresh="handleRefresh"
-                    @create-button="handleCreateButton"
-                />
+                <slot name="toolbar">
+                    <Toolbar 
+                        v-if="items.componentSettings?.toolbar"
+                        :elevation="false"
+                        color="none"
+                        variant="contained"
+                        :title="useLanguageSelected(items.componentSettings?.toolbar?.title)"
+                        :quick-filters="items.componentSettings?.toolbar?.filters"
+                        :filter-section="items.componentSettings?.filterSection ? true : false"
+                        :filter-values="quickFilterValues"
+                        :filter-section-values="filterSectionValues"
+                        @update:filter-values="quickFilterValues = $event"
+                        @show-filter-section="showFilters = !showFilters"
+                        @search="handleSearch"
+                        @refresh="handleRefresh"
+                        @create-button="handleCreateButton"
+                    />
+                </slot>
                 <Transition
                     enter-active-class="transition-all duration-300 ease-out"
                     enter-from-class="transform -translate-y-4 opacity-0"
@@ -60,46 +45,49 @@
                     bg=""
                     margin="mt-2"
                 >
-                    <FilterSection
-                        dir=""
-                        grid
-                        :grid-columns="2"
-                        v-model="filterSectionValues"
-                        rounded=""
-                        :filters="items.componentSettings.filterSection.filters"
-                        :buttons="items.componentSettings.filterSection.buttons"
-                        @search="handleSearch"
-                        @submit="handleSearch"
-                        @close="showFilters = false"
-                    />
-
+                    <slot name="filterSection">
+                        <FilterSection
+                            dir=""
+                            grid
+                            :grid-columns="2"
+                            v-model="filterSectionValues"
+                            rounded=""
+                            :filters="items.componentSettings.filterSection.filters"
+                            :buttons="items.componentSettings.filterSection.buttons"
+                            @search="handleSearch"
+                            @submit="handleSearch"
+                            @close="showFilters = false"
+                        />
+                    </slot>
                 </Card>
             </Transition>
             </Card>
-            <DataTable
-                v-if="props.items?.componentSettings?.table?.headers.length > 0"
-                dir=""
-                :items="tableData.data"
-                :settings="props.items?.componentSettings?.table"
-                :server-side-options="options"
-                :loading="tableLoading"
-                title=""
-                :lang="lang"
-                @update:options="handleOptionsUpdate"
-                :show-actions="items.componentSettings?.table?.showActions ?? true"
-                :show-view="items.componentSettings?.table?.actions?.showView ?? true"
-                :show-edit="items.componentSettings?.table?.actions?.showEdit ?? true"
-                :show-delete="items.componentSettings?.table?.actions?.showDelete ?? true"
-                :inline-edit="items.componentSettings?.table?.showInlineEdit ?? true"
-                @inline-update="handleInlineUpdate"
-                @view="handleView"
-                @edit="handleEdit"
-                @delete="handleDelete"
-            />
-            <div v-else class="p-8">
-                <p>No headers found</p>
-                <!-- <pre>{{ JSON.stringify(items.componentSettings, null, 2) }}</pre> -->
-            </div>
+            <slot name="table" >
+                <DataTable
+                    v-if="props.items?.componentSettings?.table?.headers.length > 0"
+                    dir=""
+                    :items="tableData.data"
+                    :settings="props.items?.componentSettings?.table"
+                    :server-side-options="options"
+                    :loading="tableLoading"
+                    title=""
+                    :lang="lang"
+                    @update:options="handleOptionsUpdate"
+                    :show-actions="items.componentSettings?.table?.showActions ?? true"
+                    :show-view="items.componentSettings?.table?.actions?.showView ?? true"
+                    :show-edit="items.componentSettings?.table?.actions?.showEdit ?? true"
+                    :show-delete="items.componentSettings?.table?.actions?.showDelete ?? true"
+                    :inline-edit="items.componentSettings?.table?.showInlineEdit ?? true"
+                    @inline-update="handleInlineUpdate"
+                    @view="handleView"
+                    @edit="handleEdit"
+                    @delete="handleDelete"
+                />
+                <div v-else class="p-8">
+                    <p>No headers found</p>
+                    <!-- <pre>{{ JSON.stringify(items.componentSettings, null, 2) }}</pre> -->
+                </div>
+            </slot>
 
             
         </template>
@@ -107,24 +95,42 @@
             <p>No data</p>
         </div>
 
+        <!-- FORM -->
+        <slot name="form">
+            <DynamicForm 
+                v-if="showDynamicForm && items.componentSettings?.form"
+                :form="items.componentSettings?.form"
+                rounded="sm"
+                :title="useLanguageSelected(formMode == 'edit' ? items.componentSettings?.form?.editTitle : items.componentSettings?.form?.createTitle) || ''"
+                @close="showDynamicForm = false"
+                @submit:success="handleFormSubmit"
+                :lang="lang"
+                :crud-link="props.items?.componentSettings?.meta?.crudLink"
+                :edit-item-id="editItemId"
+                :mode="formMode"
+            />
+        </slot>
         <!-- Delete Confirmation Modal -->
-        <ConfirmationModal
-            v-model="showConfirmation"
-            :item="DeleteItem"
-            :title="items.componentSettings?.table?.delete?.title || 'Delete Confirmation'"
-            :subtitle="items.componentSettings?.table?.delete?.subtitle || 'Are you sure you want to delete this item?'"
-            type="warning"
-            @confirm="handleDeleteConfirm"
-            @cancel="showConfirmation = false; DeleteItem = null"
-        >
-            <div 
-                v-if="items.componentSettings?.table?.delete?.message"
-                v-for="(message, key) in items.componentSettings?.table?.delete?.message"
-                :key="key"
+        <slot name="delete">
+            <ConfirmationModal
+                v-model="showConfirmation"
+                :item="DeleteItem"
+                :title="items.componentSettings?.table?.delete?.title || 'Delete Confirmation'"
+                :subtitle="items.componentSettings?.table?.delete?.subtitle || 'Are you sure you want to delete this item?'"
+                type="warning"
+                @confirm="handleDeleteConfirm"
+                @cancel="showConfirmation = false; DeleteItem = null"
             >
-                <p><b>{{ useLanguageSelected(message) }}:</b> {{ DeleteItem[key] }}</p>
-            </div>
-        </ConfirmationModal>
+                <div 
+                    v-if="items.componentSettings?.table?.delete?.message"
+                    v-for="(message, key) in items.componentSettings?.table?.delete?.message"
+                    :key="key"
+                >
+                    <p><b>{{ useLanguageSelected(message) }}:</b> {{ DeleteItem[key] }}</p>
+                </div>
+            </ConfirmationModal>
+        </slot>
+        <slot name="bottomSlot" />
     </div>
 </template>
 
@@ -154,7 +160,7 @@ const props = defineProps({
 
 const tableLoading = ref(props.loading)
 
-const emit = defineEmits(['update:queryParams'])
+const emit = defineEmits(['update:queryParams', 'items'])
 
 const showFilters = ref(false)
 // const searchbar = ref({})
@@ -227,14 +233,9 @@ watch(() => props.items, (newItems) => {
             }
         }
     } 
+    emit('items', newItems)
 }, { immediate: true, deep: true })
 
-// const headers = computed(() => {
-//     const headersFromTable = props.items?.componentSettings?.table?.headers
-//     const headersFromSettings = props.items?.componentSettings?.headers
-    
-//     return headersFromTable || headersFromSettings || []
-// })
 
 // Handle options update from DataTable
 const handleOptionsUpdate = (newOptions) => {

package/src/pgo-components/pages/customSlot.vue

@@ -0,0 +1,3 @@
+<template>
+    this is a custom slot
+</template>