pgo-ui 1.0.0

package/src/pgo-components/lib/core/defaults/createDefaults.ts

@@ -0,0 +1,5 @@
+import { globalDefaults } from "./defaults.ts";
+
+export function createDefaults(options: Record<string, any>) {
+    Object.assign(globalDefaults, options.defaults || {})
+}

package/src/pgo-components/lib/core/defaults/defaults.ts

@@ -0,0 +1,7 @@
+import { reactive } from "vue";
+
+export interface DefaultOptions {
+    [componentName: string]: Record<string, any>
+}
+
+export const globalDefaults = reactive<DefaultOptions>({});

package/src/pgo-components/lib/core/rtl/rtl.ts

@@ -0,0 +1,3 @@
+import { ref } from "vue"
+
+export const globalRtl = ref(true)

package/src/pgo-components/lib/core/rtl/setRtl.ts

@@ -0,0 +1,19 @@
+import { globalRtl } from './rtl.ts'
+import { computed, inject, ref, onMounted } from 'vue'
+
+export function setRtl(value: boolean) {
+    globalRtl.value = value
+
+    localStorage.setItem('rtlSetting', JSON.stringify(value));
+
+    // Update document direction and toggle a global font class
+    if (typeof document !== 'undefined') {
+        document.documentElement.setAttribute('dir', value ? 'rtl' : 'ltr')
+        document.documentElement.setAttribute('lang', (value == true) ? 'dv' : 'en')
+        if (value) {
+            document.documentElement.classList.add('rtl-font')
+        } else {
+            document.documentElement.classList.remove('rtl-font')
+        }
+    }
+}

package/src/pgo-components/lib/drawerState.ts

@@ -0,0 +1,3 @@
+import { ref } from 'vue'
+
+export const drawerOpen = ref(true)

package/src/pgo-components/lib/i18n/defaultLables.js

@@ -0,0 +1,71 @@
+
+export const messages = {
+  en: {
+    buttons: {
+      submit: 'Submit',
+      cancel: 'Cancel',
+      save: 'Save',
+      add: 'Add',
+      ok: 'OK',
+      print: 'Print',
+      download: 'Download',
+      yes: 'Yes',
+      no: 'No',
+      delete: 'Delete',
+      edit: 'Edit',
+      close: 'Close',
+      search: 'Search',
+    },
+    placeholders: {
+      search: 'Search...',
+      select: 'Select an option',
+    },
+    labels: {
+      name: 'Name',
+      email: 'Email',
+      password: 'Password',
+    },
+    pagination: {
+      itemsPerPage: 'Items per page:',
+      jumpToPage: 'Jump to page:',
+      of: 'of',
+      next: 'Next',
+      previous: 'Previous',
+      page: 'Page',
+    }
+  },
+  dv: {
+    buttons: {
+      submit: 'ސަބްމިޓް',
+      cancel: 'ކެންސަލް',
+      add: 'އެޑް',
+      save: 'ސޭވް',
+      ok: 'އޯކޭ',
+      print: 'ޕްރިންޓް',
+      download: 'ޑައިންލޯޑް',
+      yes: 'ރަގަނޅު',
+      no: 'ނޫން',
+      delete: 'ޑިލިޓް',
+      edit: 'އެޑިޓް',
+      close: 'ކްލޯސް',
+      search: 'ހޯދާ',
+    },
+    placeholders: {
+      search: 'ހޯދާ...',
+      select: 'އޮޕްޝަން',
+    },
+    labels: {
+      name: 'ނަން',
+      email: 'އީމެއިލް',
+      password: 'ޕާސްވަޑް',
+    },
+    pagination: {
+      itemsPerPage: 'ކޮންމެ ސަފުހާއަކަށް:',
+      jumpToPage: 'ސަފުހާއަށް ދާން:',
+      of: 'ގެ',
+      next: 'ކުރިޔަން',
+      previous: 'ފަހަތަށް',
+      page: 'ސަފުހާ',
+    }
+  },
+}

package/src/pgo-components/lib/i18n/i18nPlugin.js

@@ -0,0 +1,52 @@
+import { useI18n } from './useI18n.js'
+import { setRtl } from '../core/rtl/setRtl.ts'
+import { watch } from 'vue'
+
+export const i18nPlugin = {
+  install(app) {
+    const { t, setLanguage, language } = useI18n()
+
+    // Create useLanguageSelect helper
+    // const useLanguageSelect = (value, lang = '') => {
+    //   // If lang prop is provided, use it; otherwise use global language
+    //   const currentLang = lang || language.value
+
+    //   // If value is a string, return it directly
+    //   if (typeof value === 'string' && value !== '') {
+    //     return value
+    //   }
+
+    //   // If value is an object with language keys
+    //   if (value && typeof value === 'object') {
+    //     return value[currentLang] || value['en'] || ''
+    //   }
+
+    //   return ''
+    // }
+
+    // Changing RTL with language change
+    watch (language, (newLang) => {
+        if (newLang === 'dv') {
+            setRtl(true)
+        } else {
+            setRtl(false)
+        }
+
+    })
+
+
+    // Provide i18n with useLanguageSelect
+    app.provide('i18n', {
+      t,
+      setLanguage,
+      language,
+      // useLanguageSelect
+    })
+
+    // Global properties
+    app.config.globalProperties.$t = t
+    app.config.globalProperties.$setLanguage = setLanguage
+    app.config.globalProperties.$language = language
+    // app.config.globalProperties.$useLanguageSelect = useLanguageSelect
+  }
+}

