pgo-uiux2 1.0.0

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "pgo-uiux2",
+  "version": "1.0.0",
+  "description": "A Vue 3 component library with PGO design system",
+  "private": false,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "main": "./src/pgo-components/index.js",
+  "module": "./src/pgo-components/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/pgo-components/index.js"
+    },
+    "./components": {
+      "import": "./src/components/pgo/index.ts"
+    },
+    "./components/*": "./src/components/pgo/*.vue",
+    "./style.css": "./src/pgo-components/styles/global.css",
+    "./router": "./src/router/index.js",
+    "./validations": "./src/validations/validationRules.js",
+    "./examples/*": "./src/components/examples/*.vue"
+  },
+  "0j3ctsfiles": [
+    "dist",
+    "src",
+    "tailwind.config.js",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "@tiptap/extension-character-count": "^3.13.0",
+    "@tiptap/extension-table": "^3.13.0",
+    "@tiptap/extension-table-cell": "^3.13.0",
+    "@tiptap/extension-table-header": "^3.13.0",
+    "@tiptap/extension-table-row": "^3.13.0",
+    "@tiptap/extension-text-align": "^3.13.0",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/vue-3": "^3.13.0",
+    "@vuepic/vue-datepicker": "^12.1.0",
+    "@vueuse/components": "^14.0.0",
+    "@vueuse/core": "^14.0.0",
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3",
+    "vue3-tailwind-components": "^0.3.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "postcss": "^8.5.6",
+    "sass-embedded": "^1.96.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.11",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^8.0.3"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "pgo",
+    "tailwind",
+    "design-system"
+  ],
+  "author": "PGO",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Laamin95/ui.git"
+  }
+}

package/src/App.vue

