pgo-uiux2 1.0.0

package/src/components/pgo/filters/Searchbar.vue

@@ -0,0 +1,216 @@
+<template>
+    <Card
+        v-if="modelValue"
+        :model-value="modelValue"
+        :bg="''"
+        :border="''"
+        :margin="'m-0'"
+        :padding="'py-0 px-2'"
+        @update:modelValue="(val) => emit('update:modelValue', val)"
+    >
+        <div class="w-full flex gap-4 justify-between items-center">
+            <!-- searchbar title -->
+            <div class="flex gap-2 font-semibold text-lg">
+                <h1>{{ title }}</h1> 
+            </div>
+            <div class="flex gap-2 items-center">
+                <!-- create btn -->
+                <Button
+                    v-if="createButton"
+                    label="Create"
+                    color="primary"
+                    prepend-icon="plus"
+                    variant="outlined"
+                    size="xs"
+                    class="stroke-2"
+                    @click="$emit('createButton')"
+                />
+
+                <!-- Dynamic searchbar filters -->
+                <div class="flex gap-2">
+                    <component
+                        v-for="(field, index) in quickFilters"
+                        :key="field.key || index"
+                        :is="getFieldComponent(field.type)"
+                        :model-value="quickFilterValues[field.key]"
+                        v-bind="getFieldProps(field)"
+                        @update:model-value="updateQuickFilter(field.key, $event)"
+                    />
+                </div>
+                
+                <!-- FilterSection component related -->
+                <div v-if="filterSection" class="flex gap-2">
+                    <!-- for filterSection selected filter count -->
+                    <Chip
+                        v-if="filterCountMessage"
+                        :label="filterCountMessage"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        :closable="false"
+                        :disabled="true"
+                    />
+                    <!-- show filterSection -->
+                    <Button
+                        label=""
+                        v-tooltip="showFilterSection ? 'Hide Filters' : 'Show Filters'"
+                        color="secondary"
+                        icon="funnel"
+                        variant="text"
+                        size="md"
+                        @click="handlefilterSectionToggle"
+                    /> 
+                </div>
+                <div  class="flex gap-2">
+                    <Button
+                        v-tooltip="'Refresh'"
+                        label=""
+                        color="gray"
+                        icon="arrow-path"
+                        variant="text"
+                        size="md"
+                        @click="$emit('refresh')"
+                    /> 
+                </div>
+            </div>
+        </div>
+    </Card>   
+</template>
+
+<script setup>
+import { ref, computed, defineAsyncComponent } from 'vue'
+import Banner from '../Banner.vue'
+import Button from '../Button.vue'
+import HeroIcon from '../HeroIcon.vue'
+import Chip from '../buttons/Chip.vue'
+import Card from '../Card.vue'
+import { margins } from '../../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+    modelValue: { type: Boolean, default: true },
+    title: { type: String, default: '' },
+    margin: { type: String, default: '' },
+    bg: { type: String, default: 'primary' },
+    position: { type: String, default: 'top' },
+    border: { type: String, default: '' },
+    closeable: { type: Boolean, default: false },
+    sticky: { type: Boolean, default: false },
+    timeout: { type: Number, default: 0 },
+    showProgress: { type: Boolean, default: false },
+    rounded: { type: String, default: 'none' },
+    elevation: { type: Boolean, default: true },
+    outlined: { type: Boolean, default: false },
+    dense: { type: Boolean, default: true },
+    filterSection: { type: Boolean, default: true },
+    createButton: { type: Boolean, default: true },
+    quickFilters: { 
+        type: Array, 
+        default: () => [] // Quick access filters shown in searchbar
+    },
+    filterValues: { 
+        type: Object, 
+        default: () => ({}) // Values for quick filters
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:filterValues', 'createButton', 'close', 'dismiss', 'showFilterSection', 'search', 'refresh'])
+
+const showFilterSection = ref(false)
+ const handlefilterSectionToggle = () => {
+     showFilterSection.value = !showFilterSection.value
+     emit('showFilterSection', showFilterSection.value)
+ }
+
+const quickFilterValues = computed({
+    get: () => props.filterValues,
+    set: (val) => emit('update:filterValues', val)
+})
+
+// Dynamic component map - only imports components that are used
+const componentMap = computed(() => {
+    const map = {}
+    const usedTypes = new Set(props.quickFilters.map(f => f.type?.toLowerCase()))
+
+    if (usedTypes.has('search') || usedTypes.has('inputsearch')) {
+        map['search'] = defineAsyncComponent(() => import('../InputSearch.vue'))
+        map['inputsearch'] = defineAsyncComponent(() => import('../InputSearch.vue'))
+    }
+    
+    if (usedTypes.has('select')) {
+        map['select'] = defineAsyncComponent(() => import('../inputs/Select.vue'))
+    }
+    
+    if (usedTypes.has('textfield') || usedTypes.has('text')) {
+        map['textfield'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
+        map['text'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
+    }
+
+    if (usedTypes.has('datepicker') || usedTypes.has('date')) {
+        map['datepicker'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
+        map['date'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
+    }
+    
+    if (usedTypes.has('chipgroup')) {
+        map['chipgroup'] = defineAsyncComponent(() => import('../buttons/ChipGroup.vue'))
+    }
+
+    return map
+})
+
+const getFieldComponent = (type) => {
+    const normalizedType = type?.toLowerCase() || 'search'
+    return componentMap.value[normalizedType] || componentMap.value['search']
+}
+
+const getFieldProps = (field) => {
+    const { type, key, ...restProps } = field
+    
+    // Remove empty values to allow defaults to work
+    const cleanProps = Object.fromEntries(
+        Object.entries(restProps).filter(([_, value]) => value !== '' && value !== null && value !== undefined)
+    )
+    
+    // Convert camelCase props to kebab-case
+    if (cleanProps.itemText) {
+        cleanProps['item-text'] = cleanProps.itemText
+        delete cleanProps.itemText
+    }
+    if (cleanProps.itemValue) {
+        cleanProps['item-value'] = cleanProps.itemValue
+        delete cleanProps.itemValue
+    }
+    if (cleanProps.itemTitle) {
+        cleanProps['item-title'] = cleanProps.itemTitle
+        delete cleanProps.itemTitle
+    }
+    
+    return cleanProps
+}
+
+const updateQuickFilter = (key, value) => {
+    const normalizedValue = typeof value === 'object' && value !== null ? value.value : value
+    
+    emit('update:filterValues', {
+        ...props.filterValues,
+        [key]: normalizedValue
+    })
+    
+    // Auto-trigger search on quick filter change
+    emit('search', {
+        ...props.filterValues,
+        [key]: normalizedValue
+    })
+}
+
+// Count active filters
+const filterCountMessage = computed(() => {
+    if (props.message) return props.message
+    
+    const count = Object.values(props.filterValues).filter(val => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== '' && val !== null && val !== undefined
+    }).length
+    
+    return count > 0 ? `${count} filter${count > 1 ? 's' : ''} selected` : ''
+})
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+    <Modal v-model="open" persistent>
+      <template #header>
+        <div>
+            <h1 class="text-lg font-semibold" > create</h1>
+        </div>
+      </template>
+        <Form 
+            v-model="valid"
+        >
+
+        </Form>
+      <template #footer>
+        <div class="flex justify-end">
+            <Button label="Close" color="primary" @click="open = false"/>
+        </div>
+      </template>
+    </Modal>
+
+    
+
+</template>
+<script setup >
+    import { ref, computed, watch } from 'vue'
+    import Form from './Form.vue';
+    import Modal from '../Modal.vue'
+    import Button from '../Button.vue'
+
+    const valid = ref(true);
+    const open = ref(true);
+
+    const emit = defineEmits(['update:modelValue']);
+    const props = defineProps({
+        modelValue: { type: Boolean, default: false },
+    });
+
+    watch(() => props.modelValue, (newVal) => {
+        open.value = newVal;
+    });
+
+    watch(open, (newVal) => {
+        emit('update:modelValue', newVal);
+    });
+
+</script>

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

@@ -0,0 +1,132 @@
+<template>
+  <form @submit.prevent="handleSubmit">
+    <slot 
+      :isValid="isValid" 
+      :validate="validate"
+      :reset="reset"
+      :resetValidation="resetValidation"
+    />
+  </form>
+</template>
+
+<script setup>
+import { reactive, ref, provide, computed, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: null },
+  validateOn: {
+    type: String,
+    default: 'blur'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const fields = reactive(new Map())
+const errors = reactive({})
+const hasValidated = reactive({}) // Track which fields have been validated
+
+const register = (uid, field) => {
+  fields.set(uid, field)
+  // Mark as not validated initially
+  hasValidated[uid] = false
+}
+
+const unregister = (uid) => {
+  fields.delete(uid)
+  delete errors[uid]
+  delete hasValidated[uid]
+  updateModelValue()
+}
+
+const validate = async () => {
+  let allValid = true
+  Object.keys(errors).forEach(k => delete errors[k])
+
+  for (const [uid, field] of fields.entries()) {
+    if (field?.validate) {
+      hasValidated[uid] = true
+      const valid = await field.validate()
+      if (!valid) {
+        allValid = false
+      }
+    }
+  }
+
+  updateModelValue()
+  return { valid: allValid, errors: { ...errors } }
+}
+
+const reset = () => {
+  for (const [uid, field] of fields.entries()) {
+    if (field?.reset) {
+      field.reset()
+    }
+  }
+  resetValidation()
+}
+
+const resetValidation = () => {
+  for (const [uid, field] of fields.entries()) {
+    if (field?.resetValidation) {
+      field.resetValidation()
+    }
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  Object.keys(hasValidated).forEach(k => hasValidated[k] = false)
+  updateModelValue()
+}
+
+/**
+ * Called by Base input when validating
+ */
+const report = (uid, valid, fieldErrors) => {
+  hasValidated[uid] = true
+  
+  if (!valid) {
+    errors[uid] = fieldErrors
+  } else {
+    delete errors[uid]
+  }
+  
+  updateModelValue()
+}
+
+// Form is valid only if:
+// 1. All registered fields have been validated (hasValidated[uid] = true)
+// 2. No errors exist
+const isValid = computed(() => {
+  // Check if all fields have been validated
+  const allFieldsValidated = Array.from(fields.keys()).every(uid => hasValidated[uid] === true)
+  
+  // No errors and all fields validated
+  return allFieldsValidated && Object.keys(errors).length === 0
+})
+
+const updateModelValue = () => {
+  nextTick(() => {
+    if (props.modelValue !== null) {
+      emit('update:modelValue', isValid.value)
+    }
+  })
+}
+
+const handleSubmit = async () => {
+  const result = await validate()
+  emit('submit', result)
+}
+
+provide('formContext', {
+  register,
+  unregister,
+  validate: report,
+  validateOn: computed(() => props.validateOn)
+})
+
+defineExpose({
+  validate,
+  reset,
+  resetValidation,
+  isValid
+})
+</script>

package/src/components/pgo/index.ts

@@ -0,0 +1,15 @@
+import AppBar from './AppBar.vue'
+import Button from './Button.vue'
+import Card from './Card.vue'
+import Chip from './buttons/Chip.vue'
+import ChipGroup from './buttons/ChipGroup.vue'
+import DataTable from './DataTable.vue'
+import Dropdown from './Dropdown.vue'
+import HeroIcon from './HeroIcon.vue'
+import Select from './inputs/Select.vue'
+import NavDrawer from './NavDrawer.vue'
+import NavDrawerItem from './NavDrawerItem.vue'
+import FileUpload from './inputs/FileUpload.vue'
+import Form from './forms/Form.vue'
+
+export { AppBar, Button, Card, Chip, ChipGroup, DataTable, Dropdown, HeroIcon, Select, NavDrawer, NavDrawerItem, FileUpload, Form }