pgo-uiux2 1.0.0

package/src/pgo-components/lib/core/composables/_useCalendar.ts

@@ -0,0 +1,127 @@
+import { ref, computed } from 'vue'
+
+export type PickerMode = 'date' | 'week' | 'month' | 'quarter' | 'year' | 'time'
+
+export interface CalendarOptions {
+  locale?: string
+  firstDayOfWeek?: number // 0=Sunday ... 6=Saturday
+  min?: Date
+  max?: Date
+  disabledDate?: (d: Date) => boolean
+}
+
+function clampDate(d: Date, min?: Date, max?: Date) {
+  if (min && d < min) return new Date(min)
+  if (max && d > max) return new Date(max)
+  return d
+}
+
+function startOfMonth(d: Date) {
+  const x = new Date(d)
+  x.setDate(1)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+function endOfMonth(d: Date) {
+  const x = new Date(d)
+  x.setMonth(x.getMonth() + 1)
+  x.setDate(0)
+  x.setHours(23, 59, 59, 999)
+  return x
+}
+
+function addMonths(d: Date, m: number) {
+  const x = new Date(d)
+  x.setMonth(x.getMonth() + m)
+  return x
+}
+
+function addYears(d: Date, y: number) {
+  const x = new Date(d)
+  x.setFullYear(x.getFullYear() + y)
+  return x
+}
+
+function isSameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isBetween(d: Date, a?: Date, b?: Date) {
+  if (!a || !b) return false
+  const min = a < b ? a : b
+  const max = a < b ? b : a
+  return d >= min && d <= max
+}
+
+function startOfWeek(d: Date, firstDay: number) {
+  const x = new Date(d)
+  const day = x.getDay()
+  const diff = (day - firstDay + 7) % 7
+  x.setDate(x.getDate() - diff)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+export function useCalendar(initial: Date, opts: CalendarOptions = {}) {
+  const locale = opts.locale || 'en-US'
+  const firstDayOfWeek = typeof opts.firstDayOfWeek === 'number' ? opts.firstDayOfWeek : 0
+
+  const viewDate = ref(clampDate(initial, opts.min, opts.max))
+  const monthStart = computed(() => startOfMonth(viewDate.value))
+  const monthEnd = computed(() => endOfMonth(viewDate.value))
+
+  const monthLabel = computed(() => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(viewDate.value))
+
+  const weekdays = computed(() => {
+    const base = startOfWeek(new Date(2020, 7, 2), firstDayOfWeek) // arbitrary week
+    return Array.from({ length: 7 }).map((_, i) => {
+      const d = new Date(base)
+      d.setDate(d.getDate() + i)
+      return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d)
+    })
+  })
+
+  const grid = computed(() => {
+    // Calendar grid of 6 rows x 7 cols
+    const start = startOfWeek(monthStart.value, firstDayOfWeek)
+    const days = [] as Date[]
+    for (let i = 0; i < 42; i++) {
+      const d = new Date(start)
+      d.setDate(d.getDate() + i)
+      days.push(d)
+    }
+    return days
+  })
+
+  function isDisabled(d: Date) {
+    if (opts.min && d < opts.min) return true
+    if (opts.max && d > opts.max) return true
+    if (opts.disabledDate && opts.disabledDate(d)) return true
+    return false
+  }
+
+  function prevMonth() { viewDate.value = addMonths(viewDate.value, -1) }
+  function nextMonth() { viewDate.value = addMonths(viewDate.value, 1) }
+  function prevYear() { viewDate.value = addYears(viewDate.value, -1) }
+  function nextYear() { viewDate.value = addYears(viewDate.value, 1) }
+  function setMonth(m: number) { const x = new Date(viewDate.value); x.setMonth(m); viewDate.value = clampDate(x, opts.min, opts.max) }
+  function setYear(y: number) { const x = new Date(viewDate.value); x.setFullYear(y); viewDate.value = clampDate(x, opts.min, opts.max) }
+
+  return {
+    viewDate,
+    monthLabel,
+    weekdays,
+    grid,
+    isDisabled,
+    prevMonth,
+    nextMonth,
+    prevYear,
+    nextYear,
+    setMonth,
+    setYear,
+    isSameDay,
+    isBetween,
+    startOfWeek,
+  }
+}

package/src/pgo-components/lib/core/composables/useDefaults.ts

@@ -0,0 +1,15 @@
+import { computed } from "vue"
+import { globalDefaults } from "../defaults/defaults.ts"
+
+export function useDefaults(componentName: string, props: Record<string, any>) {
+
+    const mergedProps = computed(() => {
+        const componentDefaults = globalDefaults[componentName] || {}
+        return {
+            ...componentDefaults,
+            ...props
+        }
+    })
+
+    return mergedProps
+}

package/src/pgo-components/lib/core/composables/useRtl.ts

@@ -0,0 +1,12 @@
+import { computed } from "vue";
+import { globalRtl } from "../rtl/rtl.ts";
+
+export function useRtl(localOverride?: boolean) {
+  const isRtl = computed(() =>
+    typeof localOverride === "boolean" ? localOverride : globalRtl.value
+  );
+
+  const rtlClass = computed(() => (isRtl.value ? "rtl" : "ltr"))
+
+  return { isRtl, rtlClass }
+}

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,85 @@
+<template>
+   <div>
+    <component 
+      v-if="componentMap[componentName]" 
+      :is="componentMap[componentName]"
+      :items="items"
+      :loading="loading"
+      @update:query-params="handleQueryParamsUpdate"
+    />
+    <div v-else>
+      <p>Component not found: {{ componentName }}</p>
+    </div>
+   </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, inject, computed, defineAsyncComponent } from 'vue'
+import { useRoute } from 'vue-router'
+
+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 componentMap = computed(() => {
+    const map = {}
+    const usedTypes = componentName.value
+
+    if (usedTypes == "listView" || usedTypes == 'ListView') {
+        map['listView'] = defineAsyncComponent(() => import('../../pgo-components/pages/ListView.vue'))
+        map['ListView'] = defineAsyncComponent(() => import('../../pgo-components/pages/ListView.vue'))
+    }
+
+    return map
+})
+
+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
+        
+        console.log('Fetched data:', items.value)
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    } finally {
+        loading.value = false
+    }
+}
+
+// Handle query params update from child component
+const handleQueryParamsUpdate = (queryParams) => {
+    console.log('Query params updated:', queryParams)
+    fetchData(queryParams)
+}
+
+// Initial fetch
+fetchData()
+
+onMounted(() => {
+    console.log('Model Name:', modelName.value)
+    console.log('Component Name:', componentName.value)
+})
+
+// Watch for route changes
+watch([modelName, componentName], () => {
+    fetchData()
+})
+</script>

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

@@ -0,0 +1,130 @@
+<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">
+      <!-- <TipTapEditorExample /> -->
+    </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">
+      <!-- <DatePickerExample /> -->
+      <!-- <DatePickerExample /> -->
+      <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>