pgo-uiux2 1.0.0

package/src/components/examples/TabExample.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="space-y-8 p-6">
+    <div>
+      <h1 class="text-3xl font-bold mb-2">Tabs</h1>
+    </div>
+
+    <!-- Variant: Line (default) -->
+    <div class="border p-6 border-[var(--vts-color-borderHeavy)] ">
+      <h2 class="text-xl font-semibold mb-4">Line Variant (Default)</h2>
+      <Tab
+        v-model="activeTab1"
+        :tabs="tabsData"
+        variant="line"
+        @change="onTabChange"
+      >
+        <template #content-0>
+          <div class="space-y-2">
+            <p>This is the content for the Dashboard tab.</p>
+            <p class="text-sm text-gray-600 dark:text-gray-400">The line variant shows an underline under the active tab.</p>
+          </div>
+        </template>
+        <template #content-1>
+          <div class="space-y-2">
+            <p>This is the content for the Settings tab.</p>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Perfect for primary navigation within a page.</p>
+          </div>
+        </template>
+        <template #content-2>
+          <div class="space-y-2">
+            <p>This is the content for the Profile tab.</p>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Responsive and accessible by default.</p>
+          </div>
+        </template>
+      </Tab>
+    </div>
+
+    <!-- Variant: Pills -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Pills Variant</h2>
+      <Tab
+        v-model="activeTab2"
+        :tabs="tabsData"
+        variant="pills"
+      >
+        <template #content-0>
+          <p>Pills are great for secondary navigation or filtering options.</p>
+        </template>
+        <template #content-1>
+          <p>They have a pill-shaped background for a modern look.</p>
+        </template>
+        <template #content-2>
+          <p>Fully customizable with Tailwind CSS classes.</p>
+        </template>
+      </Tab>
+    </div> -->
+
+    <!-- Variant: Enclosed -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Enclosed Variant</h2>
+      <Tab
+        v-model="activeTab3"
+        :tabs="tabsData"
+        variant="enclosed"
+      >
+        <template #content-0>
+          <p>The enclosed variant wraps tabs in a border.</p>
+        </template>
+        <template #content-1>
+          <p>Great for grouping related content sections.</p>
+        </template>
+        <template #content-2>
+          <p>Provides visual containment for tab groups.</p>
+        </template>
+      </Tab>
+    </div> -->
+
+    <!-- Variant: Card -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Card Variant</h2>
+      <Tab
+        v-model="activeTab4"
+        :tabs="tabsData"
+        variant="card"
+      >
+        <template #content-0>
+          <p>Card variant treats each tab as an individual card.</p>
+        </template>
+        <template #content-1>
+          <p>Ideal for standalone tab groups with prominent content.</p>
+        </template>
+        <template #content-2>
+          <p>Provides maximum visual separation between options.</p>
+        </template>
+      </Tab>
+    </div> -->
+
+    <!-- Size variants -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Size Variants</h2>
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-sm font-medium mb-2 text-gray-600">Small</h3>
+          <Tab
+            v-model="activeTab5"
+            :tabs="tabsData"
+            variant="pills"
+            size="sm"
+          >
+            <template #content-0><p>Small tabs</p></template>
+            <template #content-1><p>Compact layout</p></template>
+            <template #content-2><p>Dense design</p></template>
+          </Tab>
+        </div>
+        <div>
+          <h3 class="text-sm font-medium mb-2 text-gray-600">Medium (Default)</h3>
+          <Tab
+            v-model="activeTab6"
+            :tabs="tabsData"
+            variant="pills"
+            size="md"
+          >
+            <template #content-0><p>Medium tabs</p></template>
+            <template #content-1><p>Standard layout</p></template>
+            <template #content-2><p>Balanced spacing</p></template>
+          </Tab>
+        </div>
+        <div>
+          <h3 class="text-sm font-medium mb-2 text-gray-600">Large</h3>
+          <Tab
+            v-model="activeTab7"
+            :tabs="tabsData"
+            variant="pills"
+            size="lg"
+          >
+            <template #content-0><p>Large tabs</p></template>
+            <template #content-1><p>Spacious layout</p></template>
+            <template #content-2><p>Touch-friendly sizes</p></template>
+          </Tab>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- Features: Closable tabs -->
+    <div class="border  p-6 border-[var(--vts-color-borderHeavy)]">
+      <h2 class="text-xl font-semibold mb-4">Closable Tabs</h2>
+      <Tab
+        v-model="activeTab8"
+        :tabs="closableTabs"
+        variant="pills"
+        closable
+        @close="handleCloseTab"
+      >
+        <template #content-0><p>First closable tab</p></template>
+        <template #content-1><p>Second closable tab</p></template>
+        <template #content-2><p>Third closable tab</p></template>
+      </Tab>
+      <!-- <p class="text-xs text-gray-500 mt-2">Click the X button to close tabs. The @close event is emitted.</p> -->
+    </div>
+
+    <!-- Features: With Icons and Badges -->
+    <div class="border  p-6 border-[var(--vts-color-borderHeavy)]">
+      <h2 class="text-xl font-semibold mb-4">Tabs with Icons & Badges</h2>
+      <Tab
+        v-model="activeTab9"
+        :tabs="tabsWithFeatures"
+        variant="line"
+      >
+        <template #content-0><p>Inbox messages loaded</p></template>
+        <template #content-1><p>Configuration complete</p></template>
+        <template #content-2><p>Your profile information</p></template>
+      </Tab>
+    </div>
+
+    <!-- Vertical tabs -->
+    <div class="border p-6 border-[var(--vts-color-borderHeavy)]">
+      <h2 class="text-xl font-semibold mb-4">Vertical Tabs</h2>
+      <Tab
+        v-model="activeTab10"
+        :tabs="tabsData"
+        variant="enclosed"
+        vertical
+      >
+        <template #content-0><p>Long Content</p></template>
+        <template #content-1><p>Short content.</p></template>
+        <template #content-2><p>Different content.</p></template>
+      </Tab>
+    </div>
+
+    <!-- Disabled tabs -->
+    <div class="border p-6 border-[var(--vts-color-borderHeavy)]">
+      <h2 class="text-xl font-semibold mb-4">Disabled Tabs</h2>
+      <Tab
+        v-model="activeTab11"
+        :tabs="disabledTabs"
+        variant="pills"
+      >
+        <template #content-0><p>First tab - active</p></template>
+        <template #content-1><p>This tab is disabled and cannot be clicked.</p></template>
+        <template #content-2><p>Third tab - enabled</p></template>
+      </Tab>
+    </div>
+
+    <!-- Centered & Justified -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Layout Options</h2>
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-sm font-medium mb-2 text-gray-600">Centered</h3>
+          <Tab
+            v-model="activeTab12"
+            :tabs="tabsData"
+            variant="line"
+            centered
+          >
+            <template #content-0><p>Tabs are centered</p></template>
+            <template #content-1><p>Good for small tab counts</p></template>
+            <template #content-2><p>Creates visual balance</p></template>
+          </Tab>
+        </div>
+        <div>
+          <h3 class="text-sm font-medium mb-2 text-gray-600">Justified (Equal Width)</h3>
+          <Tab
+            v-model="activeTab13"
+            :tabs="tabsData"
+            variant="line"
+            justified
+          >
+            <template #content-0><p>All tabs have equal width</p></template>
+            <template #content-1><p>Fills the container width</p></template>
+            <template #content-2><p>Balanced visual layout</p></template>
+          </Tab>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- Event logging -->
+    <!-- <div class="border rounded-lg p-6 dark:border-gray-700">
+      <h2 class="text-xl font-semibold mb-4">Events & Keyboard Navigation</h2>
+      <Tab
+        v-model="activeTab14"
+        :tabs="tabsData"
+        variant="pills"
+      >
+        <template #content-0><p>Use arrow keys to navigate (RTL aware)</p></template>
+        <template #content-1><p>Home/End keys jump to first/last tab</p></template>
+        <template #content-2><p>All events are logged below</p></template>
+      </Tab>
+      <div class="mt-4 p-4 bg-gray-100 dark:bg-gray-900 rounded text-sm max-h-40 overflow-y-auto">
+        <div class="text-gray-600 dark:text-gray-400 font-mono">
+          <div v-if="eventLog.length === 0" class="text-gray-400">Interact with tabs to see events...</div>
+          <div v-for="(event, idx) in eventLog.slice(-5)" :key="idx" class="mb-1">
+            {{ event }}
+          </div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Tab from '../pgo/Tab.vue'
+
+// Active tabs for different examples
+const activeTab1 = ref(0)
+const activeTab2 = ref(0)
+const activeTab3 = ref(0)
+const activeTab4 = ref(0)
+const activeTab5 = ref(0)
+const activeTab6 = ref(0)
+const activeTab7 = ref(0)
+const activeTab8 = ref(0)
+const activeTab9 = ref(0)
+const activeTab10 = ref(0)
+const activeTab11 = ref(0)
+const activeTab12 = ref(0)
+const activeTab13 = ref(0)
+const activeTab14 = ref(0)
+
+// Event logging
+const eventLog = ref([])
+
+// Basic tabs
+const tabsData = [
+  { label: 'Dashboard' },
+  { label: 'Settings' },
+  { label: 'Profile' }
+]
+
+// Closable tabs
+const closableTabs = ref([
+  { label: 'Tab 1' },
+  { label: 'Tab 2' },
+  { label: 'Tab 3' }
+])
+
+// Tabs with icons and badges
+const tabsWithFeatures = [
+  {
+    label: 'އިންބޮކްސް',
+    badge: '5',
+    badgeVariant: 'bg-red-500'
+  },
+  {
+    label: 'ސެޓިންގްސް',
+    badge: '2',
+    badgeVariant: 'bg-blue-500'
+  },
+  {
+    label: 'ޕްރޮފައިލް',
+    badge: 'New',
+    badgeVariant: 'bg-green-500'
+  }
+]
+
+// Disabled tabs
+const disabledTabs = [
+  { label: 'Enabled' },
+  { label: 'Disabled', disabled: true },
+  { label: 'Enabled' }
+]
+
+// Methods
+const onTabChange = (index) => {
+  addEvent(`Tab changed to index ${index}`)
+}
+
+const handleCloseTab = (index) => {
+  addEvent(`Tab ${index} closed`)
+  closableTabs.value.splice(index, 1)
+}
+
+const addEvent = (message) => {
+  eventLog.value.push(`[${new Date().toLocaleTimeString()}] ${message}`)
+}
+</script>