@@ -0,0 +1,368 @@
+<template>
+  <div id="app">
+    <PApp>
+      <!-- <AppBar :dense="false" :collapseOnScroll="true">
+        <div class="flex items-center px-4 h-full">
+          <button @click="toggleDrawer" class="mr-3">☰</button>
+          <h1 class="text-lg font-medium">My App</h1>
+        </div>
+      </AppBar> -->
+
+      <AppBar
+        id="appbar"
+        title="My Awesome Dashboard"
+        title-align="center"
+        title-class="text-lg font-bold text-indigo-600"
+        :drawer="true"
+        :menu="false"
+        fixed
+        :dense="isDense"
+        elevation="4"
+        border="border-b"
+        p="px-4"
+        :rtl="rtl || isRtl"
+        :overflow-actions="overflowActions"
+        :collapse-on-scroll="collapse"
+        :z-index="50"
+        custom-class="shadow-md"
+        @toggle-drawer="drawerOpen = !drawerOpen"
+      >
+        <!-- PREPEND -->
+        <template #prepend>
+          <button
+            class="hidden md:inline-flex items-center gap-1 px-3 py-1 rounded-md bg-indigo-100 hover:bg-indigo-200 text-indigo-700 dark:bg-indigo-900 dark:hover:bg-indigo-800"
+          >
+            <HeroIcon
+              name="home"
+              size="20"
+            />
+            ގެޔަށް
+          </button>
+        </template>
+
+        <!-- TITLE (custom slot) -->
+        <template #title>
+          <div class="flex items-center gap-2">
+            <HeroIcon
+              name="sparkles"
+              size="22"
+              class="text-yellow-500"
+            />
+            <span class="font-bold text-xl">ޕްރޮޖެކްޓުގެ ނަން</span>
+          </div>
+        </template>
+
+        <!-- NAV -->
+        <template #nav>
+          <button class="px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            އެއަށްފަސް
+          </button>
+          <button class="px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            ދެންއިން މެނޫ
+          </button>
+          <button class="px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            ފުރަތަމަ
+          </button>
+        </template>
+
+        <!-- ACTIONS -->
+        <template #actions>
+          <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
+            <HeroIcon
+              name="bell"
+              size="22"
+            />
+          </button>
+
+          <button class="hidden md:block p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
+            <HeroIcon
+              name="cog-6-tooth"
+              size="22"
+            />
+          </button>
+        </template>
+
+        <!-- APPEND -->
+        <template #append>
+          <button class="px-3 py-1 rounded-md bg-indigo-600 text-white hover:bg-indigo-700">
+            ލޮގްއައުޓް
+          </button>
+        </template>
+
+        <!-- MOBILE NAV -->
+        <template #mobile-nav>
+          <button class="block w-full px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            ޑޭޝްބޯޑު
+          </button>
+          <button class="block w-full px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            Analytics
+          </button>
+          <button class="block w-full px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700">
+            Users
+          </button>
+        </template>
+      </AppBar>
+
+      <NavigationDrawer
+        v-model="drawerOpen"
+        v-model:items="sampleItems"
+        :temporary="temporary"
+        :rail="rail"
+        :hover-expand="hoverExpand"
+        :persistent="persistent"
+        :permanent="permanent"
+        :location="location"
+        :is-stuck="isStuck"
+        :filterable="true"
+        :group-by="'group'"
+        ref="el"
+        :draggable="true"
+        search-placeholder="ހޯދާ"
+        :group-icons="{
+          އާންމު: 'home',
+          'ތަފާސް ހިސާބު': 'document',
+          އެޑްމިން: 'cog'
+        }"
+        color="bg-blue-500"
+        width="w-64"
+        rail-width="w-16"
+        :close-on-scrim-click="true"
+        :overlay-app-bar="overlayAppBar"
+        :z-index="zIndex"
+        :app-bar-offset="appBarOffset"
+      >
+        <template #prepend>
+          <div class="px-3 py-2 text-sm font-semibold">
+            މިފިނި
+          </div>
+        </template>
+
+        <template #default>
+          <ul class="py-4">
+            <NavDrawerItem
+              class="px-4"
+              href="#/"
+            >
+              <HeroIcon
+                name="home"
+                size="20"
+              />
+              ޑޭޝްބޯޑް
+            </NavDrawerItem>
+            <NavDrawerItem
+              class="px-4"
+              href="/page/Person/listView"
+            >
+              <HeroIcon
+                name="user"
+                size="20"
+              />
+              މީހުން
+            </NavDrawerItem>
+            <NavDrawerItem
+              class="px-4"
+              href="#/reports"
+            >
+              <HeroIcon
+                name="document"
+                size="20"
+              />
+              ރިޕޯޓް
+            </NavDrawerItem>
+            <NavDrawerItem
+              class="px-4"
+              href="#/users"
+            >
+              <HeroIcon
+                name="cog"
+                size="20"
+              />
+              ސެޓިންގްސް
+            </NavDrawerItem>
+          </ul>
+        </template>
+
+        <!-- <template #footer>
+        </template> -->
+
+      </NavigationDrawer>
+
+      <Main>
+        <!-- CONTENT -->
+        <!-- <router-view /> -->
+      </Main>
+
+      <!-- <Footer>
+        <div class="p-3 text-center">
+          © 2025 Footer Example
+        </div>
+      </Footer> -->
+    </PApp>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref, watch, inject, computed, toRaw } from 'vue'
+  //import PApp from './components/pgo/PApp.vue'
+  //import AppBar from './components/pgo/AppBar.vue'
+  //import Button from './components/pgo/Button.vue'
+  //import OldAppBar from './components/pgo/OldAppBar.vue'
+  //import NavigationDrawer from './components/pgo/NavigationDrawer.vue'
+  // import Main from './components/pgo/Main.vue'
+  // import Footer from './components/pgo/Footer.vue'
+  // import HeroIcon from "./components/pgo/HeroIcon.vue";
+  // import NavDrawer from "./components/pgo/NavDrawer.vue";
+  // import NavDrawerItem from "./components/pgo/NavDrawerItem.vue";
+  // import { globalRtl } from './pgo-components/lib/core/rtl/rtl.ts'
+  // import { setRtl } from './pgo-components/lib/core/rtl/setRtl.ts'
+  // import { drawerOpen } from './pgo-components/lib/drawerState.ts'
+
+
+  //   import DatePickerExample from './components/examples/DatePickerExample.vue'
+  //   import DatePickerExample from './components/examples/DatePickerExample.vue'
+
+  // import EditorExample from './components/examples/EditorExample.vue'
+  //   import TipTapEditorExample from './components/examples/TipTapEditorExample.vue'
+
+  // import BreadcrumbExample from './components/examples/BreadcrumbExample.vue'
+  // import ModalExample from './components/examples/ModalExample.vue'
+
+  // import { useSnackBar } from './pgo-components/plugins/useSnackBar.js'
+
+  // import ThemeToggle from './components/examples/ThemeToggle.vue'
+  // import { useTheme } from './pgo-components/composables/useTheme.js'
+
+  // const theme = useTheme()
+
+  const globalRtl = inject('globalRtl')
+  const setRtl = inject('setRtl')
+  const drawerOpen = inject('drawerOpen')
+
+  function onClick() {
+    alert('Clicked')
+  }
+
+  const dataTheme = computed(() => document.documentElement.getAttribute('data-theme') || 'none')
+
+  // const snackbar = inject('snackbar')
+
+  const { t, setLanguage, language } = inject('i18n')
+
+  onMounted(() => {
+    const savedRtl = localStorage.getItem('rtlSetting')
+    // console.log('savedRtl', savedRtl)
+    // this.$snackbar.show({ message: 'ވަރަށް', variant: 'warning' })
+
+    // snack.show({
+    //   message: 'File deleted',
+    // //   variant: 'info',
+    //   actions: [{ label: 'Undo', onClick: () => { /* undo logic */ } }],
+    // })
+
+    if (savedRtl !== null) {
+      globalRtl.value = JSON.parse(savedRtl)
+      setRtl(globalRtl.value)
+    } else {
+      globalRtl.value = false
+      setRtl(globalRtl.value)
+    }
+  })
+
+  // const drawerOpen = ref(true);
+  const drawerMode = ref('permanent')
+
+  function toggleDrawer() {
+    drawerOpen.value = !drawerOpen.value
+  }
+
+  const rtl = ref(false)
+  const isDense = ref(false)
+  const collapse = ref(false)
+
+  const overflowActions = [
+    {
+      label: 'Profile',
+      icon: 'UserIcon',
+      onClick: () => alert('Profile clicked')
+    },
+    {
+      label: 'Settings',
+      icon: 'Cog6ToothIcon',
+      onClick: () => alert('Settings clicked')
+    },
+    {
+      label: 'Sign out',
+      icon: 'ArrowRightStartOnRectangleIcon',
+      onClick: () => alert('Logout clicked')
+    }
+  ]
+
+  const temporary = ref(false)
+  const rail = ref(false)
+  const hoverExpand = ref(false)
+  const persistent = ref(false)
+  const permanent = ref(true)
+  const isStuck = ref(true)
+  const location = ref(globalRtl.value ? 'right' : 'left')
+  const overlayAppBar = ref(true)
+  const zIndex = ref(undefined)
+  const appBarOffset = ref(false)
+
+  const sampleItems = ref([
+    { id: 1, label: 'އެޑްމިން', href: '#/', group: 'އާންމު' },
+    { id: 2, label: "މީހުން", href: "/page/Person/listView", group: "އާންމު" },
+    { id: 2, label: "އެންޓްރީ", href: "/page/Entry/listView", group: "އާންމު" },
+    { id: 3, label: 'ރިޕޯޓް', href: '#/reports', group: 'ތަފާސް ހިސާބު' },
+    { id: 4, label: 'ސެޓިންގްސް', href: '#/settings', group: 'އެޑްމިން' }
+  ])
+
+  onMounted(() => {
+    const savedRtl = localStorage.getItem('rtlSetting')
+    if (savedRtl !== null) {
+      // Convert string to boolean
+      location.value = savedRtl === 'true' ? 'right' : 'left'
+      //   console.log('Loaded saved RTL setting:', savedRtl)
+    } else {
+      // Fallback to globalRtl if no saved setting
+      location.value = globalRtl.value ? 'right' : 'left'
+      //   console.log('No saved RTL setting, using globalRtl:', globalRtl.value)
+    }
+  })
+
+  watch(globalRtl, () => {
+    if (globalRtl.value) {
+      location.value = 'right'
+      rtl.value = true
+    } else {
+      location.value = 'left'
+      rtl.value = false
+    }
+  })
+
+  const isRtl = ref(true)
+
+  onMounted(() => {
+    const savedRtl = localStorage.getItem('rtlSetting')
+    if (savedRtl !== null) {
+      isRtl.value = savedRtl === 'true'
+    } else {
+      isRtl.value = globalRtl.value
+    }
+    // console.log('Initial RTL setting on mount:', isRtl.value)
+  })
+
+  watch(isRtl, v => {
+    setRtl(v)
+    if (isRtl.value == true) {
+      setLanguage('dv')
+    } else {
+      setLanguage('en')
+    }
+  })
+</script>
+
+<style scoped>
+  #app {
+    min-height: 100vh;
+  }
+</style>