package/src/pgo-components/lib/i18n/useI18n.js

@@ -0,0 +1,35 @@
+import { ref, computed } from 'vue'
+import { messages } from './defaultLables.js'
+
+const currentLanguage = ref(localStorage.getItem('language') || 'en')
+
+export const useI18n = () => {
+  const t = (key, lang = '') => {
+    // Use provided lang or fall back to current language
+    const selectedLang = lang || currentLanguage.value
+    const keys = key.split('.')
+    let value = messages[selectedLang]
+    
+    for (const k of keys) {
+      value = value?.[k]
+    }
+    
+    return value || key
+  }
+
+  const setLanguage = (lang) => {
+    if (messages[lang]) {
+      currentLanguage.value = lang
+      localStorage.setItem('language', lang)
+      document.documentElement.lang = lang
+    }
+  }
+
+  const language = computed(() => currentLanguage.value)
+
+  return {
+    t,
+    setLanguage,
+    language,
+  }
+}

package/src/pgo-components/lib/index.ts

@@ -0,0 +1,38 @@
+import type { App } from 'vue'
+import { createDefaults } from './core/defaults/createDefaults.ts'
+import { setRtl } from './core/rtl/setRtl.ts'
+import { i18nPlugin } from './i18n/i18nPlugin.js'
+import * as components from '../../components/index.ts'
+
+// Export all components individually
+export * from '../../components/index.ts'
+
+// Export composables
+export { useTheme } from '../composables/useTheme.js'
+export { useI18n } from './i18n/useI18n.js'
+
+// Export plugin
+const UiUxPlugin = {
+    install(app: App, options: any = {}) {
+        // Install i18n plugin first (required by components)
+        app.use(i18nPlugin)
+
+        // Inject defaults if provided
+        if (options.defaults){
+            createDefaults(options)
+        }
+
+        // Inject RTL if provided
+        if (typeof options.rtl === 'boolean'){
+            setRtl(options.rtl)
+        }
+
+        // Register components
+        for (const key in components) {
+            app.component(key, (components as any)[key])
+        }
+
+    }
+}
+
+export default UiUxPlugin

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

@@ -0,0 +1,7 @@
+<template>
+    <Breadcrumb />
+
+</template>
+<script setup>
+    import Breadcrumb from '../../components/pgo/Breadcrumb.vue'
+</script>

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

@@ -0,0 +1,99 @@
+<template>
+   <div>
+    <!-- <ListView v-if="componentMap[componentName]"
+      :items="items"
+      :loading="loading"
+      @update:query-params="handleQueryParamsUpdate"
+    /> -->
+    <component 
+      v-if="componentMap[DisplayComponent]" 
+      :is="componentMap[DisplayComponent]"
+      :items="items"
+      :loading="loading"
+      @update:query-params="handleQueryParamsUpdate"
+    />
+    <div v-else>
+      <p>Component not found: {{ DisplayComponent }}</p>
+    </div>
+   </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, inject, computed, defineAsyncComponent } from 'vue'
+import { useRoute } from 'vue-router'
+// import {ListView} from '../../'
+
+const { language } = inject('i18n')
+const api = inject('api')
+const route = useRoute()
+
+
+const modelName = computed(() => route.params.modelName || '')
+const componentName = computed(() => route.params.componentName || '')
+
+
+const items = ref({})
+const loading = ref(false)
+const DisplayComponent = ref(null)
+
+const fetchData = async (queryParams = {}) => {
+    try {
+        loading.value = true
+        
+        // Build query string from params
+        const params = new URLSearchParams({
+            component: componentName.value,
+            lang: language.value || 'dv',
+            ...queryParams
+        })
+        
+        // console.log('Fetching with params:', params.toString())
+        
+        const response = await api.get(`/ccs/${modelName.value}?${params}`) // uncomment this line to use real API
+        // const response = person // comment this line to use real API
+        items.value = response
+        DisplayComponent.value = response.component
+
+        console.log('DisplayComponent:', DisplayComponent.value)
+        
+        console.log('Fetchedd data:', items.value)
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    } finally {
+        loading.value = false
+    }
+}
+
+const componentMap = computed(() => {
+    const map = {}
+    const usedTypes = DisplayComponent.value
+
+    if (usedTypes == "listView" || usedTypes == 'ListView' || usedTypes == 'listView2') {
+        map['listView'] = defineAsyncComponent(() => import('../../pgo-components/pages/ListView.vue'))
+        map['listView2'] = defineAsyncComponent(() => import('../../pgo-components/pages/ListView.vue'))
+        map['ListView'] = defineAsyncComponent(() => import('../../pgo-components/pages/ListView.vue'))
+    }
+
+    return map
+})
+
+// Handle query params update from child component
+const handleQueryParamsUpdate = (queryParams) => {
+    console.log('Query params updated:', queryParams)
+    fetchData(queryParams)
+}
+
+// Initial fetch
+
+onMounted(() => {
+    fetchData()
+    console.log('Model Name:', modelName.value)
+    console.log('Component Name:', componentName.value)
+    console.log('Route params:', route.params)
+})
+
+// Watch for route changes
+watch([modelName, componentName], () => {
+    // fetchData()
+})
+</script>

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