package/src/components/examples/TableExample.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="p-6 max-w-4xl mx-auto space-y-8">
+        <!-- <div class="p-6 max-w-7xl mx-auto"> -->
+            <!-- Example 1: Default Card-like styling -->
+            <DataTable
+                :items="tableData"
+                :headers="headers"
+                :server-side-options="options"
+                :loading="loading"
+                title="Users Management Table"
+                searchable
+                selectable
+                @update:options="handleOptionsUpdate"
+                @row-click="handleRowClick"
+                @selection-change="handleSelectionChange"
+            >
+              <!-- Custom cell content for status -->
+              <template #item.status="{ item }">
+                  <Chip :label="item.status" size="small" :color="getStatusClass(item.status)" />
+              </template>
+
+              <!-- Custom header actions -->
+              <template #header-actions>
+                  <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
+                  Add User
+                  </button>
+              </template>
+            </DataTable>
+
+            <!-- Example 2: Custom colored table -->
+            <div class="mt-8">
+            <DataTable
+                :items="tableData"
+                :headers="headers"
+                :server-side-options="options"
+                :loading="loading"
+                title=" Users Table2"
+                searchable
+                selectable
+                header-class="text-xl font-bold text-primary-800"
+                bg="bg-primary-50"
+                border="border-2 border-primary-200"
+                rounded="rounded-xl"
+                shadow="shadow-lg"
+                header-bg="bg-primary-100"
+                header-border="border-b border-primary-300"
+                header-text="text-primary-700"
+                row-hover="hover:bg-primary-100"
+                row-selected="bg-primary-200"
+                cell-text="text-primary-900"
+                input-border="border-primary-300 focus:border-primary-500 focus:ring-primary-500"
+                button-primary="bg-primary-600 hover:bg-primary-700 text-white"
+                button-secondary="bg-primary-100 hover:bg-primary-200 text-primary-700 border border-primary-300"
+                pagination-bg="bg-primary-50"
+                pagination-border="border-t-2 border-primary-300"
+                @update:options="handleOptionsUpdate"
+                @row-click="handleRowClick"
+                @selection-change="handleSelectionChange"
+            >
+                <!-- Custom cell content for status -->
+                <template #item.status="{ item }">
+                <Chip :label="item.status" :color="getStatusClass(item.status)" />
+                <!-- <span :class="getStatusClass(item.status)">
+                    {{ item.status }}
+                </span> -->
+                </template>
+                
+                <!-- Custom actions -->
+                <template #item-actions="{ item }">
+                <div class="flex space-x-2">
+                    <Button @click.stop="editItem(item)" size="md" color="success" variant="text" icon="arrow-right-end-on-rectangle" label="" />
+                    <Button @click.stop="deleteItem(item)" size="md" color="danger" variant="text" icon="trash" label="" />
+                    <Button size="md" icon="pencil-square" color="primary" variant="text" label="" />
+                </div>
+                </template>
+
+                <!-- Custom header actions -->
+                <template #header-actions>
+                <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium">
+                    Add User
+                </button>
+                </template>
+            </DataTable>
+            </div>
+        </div>
+    <!-- </div> -->
+</template>
+<script setup>
+    import { ref } from 'vue'
+    import DataTable from '../pgo/DataTable.vue'
+    import Chip from '../pgo/buttons/Chip.vue'
+    import Button from '../pgo/Button.vue'
+
+    // Mock data for DataTable
+    const tableData = ref([])
+    const loading = ref(false)
+    
+    const headers = [
+      { key: 'name', title: 'Name' },
+      { key: 'email', title: 'Email' },
+      { key: 'status', title: 'Status' },
+      { key: 'created_at', title: 'Created', format: (value) => new Date(value).toLocaleDateString() }
+    ]
+
+    const options = ref({
+      page: 1,
+      itemsPerPage: 10,
+      sortBy: [],
+      sortDesc: [],
+      itemsLength: 0
+    })
+
+    // Mock server data
+    const mockServerData = [
+      { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active', created_at: '2023-01-15T10:00:00Z' },
+      { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive', created_at: '2023-02-20T14:30:00Z' },
+      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Active', created_at: '2023-03-10T09:15:00Z' },
+      { id: 4, name: 'Alice Brown', email: 'alice@example.com', status: 'Pending', created_at: '2023-04-05T16:45:00Z' },
+      { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', status: 'Active', created_at: '2023-05-12T11:20:00Z' },
+      { id: 6, name: 'Diana Davis', email: 'diana@example.com', status: 'Inactive', created_at: '2023-06-18T13:00:00Z' },
+      { id: 7, name: 'Edward Miller', email: 'edward@example.com', status: 'Active', created_at: '2023-07-22T08:30:00Z' },
+      { id: 8, name: 'Fiona Garcia', email: 'fiona@example.com', status: 'Pending', created_at: '2023-08-14T15:10:00Z' },
+      { id: 9, name: 'George Martinez', email: 'george@example.com', status: 'Active', created_at: '2023-09-03T12:45:00Z' },
+      { id: 10, name: 'Helen Anderson', email: 'helen@example.com', status: 'Inactive', created_at: '2023-10-07T17:20:00Z' },
+      { id: 11, name: 'Ian Taylor', email: 'ian@example.com', status: 'Active', created_at: '2023-11-11T10:55:00Z' },
+      { id: 12, name: 'Julia Thomas', email: 'julia@example.com', status: 'Pending', created_at: '2023-12-01T14:15:00Z' }
+    ]
+
+    // Simulate server-side data fetching
+    const fetchTableData = async (newOptions) => {
+      loading.value = true
+      
+      // Simulate API delay
+      await new Promise(resolve => setTimeout(resolve, 800))
+      
+      let filteredData = [...mockServerData]
+      
+      // Apply search filter
+      if (newOptions.search) {
+        const searchTerm = newOptions.search.toLowerCase()
+        filteredData = filteredData.filter(item => 
+          item.name.toLowerCase().includes(searchTerm) ||
+          item.email.toLowerCase().includes(searchTerm) ||
+          item.status.toLowerCase().includes(searchTerm)
+        )
+      }
+      
+      // Apply sorting
+      if (newOptions.sortBy.length > 0) {
+        const sortKey = newOptions.sortBy[0]
+        const sortDesc = newOptions.sortDesc[0]
+        
+        filteredData.sort((a, b) => {
+          let aVal = a[sortKey]
+          let bVal = b[sortKey]
+          
+          // Handle date sorting
+          if (sortKey === 'created_at') {
+            aVal = new Date(aVal)
+            bVal = new Date(bVal)
+          }
+          
+          // Handle string sorting
+          if (typeof aVal === 'string') {
+            aVal = aVal.toLowerCase()
+            bVal = bVal.toLowerCase()
+          }
+          
+          if (aVal < bVal) return sortDesc ? 1 : -1
+          if (aVal > bVal) return sortDesc ? -1 : 1
+          return 0
+        })
+      }
+      
+      // Update total count
+      options.value.itemsLength = filteredData.length
+      
+      // Apply pagination
+      const start = (newOptions.page - 1) * newOptions.itemsPerPage
+      const end = start + newOptions.itemsPerPage
+      tableData.value = filteredData.slice(start, end)
+      
+      loading.value = false
+    }
+
+    // Handle table options update
+    const handleOptionsUpdate = (newOptions) => {
+      options.value = { ...options.value, ...newOptions }
+      fetchTableData(newOptions)
+    }
+
+    // Handle row click
+    const handleRowClick = (item, index) => {
+      console.log('Row clicked:', item, index)
+    }
+
+    // Handle selection change
+    const handleSelectionChange = (selectedIds, selectedItems) => {
+      console.log('Selection changed:', selectedIds, selectedItems)
+    }
+
+    // Get status class for styling
+    const getStatusClass = (status) => {
+      switch (status?.toLowerCase()) {
+        case 'active':
+          return 'success'
+        case 'inactive':
+          return 'error'
+        case 'pending':
+          return 'warning'
+        default:
+          return 'primary'
+      }
+    }
+
+    // Edit item function
+    const editItem = (item) => {
+      console.log('Edit item:', item)
+    }
+
+    // Delete item function
+    const deleteItem = (item) => {
+      console.log('Delete item:', item)
+    }
+
+    // Initial data load
+    fetchTableData(options.value)
+</script>