package/src/components/examples/AppBarExample.vue

@@ -0,0 +1,101 @@
+<template>
+  <AppBar
+    title="އެޕްގެ ނަން"
+    title-align="center"
+    title-class="text-xl font-bold"
+    fixed
+    elevation="2"
+    drawer
+    :rtl="isRtl"
+  >
+    <!-- Prepend slot: logo -->
+    <template #prepend>
+      <img src="../assets/logo.png" alt="Logo" class="h-8 w-8 mr-2" />
+    </template>
+
+    <!-- Main nav slot -->
+    <template #nav>
+      <!-- <a href="#" class="px-3 py-2 text-blue-700 hover:text-blue-900">Home</a> -->
+    </template>
+
+    <!-- Actions slot: buttons/icons -->
+    <template #actions>
+        <button class="p-2 rounded hover:bg-gray-100" @click="drawerOpen = !drawerOpen" aria-label="Toggle drawer">
+          <HeroIcon name="bars-3" size="20" color="text-blue-700" />
+        </button>
+      </template>
+
+    <!-- Append slot: custom icon -->
+    <template #append>
+        <!-- <HeroIcon name="bell" size="24" color="text-blue-700" /> -->
+    </template>
+
+    <!-- Mobile nav slot -->
+    <template #mobile-nav>
+      <a href="#" class="block px-3 py-2 text-blue-700">Home</a>
+      <a href="#" class="block px-3 py-2 text-blue-700">About</a>
+      <a href="#" class="block px-3 py-2 text-blue-700">Contact</a>
+    </template>
+  </AppBar>
+
+  <div class="flex pr-100 pl-100 gap-2">
+    <label class="inline-flex items-center gap-2">
+      <input type="checkbox" v-model="isRtl" class="form-checkbox" />
+      <span class="text-sm text-gray-700">RTL</span>
+    </label>
+    <div class="flex gap-2">
+        <Button :color="language === 'en'? 'primary': 'gray'" @click="$setLanguage('en')">English</Button>
+        <Button class="faruma" :color="language =='dv'? 'primary': 'gray'" @click="$setLanguage('dv')">ދިވެހި</Button>
+    </div>
+    <p>Current language: {{ language }}</p>
+  </div>
+</template>
+
+<script setup>
+import AppBar from "../pgo/AppBar.vue";
+import HeroIcon from "../pgo/HeroIcon.vue";
+import { ref, watch, inject, onMounted } from "vue";
+import { drawerOpen } from '../../pgo-components/lib/drawerState';
+import { setRtl } from '../../pgo-components/lib/core/rtl/setRtl';
+import Button from "../pgo/Button.vue";
+const { t, setLanguage, language } = inject('i18n')
+
+// const overflowActions = [
+//   {
+//     label: "Settings",
+//     icon: null, // You can use an icon component here
+//     onClick: () => alert("Settings clicked"),
+//   },
+//   {
+//     label: "Profile",
+//     icon: null,
+//     onClick: () => alert("Profile clicked"),
+//   },
+//   {
+//     label: "Logout",
+//     icon: null,
+//     onClick: () => alert("Logout clicked"),
+//   },
+// ];
+const isRtl = ref(true);
+
+onMounted(() => {
+  const savedRtl = localStorage.getItem('rtlSetting');
+    if (savedRtl !== null) {
+        isRtl.value = savedRtl === 'true';
+    } else {
+        isRtl.value = globalRtl.value;
+    }
+    console.log("Initial RTL setting on mount:", isRtl.value);
+});
+
+watch(isRtl, (v) => {
+  setRtl(v);
+  if (isRtl.value == true) {
+    setLanguage('dv')
+  } else {
+    setLanguage('en')
+  }
+});
+
+</script>

