pgo-uiux2 1.0.0

package/src/components/examples/DatePickerExample.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="example-component p-6">
+    <h2 class="mb-4 text-lg font-semibold">
+      Vue 3 DatePicker Example
+    </h2>
+
+    <DatePicker
+      v-model="selectedDate"
+      format="yyyy-MM-dd"
+      :clearable="true"
+      placeholder="Select a date"
+    />
+
+    <p class="mt-4">
+      Selected date: {{ selectedDate ? selectedDate.toDateString() : 'None' }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import DatePicker from '../pgo/inputs/DatePicker.vue'
+
+  const selectedDate = ref<Date | null>(null)
+</script>
+
+<style scoped>
+  .example-component {
+    font-family: system-ui, sans-serif;
+  }
+</style>

package/src/components/examples/DropdownExample.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="p-6 max-w-4xl mx-auto space-y-8">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6">Dropdown Components</h2>
+    
+    <Card title="Dropdown Examples" class="space-y-6">
+      <div class="flex items-center gap-4 flex-wrap">
+        <!-- Basic Dropdown with items prop -->
+        <Dropdown label="Select Option" :items="items" @select="handleSelect" />
+        <Dropdown  variant="outlined" color="success" label="Select Option" :items="items" @select="handleSelect" />
+
+        <!-- Custom trigger -->
+        <Dropdown :items="items" @select="handleSelect">
+          <template #trigger>
+            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+              Custom Trigger
+            </button>
+          </template>
+        </Dropdown>
+
+        <!-- With custom content -->
+        <Dropdown label="Actions" align="right">
+          <DropdownItem @select="edit">
+            <template #prepend>📝</template>
+            Edit
+          </DropdownItem>
+          <DropdownItem @select="view">
+            <template #prepend>👁️</template>
+            View
+          </DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem @select="remove">
+            <template #prepend>🗑️</template>
+            Delete
+          </DropdownItem>
+        </Dropdown>
+
+        <!-- Dense variant -->
+        <Dropdown label="Dense Menu" dense :items="items" @select="handleSelect" />
+
+        <!-- Open on hover -->
+        <Dropdown label="Hover Menu" open-on-hover :items="items" @select="handleSelect" />
+
+        <!-- Right aligned -->
+        <Dropdown label="Right Aligned" align="right" :items="items" @select="handleSelect" />
+      </div>
+
+      <div class="mt-4 p-4 bg-gray-100 rounded">
+        <p class="text-sm font-medium">Selected: {{ selectedItem || 'None' }}</p>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Card from '../pgo/Card.vue'
+import Dropdown from '../pgo/Dropdown.vue'
+import DropdownItem from '../pgo/DropdownItem.vue'
+
+const selectedItem = ref(null)
+
+const items = [
+  { label: 'Profile', value: 'profile' },
+  { label: 'Settings', value: 'settings' },
+  { label: 'Logout', value: 'logout' }
+]
+
+const handleSelect = (item) => {
+  selectedItem.value = item.label || item
+  console.log('Selected:', item)
+}
+
+const edit = () => {
+  console.log('Edit clicked')
+}
+
+const view = () => {
+  console.log('View clicked')
+}
+
+const remove = () => {
+  console.log('Delete clicked')
+}
+</script>

package/src/components/examples/EditorExample.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="space-y-6">
+    <!-- Header -->
+    <div>
+      <h2 class="text-2xl font-bold mb-2">Rich Text Editor Demo</h2>
+      <p class="text-gray-600 dark:text-gray-400">A full-featured rich text editor with formatting, tables, and HTML editing</p>
+    </div>
+
+    <!-- Controls Section -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div>
+        <label class="block text-sm font-medium mb-2">Character Limit:</label>
+        <input
+          v-model.number="characterLimit"
+          type="number"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-900"
+          min="0"
+          placeholder="Leave empty for no limit"
+        />
+      </div>
+
+      <div>
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input v-model="stickyToolbar" type="checkbox" class="w-4 h-4" />
+          <span class="text-sm font-medium">Sticky Toolbar</span>
+        </label>
+      </div>
+
+      <div>
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input v-model="allowHtmlEdit" type="checkbox" class="w-4 h-4" />
+          <span class="text-sm font-medium">Allow HTML Editing</span>
+        </label>
+      </div>
+
+      <div class="flex gap-2">
+        <button
+          @click="loadSampleContent"
+          class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition"
+        >
+          Load Sample
+        </button>
+        <button
+          @click="clearEditor"
+          class="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded font-medium transition"
+        >
+          Clear All
+        </button>
+      </div>
+    </div>
+
+    <!-- Editor Instance -->
+    <div>
+      <h3 class="text-lg font-semibold mb-3">Editor</h3>
+      <Editor
+        v-model="content"
+        :maximum-length="characterLimit || null"
+        :can-edit-html="allowHtmlEdit"
+        :sticky-toolbar="stickyToolbar"
+        @limitReached="onLimitReached"
+        @limitOk="onLimitOk"
+      />
+    </div>
+
+    <!-- Status and Information -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Content Info -->
+      <div class="p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg border border-blue-200 dark:border-blue-800">
+        <h4 class="font-semibold mb-2 text-blue-900 dark:text-blue-100">Content Status</h4>
+        <div class="space-y-1 text-sm text-blue-800 dark:text-blue-200">
+          <p><strong>Characters:</strong> {{ editorCharCount }}</p>
+          <p v-if="characterLimit">
+            <strong>Limit:</strong> {{ characterLimit }}
+            <span v-if="isAtLimit" class="text-red-600 dark:text-red-400 font-medium ml-2">⚠ LIMIT REACHED</span>
+          </p>
+          <p><strong>Status:</strong> {{ isAtLimit ? '❌ Limit reached' : '✅ Within limit' }}</p>
+        </div>
+      </div>
+
+      <!-- Features Info -->
+      <div class="p-4 bg-green-50 dark:bg-green-900/30 rounded-lg border border-green-200 dark:border-green-800">
+        <h4 class="font-semibold mb-2 text-green-900 dark:text-green-100">Features</h4>
+        <ul class="text-sm text-green-800 dark:text-green-200 space-y-1">
+          <li>✓ Bold & Underline formatting</li>
+          <li>✓ Bullet & Ordered lists</li>
+          <li>✓ LTR / RTL direction support</li>
+          <li>✓ Table creation & editing</li>
+          <li>✓ HTML mode for advanced editing</li>
+          <li>✓ Character limit tracking</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Events Log -->
+    <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h4 class="font-semibold mb-2">Recent Events</h4>
+      <div class="space-y-1 text-sm max-h-32 overflow-y-auto">
+        <div v-if="eventLog.length === 0" class="text-gray-500 dark:text-gray-400">
+          No events yet
+        </div>
+        <div v-for="(event, idx) in eventLog.slice(-5)" :key="idx" class="text-gray-700 dark:text-gray-300">
+          <span class="text-xs text-gray-500 dark:text-gray-500">{{ event.time }}</span>
+          {{ event.message }}
+        </div>
+      </div>
+    </div>
+
+    <!-- HTML Output -->
+    <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h4 class="font-semibold mb-2">HTML Output</h4>
+      <div class="p-3 bg-white dark:bg-gray-900 rounded border border-gray-300 dark:border-gray-600 font-mono text-xs overflow-x-auto max-h-40 overflow-y-auto">
+        <code>{{ content }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import Editor from '../pgo/Editor.vue'
+
+  const content = ref('<p>Hello world</p>')
+  const characterLimit = ref(500)
+  const allowHtmlEdit = ref(true)
+  const stickyToolbar = ref(true)
+  const editorCharCount = ref(0)
+  const isAtLimit = ref(false)
+  const eventLog = ref<Array<{ time: string; message: string }>>([])
+
+  const sampleContent = `
+    <h2>Welcome to the Rich Text Editor</h2>
+    <p>This editor supports the following formatting options:</p>
+    <ul>
+      <li><strong>Bold text</strong> for emphasis</li>
+      <li><u>Underlined text</u> for additional highlighting</li>
+      <li>Bullet lists for organizing information</li>
+    </ul>
+    <ol>
+      <li>Numbered lists for sequential items</li>
+      <li>Perfect for instructions or steps</li>
+    </ol>
+    <p>You can also:</p>
+    <ul>
+      <li>Insert tables for structured data</li>
+      <li>Edit HTML directly when needed</li>
+      <li>Use LTR or RTL text direction</li>
+      <li>Track character count with limits</li>
+    </ul>
+  `
+
+  function loadSampleContent() {
+    content.value = sampleContent.replace(/\n\s+/g, '').trim()
+    addEvent('Sample content loaded')
+  }
+
+  function clearEditor() {
+    if (confirm('Are you sure you want to clear all content?')) {
+      content.value = '<p></p>'
+      addEvent('Editor cleared')
+    }
+  }
+
+  function onLimitReached() {
+    isAtLimit.value = true
+    addEvent('⚠️ Character limit reached! Editing disabled.')
+    console.warn('Character limit reached')
+  }
+
+  function onLimitOk() {
+    isAtLimit.value = false
+    addEvent('✅ Back under character limit')
+    console.log('Back under limit')
+  }
+
+  function addEvent(message: string) {
+    const now = new Date()
+    const time = now.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    })
+    eventLog.value.push({ time, message })
+  }
+
+  // Watch for content changes to update character count
+  const updateCharCount = () => {
+    // Count only visible text characters
+    const div = document.createElement('div')
+    div.innerHTML = content.value
+    editorCharCount.value = div.innerText.length
+  }
+
+  // Update character count when content changes
+  watch(content, () => {
+    updateCharCount()
+  })
+
+  // Initial character count
+  updateCharCount()
+</script>