@@ -0,0 +1,125 @@
+<template>
+
+  
+  <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <ModalExample />
+    </div>
+
+    <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <BreadcrumbExample />
+    </div>
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <ThemeToggle />
+    </div> -->
+
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <ExpansionPanelExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <EditorExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <TabExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <TooltipExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <AvatarExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <VueDatePickerShowcase />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <TimelineExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <FileUploadExample />
+    </div> -->
+
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <FormExample />
+    </div> -->
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <RadioButtonExample />
+    </div> -->
+    <!-- <div class="max-w-5xl mx-auto p-4 mt-6 border space-y-3">
+      <NumberFieldExample />
+    </div> -->
+  <!-- <LayoutContainer>
+    <template #default>
+      <div>
+        <h1 class="text-2xl font-bold mb-4">Dashboard</h1>
+        <p>Main content goes here.</p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="text-center text-sm text-gray-500">© 2025 My App</div>
+    </template>
+  </LayoutContainer> -->
+
+  <!-- <LayoutContainerExample /> -->
+
+
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ExpansionPanelExample from '../../components/examples/ExpansionPanelExample.vue'
+import TabExample from '../../components/examples/TabExample.vue'
+import TooltipExample from '../../components/examples/TooltipExample.vue'
+import AvatarExample from '../../components/examples/AvatarExample.vue'
+import VueDatePickerShowcase from '../../components/examples/VueDatePickerShowcase.vue'
+import TimelineExample from '../../components/examples/TimelineExample.vue'
+import FileUploadExample from '../../components/examples/FileUploadExample.vue'
+import EditorExample from '../../components/examples/EditorExample.vue'
+import FormExample from '../../components/examples/FormExample.vue'
+import BreadcrumbExample from '../../components/examples/BreadcrumbExample.vue'
+import ModalExample from '../../components/examples/ModalExample.vue'
+import ThemeToggle from '../../components/examples/ThemeToggle.vue'
+import { drawerOpen } from '../../pgo-components/lib/drawerState'
+import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+import { useSnackBar } from '../../pgo-components/plugins/useSnackBar.js'
+import AppBarExample from "../../components/examples/AppBarExample.vue";
+import NavDrawerExample from "../../components/examples/NavDrawerExample.vue";
+import ChipExample from "../../components/examples/ChipExample.vue";
+import TableExample from "../../components/examples/TableExample.vue";
+import SelectExample from "../../components/examples/SelectExample.vue";
+import CardExample from "../../components/examples/CardExample.vue";
+import DropdownExample from "../../components/examples/DropdownExample.vue";
+import TextareaExample from "../../components/examples/TextareaExample.vue";
+import TextFieldExample from "../../components/examples/TextFieldExample.vue";
+import BannerExample from "../../components/examples/BannerExample.vue";
+import SearchExample from "../../components/examples/SearchExample.vue";
+import StackedTableViewExample from "../../components/examples/StackedTableViewExample.vue";
+import LayoutContainer from "../../components/pgo/LayoutContainer.vue";
+import RadioButtonExample from "../../components/examples/RadioButtonExample.vue";
+
+import LayoutContainerExample from "../../components/examples/LayoutContainerExample.vue";
+
+import Button from "../../components/pgo/Button.vue";
+import NumberFieldExample from "../../components/examples/NumberFieldExample.vue";
+
+const appBarOffset = ref(false)
+const overlayAppBar = ref(true)
+const zIndex = ref(undefined)
+const isStuck = ref(true)
+const location = ref(globalRtl.value ? 'right' : 'left')
+const persistent = ref(false)
+const permanent = ref(true)
+const temporary = ref(false)
+const rail = ref(false)
+const hoverExpand = ref(false)
+
+
+</script>