package/src/components/examples/AvatarExample.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="grid place-items-center space-y-6 p-6">
+    <h2 class="text-xl font-semibold mb-2 text-center">Avatar Example Usage</h2>
+
+    <!-- Row: image + initials -->
+    <div class="flex items-center gap-8">
+      <Avatar src="https://i.pravatar.cc/100?img=5" alt="Alice" />
+      <Avatar text="Ahmed Shareef"  :bordered="true" />
+      <Avatar text="P G O" size="lg" shape="rounded"  :bordered="true" />
+      <Avatar text="UI" size="xl" :bordered="true" />
+    </div>
+
+    <!-- Shapes -->
+    <div class="flex items-center gap-8">
+      <Avatar text="CS" shape="circular"  :bordered="true" />
+      <Avatar text="CS" shape="rounded"  :bordered="true" />
+      <Avatar text="CS" shape="square"  :bordered="true" />
+    </div>
+
+    <!-- Sizes -->
+    <div class="flex items-center gap-8">
+      <Avatar text="xs" size="xs"  :bordered="true" />
+      <Avatar text="sm" size="sm"  :bordered="true" />
+      <Avatar text="md" size="md"  :bordered="true" />
+      <Avatar text="lg" size="lg"  :bordered="true" />
+      <Avatar text="xl" size="xl"  :bordered="true" />
+    </div>
+
+    <!-- Status -->
+    <!-- <div class="flex items-center gap-4">
+      <Avatar text="ON" status="online" />
+      <Avatar text="AW" status="away" />
+      <Avatar text="BZ" status="busy" />
+      <Avatar text="OF" status="offline" />
+    </div> -->
+
+    <!-- Disabled + Bordered -->
+    <!-- <div class="flex items-center gap-4">
+      <Avatar text="DB" :bordered="true" :disabled="true"  />
+      <Avatar src="https://i.pravatar.cc/100?img=8" :bordered="true" />
+    </div> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import Avatar from '../pgo/Avatar.vue'
+</script>