package/src/components/examples/ExpansionPanelExample.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <ExpansionPanel :panelsData="panels" :allowMultiple="false" :readOnly="false" :disable="false" />
+  </div>
+</template>
+
+<script>
+  import ExpansionPanel from '../pgo/ExpansionPanel.vue';
+
+  export default {
+    components: {
+      ExpansionPanel
+    },
+    data() {
+      return {
+        panels: [
+          {
+            title: 'Panel 1',
+            content: 'This is the content of Panel 1.',
+            icon: '🔒',
+            readonly: false,
+            disabled: false
+          },
+          {
+            title: 'Panel 2',
+            content: 'This is the content of Panel 2.',
+            icon: '✅',
+            readonly: false,
+            disabled: false
+          },
+          {
+            title: 'Panel 3',
+            content: 'This is the content of Panel 3.',
+            icon: '📚',
+            readonly: true,
+            disabled: false
+          }
+        ]
+      }
+    }
+  }
+</script>

package/src/components/examples/FileUploadExample.vue

@@ -0,0 +1,40 @@
+<template>
+  <Card :title="'File Upload'" class="mb-4">
+    <div class="space-y-3">
+      <FileUpload
+        v-model="files"
+        label="Upload files"
+        hint="Images allowed, max 2MB each"
+        :accept="'image/*,.pdf'"
+        :max-size-mb="2"
+        :multiple="true"
+        
+      />
+
+      <div v-if="files.length" class="mt-2">
+        <div class="text-sm text-input-text mb-1">Selected:</div>
+        <ul class="space-y-1">
+          <li v-for="(f, i) in files" :key="i" class="text-xs text-input-text">{{ f.file.name }} — {{ formatSize(f.file.size) }}</li>
+        </ul>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import Card from '../pgo/Card.vue'
+  import FileUpload from '../pgo/inputs/FileUpload.vue'
+
+  const files = ref([])
+
+  function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`
+    const kb = bytes / 1024
+    if (kb < 1024) return `${kb.toFixed(1)} KB`
+    const mb = kb / 1024
+    return `${mb.toFixed(2)} MB`
+  }
+</script>
+
+<style scoped></style>

package/src/components/examples/FormExample.vue

@@ -0,0 +1,121 @@
+<template>
+  <Card
+    :title="'Form Example'"
+    class="mb-4"
+    bg=""
+  >
+    <!-- Debug Info -->
+    <div class="mb-4 p-4 bg-surface rounded">
+      <div>Form Valid: {{ isValid }}</div>
+      <div>Form Data: {{ data }}</div>
+    </div>
+
+    <!-- New Vuetify-style Form -->
+    <Form
+      ref="form" 
+      v-model="isValid"
+      validate-on="blur"
+      padding="p-4 space-y-4"
+    >
+      <div class="space-y-4">
+        <InputSearch
+          v-model="data.name"
+          label="Name"
+          :rules="[rules.required, rules.min(3)]"
+        />
+        
+        <Select
+          v-model="data.country"
+          label="Country"
+          :items="countries"
+          item-title="text"
+          item-value="value"
+          :rules="[rules.required]"
+          :searchable="true"
+          :multiple="true"
+        />
+
+        <InputSearch
+          v-model="data.nid"
+          label="NID"
+          :rules="[rules.required, rules.customPattern(
+            () => data.country === 'mv', 
+            '^A\\d{6}$',
+            'NID must start with A followed by 6 digits for Maldives'
+          )]"
+        />
+        <TextField
+          v-model="data.nid2"
+          label="NID2"
+          :rules="[rules.required, rules.nid(data.country)]"
+        />
+        <Textarea
+          v-model="data.description"
+          label="Description"
+          :rules="[rules.max(200)]"
+        />
+        
+        <div class="flex gap-2">
+          <Button
+            type="submit"
+            :disabled="!isValid"
+            @click="submit"
+          >
+            Submit
+          </Button>
+          
+          <Button 
+            @click="form?.reset()"
+            label="reset"
+          />
+          
+          <!-- <Button 
+            @click="form?.validate()"
+            variant="outlined"
+          >
+            Validate
+          </Button> -->
+        </div>
+      </div>
+    </Form>
+  </Card>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import Card from '../pgo/Card.vue'
+import Form from '../pgo/forms/Form.vue'
+import InputSearch from '../pgo/InputSearch.vue'
+import TextField from '../pgo/inputs/TextField.vue'
+import Select from '../pgo/inputs/Select.vue'
+import Button from '../pgo/Button.vue'
+import Textarea from '../pgo/inputs/Textarea.vue'
+// import rules from '../validations/validationRules'
+
+const rules = inject('validationRules')
+
+const form = ref(null)
+const isValid = ref(false) // Track form validity
+
+const data = ref({
+  name: '',
+  role: '',
+  country: [],
+  nid: '',
+  nid2: '',
+  description: '',
+})
+
+const countries = [
+  { text: 'Maldives', value: 'mv' },
+  { text: 'India', value: 'in' },
+  { text: 'Sri Lanka', value: 'lk' },
+]
+
+const submit = async () => {
+  const { valid } = await form.value.validate()
+  if (!valid) return
+
+  console.log('FORM OK', data.value)
+}
+</script>

package/src/components/examples/HugeTest.vue

@@ -0,0 +1,8 @@
+
+
+<template>
+  <div>Hello</div>
+</template>
+
+<script setup lang="ts">
+</script>

package/src/components/examples/LayoutContainerExample.vue

@@ -0,0 +1,80 @@
+<template>
+  <LayoutContainer>
+    <!-- Default slot → Main Content -->
+    <template #default>
+      <div>
+        <h1 class="text-3xl font-bold mb-4">Dashboard</h1>
+
+        <p class="text-gray-600 mb-6">This is the main content area.</p>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div v-for="n in 9" :key="n" class="bg-white p-4 rounded shadow">
+            <h2 class="font-semibold mb-2">Card {{ n }}</h2>
+            <p class="text-sm text-gray-500">
+              Example content for card number {{ n }}.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1">
+        <NavDrawerExample />
+        <AppBarExample />
+      </div>
+
+      <div class="container mx-auto p-6">
+        <!-- Stacked Table View Example -->
+        <StackedTableViewExample />
+
+        <!-- TextField Example -->
+        <TextFieldExample />
+
+        <!-- Textarea Example -->
+        <TextareaExample />
+
+        <!-- Dropdown Examples -->
+        <DropdownExample />
+
+        <!-- Card Example -->
+        <CardExample />
+
+        <!-- Chips Examples -->
+        <ChipExample />
+
+        <!-- DataTable Example -->
+        <TableExample />
+
+        <!-- Select Example -->
+        <!-- <SelectExample /> -->
+
+        <!-- Banner Example -->
+        <BannerExample />
+
+        <!-- Search Example -->
+        <SearchExample />
+      </div>
+    </template>
+
+    <!-- Footer slot -->
+    <template #footer>
+      <div class="text-center text-gray-500 text-sm">© 2025 My Awesome App</div>
+    </template>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import AppBarExample from "../examples/AppBarExample.vue";
+import NavDrawerExample from "../examples/NavDrawerExample.vue";
+import ChipExample from "../examples/ChipExample.vue";
+import TableExample from "../examples/TableExample.vue";
+import SelectExample from "../examples/SelectExample.vue";
+import CardExample from "../examples/CardExample.vue";
+import DropdownExample from "../examples/DropdownExample.vue";
+import TextareaExample from "../examples/TextareaExample.vue";
+import TextFieldExample from "../examples/TextFieldExample.vue";
+import BannerExample from "../examples/BannerExample.vue";
+import SearchExample from "../examples/SearchExample.vue";
+import StackedTableViewExample from "../examples/StackedTableViewExample.vue";
+
+import LayoutContainer from "../pgo/LayoutContainer.vue";
+</script>