pgo-uiux2 1.0.0

package/src/components/examples/BannerExample.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="p-6 max-w-4xl mx-auto space-y-8">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6">Banner Components</h2>
+
+    <!-- Controls -->
+    <Card title="Banner Controls">
+      <div class="space-y-4">
+        <div class="flex gap-2 flex-wrap">
+          <Button @click="showDefault = true" color="gray" size="sm">Show Default</Button>
+          <Button @click="showInfo = true" color="info" size="sm">Show Info</Button>
+          <Button @click="showSuccess = true" color="success" size="sm">Show Success</Button>
+          <Button @click="showWarning = true" color="warning" size="sm">Show Warning</Button>
+          <Button @click="showError = true" color="danger" size="sm">Show Error</Button>
+        </div>
+      </div>
+    </Card>
+
+    <!-- Banner Examples -->
+    <div class="space-y-4">
+      <!-- Default Banner -->
+      <Banner
+        v-model="showDefault"
+        title="Default Banner"
+        message="This is a default banner message."
+        sticky
+      />
+
+      <!-- Info Banner -->
+      <Banner
+        v-model="showInfo"
+        variant="info"
+        icon="info"
+        title="Information"
+        message="This is an informational banner with an icon."
+        sticky
+      />
+
+      <!-- Success Banner -->
+      <Banner
+        v-model="showSuccess"
+        variant="success"
+        icon="success"
+        title="Success!"
+        message="Your action was completed successfully."
+        :timeout="5000"
+        show-progress
+        sticky
+      />
+
+      <!-- Warning Banner -->
+      <Banner
+        v-model="showWarning"
+        variant="warning"
+        icon="warning"
+        title="Warning"
+        message="Please review the following information carefully."
+        outlined
+        sticky
+      />
+
+      <!-- Error Banner -->
+      <Banner
+        v-model="showError"
+        variant="error"
+        icon="error"
+        title="Error"
+        message="An error occurred. Please try again."
+        sticky
+      />
+    </div>
+
+    <!-- More Examples -->
+    <Card title="Banner Variants">
+      <div class="space-y-6">
+        <!-- With Actions -->
+        <Banner
+          v-model="bannerWithActions"
+          variant="info"
+          icon="info"
+          title="Update Available"
+          message="A new version is available. Update now to get the latest features."
+        >
+          <template #actions>
+            <Button size="sm" variant="text" color="info" @click="bannerWithActions = false">
+              Dismiss
+            </Button>
+            <Button size="sm" color="info" @click="handleUpdate">
+              Update Now
+            </Button>
+          </template>
+        </Banner>
+
+        <!-- Dense Banner -->
+        <Banner
+          v-model="denseBanner"
+          variant="success"
+          icon="success"
+          message="Dense banner with compact spacing"
+          dense
+        />
+
+        <!-- With Custom Content -->
+        <Banner
+          v-model="customBanner"
+          variant="warning"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <span class="text-2xl">⚠️</span>
+              <span>Custom Banner Content</span>
+            </div>
+          </template>
+          <template #default>
+            <p>You can use slots to fully customize the banner content.</p>
+            <ul class="list-disc list-inside mt-2 text-sm">
+              <li>Custom icons</li>
+              <li>Rich content</li>
+              <li>Any HTML structure</li>
+            </ul>
+          </template>
+        </Banner>
+
+        <!-- Auto-dismiss with Progress -->
+        <Banner
+          v-model="autoDismiss"
+          variant="success"
+          icon="success"
+          title="Auto Dismiss"
+          message="This banner will automatically dismiss in 10 seconds."
+          :timeout="10000"
+          show-progress
+        />
+
+        <!-- Bottom Position -->
+        <Banner
+          v-model="bottomBanner"
+          variant="info"
+          icon="info"
+          title="Bottom Banner"
+          message="This banner is positioned at the bottom."
+          position="bottom"
+          sticky
+        />
+
+        <!-- Rounded -->
+        <Banner
+          v-model="roundedBanner"
+          variant="error"
+          icon="error"
+          title="Rounded Banner"
+          message="This banner has rounded corners."
+          rounded="lg"
+        />
+
+        <!-- Not Closeable -->
+        <Banner
+          v-model="notCloseable"
+          variant="warning"
+          icon="warning"
+          title="Important Notice"
+          message="This banner cannot be closed by the user."
+          :closeable="false"
+        />
+      </div>
+
+      <div class="mt-6 flex gap-2 flex-wrap">
+        <Button @click="showAllBanners" size="sm">Show All Banners</Button>
+        <Button @click="hideAllBanners" variant="outlined" size="sm">Hide All Banners</Button>
+      </div>
+    </Card>
+
+    <!-- API Reference -->
+    <Card title="API Reference">
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm">
+          <thead class="border-b">
+            <tr>
+              <th class="text-left p-2">Prop</th>
+              <th class="text-left p-2">Type</th>
+              <th class="text-left p-2">Default</th>
+              <th class="text-left p-2">Description</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y">
+            <tr>
+              <td class="p-2 font-mono">v-model</td>
+              <td class="p-2">Boolean</td>
+              <td class="p-2">true</td>
+              <td class="p-2">Controls banner visibility</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">variant</td>
+              <td class="p-2">String</td>
+              <td class="p-2">'default'</td>
+              <td class="p-2">default | info | success | warning | error</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">icon</td>
+              <td class="p-2">String</td>
+              <td class="p-2">''</td>
+              <td class="p-2">Icon to display (info, success, warning, error)</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">timeout</td>
+              <td class="p-2">Number</td>
+              <td class="p-2">0</td>
+              <td class="p-2">Auto-dismiss after X ms (0 = disabled)</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">sticky</td>
+              <td class="p-2">Boolean</td>
+              <td class="p-2">false</td>
+              <td class="p-2">Stick to top/bottom of viewport</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">position</td>
+              <td class="p-2">String</td>
+              <td class="p-2">'top'</td>
+              <td class="p-2">Position when sticky (top | bottom)</td>
+            </tr>
+            <tr>
+              <td class="p-2 font-mono">showProgress</td>
+              <td class="p-2">Boolean</td>
+              <td class="p-2">false</td>
+              <td class="p-2">Show progress bar for auto-dismiss</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Card from '../pgo/Card.vue'
+import Banner from '../pgo/Banner.vue'
+import Button from '../pgo/Button.vue'
+
+const showDefault = ref(true)
+const showInfo = ref(true)
+const showSuccess = ref(true)
+const showWarning = ref(true)
+const showError = ref(true)
+const bannerWithActions = ref(true)
+const denseBanner = ref(true)
+const customBanner = ref(true)
+const autoDismiss = ref(true)
+const bottomBanner = ref(false)
+const roundedBanner = ref(true)
+const notCloseable = ref(true)
+
+const handleUpdate = () => {
+  alert('Update initiated!')
+  bannerWithActions.value = false
+}
+
+const showAllBanners = () => {
+  showDefault.value = true
+  showInfo.value = true
+  showSuccess.value = true
+  showWarning.value = true
+  showError.value = true
+  bannerWithActions.value = true
+  denseBanner.value = true
+  customBanner.value = true
+  autoDismiss.value = true
+  bottomBanner.value = true
+  roundedBanner.value = true
+  notCloseable.value = true
+}
+
+const hideAllBanners = () => {
+  showDefault.value = false
+  showInfo.value = false
+  showSuccess.value = false
+  showWarning.value = false
+  showError.value = false
+  bannerWithActions.value = false
+  denseBanner.value = false
+  customBanner.value = false
+  autoDismiss.value = false
+  bottomBanner.value = false
+  roundedBanner.value = false
+  notCloseable.value = false
+}
+</script>

package/src/components/examples/BaseInputExample.vue

@@ -0,0 +1,25 @@
+<template>
+  <BaseInput
+    v-bind="$props"
+    v-on="$attrs"
+  >
+    <template #control="{ attrs, events }">
+      <input
+        class="w-full bg-transparent outline-none"
+        v-bind="attrs"
+        v-on="events"
+        type="text"
+      />
+    </template>
+  </BaseInput>
+</template>
+
+<script setup>
+import BaseInput from '@components/pgo/BaseInput.vue';
+
+defineProps({
+  modelValue: String,
+  label: String,
+  ... // you can re-expose base props here or use inheritAttrs
+})
+</script>

package/src/components/examples/BreadcrumbExample.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="p-6 space-y-6">
+    <!-- Auto from router -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        From Router
+      </h3>
+      <Breadcrumb />
+    </section>
+
+    <!-- Basic usage -->
+    <Breadcrumb :items="items" />
+
+    <!-- With prepend + custom divider -->
+    <Breadcrumb
+      :items="items"
+      container-class="text-[var(--vts-color-primary)]"
+      item-class="hover:underline"
+      active-class="text-[var(--vts-color-text)]"
+    >
+      <template #prepend>
+        <span class="text-[var(--vts-color-primary)]">📁&nbsp;</span>
+      </template>
+
+      <template #divider>
+        <span class="text-[var(--vts-color-textSecondary)]">/</span>
+      </template>
+    </Breadcrumb>
+
+    <!-- Minimal + RTL friendly -->
+    <div>
+      <Breadcrumb
+        :items="itemsEng"
+        container-class="text-[var(--vts-color-text)]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Breadcrumb from '../pgo/Breadcrumb.vue'
+
+  const items = [
+    { label: 'އުޅޭތަން', href: '/' },
+    { label: 'ޕްރޮޖެކްޓްސް', href: '/projects' },
+    { label: 'ކުދި ޕްރޮޖެކްޓްސް', disabled: true }
+  ]
+  const itemsEng = [
+    { label: 'Home', href: '/' },
+    { label: 'Projects', href: '/projects' },
+    { label: 'Smaller projects', disabled: true }
+  ]
+</script>

package/src/components/examples/CardExample.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="p-6 max-w-4xl mx-auto space-y-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">Card Components</h2>
+        <div class="flex gap-2">
+            <Card
+                lang="en"
+                :title="title"
+                :labels="labels"
+                :item="item"
+                cardClass="w-92 "
+            >
+
+                <!-- <p v-if="language == 'en'" class="">
+                    This is a simple card component. You can use it to display content in a structured way.
+                </p>
+                <p v-if="language == 'dv'" class="">
+                    ގައުމީ ސިއްހީ އިންޝުއަރެންސް ނިޒާމު އާސަންދަ އޮތީ ސަލާންޖަހަން ޖެހޭ ފަދަ ހާލަތެއްގައިކަން ގަބޫލުކުރަން ދަތި ކަމަށް ހެލްތު މިނިސްޓަރު އަބްދުﷲ ނާޒިމް އިބްރާހީމް މިއަދު ވިދާޅުވެއްޖެއެވެ.
+                </p> -->
+                <template #footer>
+                    <div class="flex justify-end gap-2 ">
+                        <!-- <pgo-button size="xs" color="gray" variant="outlined" label="buttons.cancel" />
+                        <pgo-button size="xs" label="buttons.save" variant="default" /> -->
+                        <Button size="xs" color="gray" variant="outlined" label="buttons.cancel"></Button>
+                        <Button size="xs" label="buttons.save" variant="default"></Button>
+                    </div>
+                </template>
+            </Card>                                                                 
+            <Card
+                :title="labels"
+                lang="dv"
+                :labels="labels"
+                :item="item"
+                cardClass="w-92 "
+                rounded="xl"
+                class="border-dashed"
+            >
+
+                <template #footer>
+                    <div class="flex justify-end gap-2 ">
+                        <!-- <pgo-button size="xs" color="gray" variant="outlined" label="buttons.cancel" />
+                        <pgo-button size="xs" label="buttons.save" variant="default" /> -->
+                        <Button lang="dv" size="xs" label="buttons.save" variant="default"></Button>
+                        <Button lang="dv" size="xs" color="gray" variant="outlined" label="buttons.cancel"></Button>
+                    </div>
+                </template>
+            </Card> 
+        </div>                                                                
+    </div>
+</template>
+<script setup>
+    import { ref } from 'vue'
+    import Card from '../pgo/Card.vue'
+    import Button from '../pgo/Button.vue'
+
+    const item = {
+        title: 'Sample Item',
+        body: ' This is a simple card component. You can use it to display content in a structured way.',
+        title_dv: 'ސަމްޕަލް އައިޓެމް',
+        body_dv: 'ގައުމީ ސިއްހީ އިންޝުއަރެންސް ނިޒާމު އާސަންދަ އޮތީ ސަލާންޖަހަން ޖެހޭ ފަދަ ހާލަތެއްގައިކަން ގަބޫލުކުރަން ދަތި ކަމަށް ހެލްތު މިނިސްޓަރު އަބްދުﷲ ނާޒިމް އިބްރާހީމް މިއަދު ވިދާޅުވެއްޖެއެވެ.'
+    }
+
+    const labels = {
+        en: {
+            title: 'title',
+            body: 'body'
+        },
+        dv: {
+            title: 'title_dv',
+            body: 'body_dv'
+        }
+    }
+
+    const title = {
+        en:  'title',
+        dv: 'ކާޑް',
+    }
+</script>

package/src/components/examples/ChipExample.vue

@@ -0,0 +1,225 @@
+<template>
+    <!-- Chips Examples -->
+    <div class="p-6 max-w-4xl mx-auto space-y-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">Chip Components</h2>
+        
+        <!-- Basic Chips -->
+        <Card title="Basic Chips" class="space-y-4">
+        <div class="space-y-4">
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Default Variants</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Default" />
+                <Chip label="Primary" color="primary" />
+                <Chip label="Secondary" color="secondary" />
+                <Chip label="Success" color="success" />
+                <Chip label="Warning" color="warning" />
+                <Chip label="Error" color="error" />
+                <Chip label="Info" color="info" />
+            </div>
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Outlined Variants</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Default" variant="outlined" />
+                <Chip label="Primary" variant="outlined" color="primary" />
+                <Chip label="Secondary" variant="outlined" color="secondary" />
+                <Chip label="Success" variant="outlined" color="success" />
+                <Chip label="Warning" variant="outlined" color="warning" />
+                <Chip label="Error" variant="outlined" color="error" />
+                <Chip label="Info" variant="outlined" color="info" />
+            </div>
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Filled Variants</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Default" variant="filled" />
+                <Chip label="Primary" variant="filled" color="primary" />
+                <Chip label="Secondary" variant="filled" color="secondary" />
+                <Chip label="Success" variant="filled" color="success" />
+                <Chip label="Warning" variant="filled" color="warning" />
+                <Chip label="Error" variant="filled" color="error" />
+                <Chip label="Info" variant="filled" color="info" />
+            </div>
+            </div>
+        </div>
+        </Card>
+
+        <!-- Chip Sizes -->
+        <Card title="Chip Sizes" class="space-y-4">
+        <div class="flex flex-wrap items-center gap-4">
+            <Chip label="Small Chip" size="small" />
+            <Chip label="Default Chip" size="default" />
+            <Chip label="Large Chip" size="large" />
+        </div>
+        </Card>
+
+        <!-- Interactive Chips -->
+        <Card title="Interactive Chips" class="space-y-4">
+        <div class="space-y-4">
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Clickable Chips</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Click Me" clickable @click="handleChipClick" />
+                <Chip label="Primary Click" color="primary" clickable @click="handleChipClick" />
+                <Chip label="Success Click" color="success" clickable @click="handleChipClick" />
+            </div>
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Closable Chips</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Closable" closable @close="handleChipClose" />
+                <Chip label="Primary Close" color="primary" closable @close="handleChipClose" />
+                <Chip label="Error Close" color="error" variant="filled" closable @close="handleChipClose" />
+            </div>
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Disabled Chips</h4>
+            <div class="flex flex-wrap gap-2">
+                <Chip label="Disabled" disabled />
+                <Chip label="Disabled Click" clickable disabled />
+                <Chip label="Disabled Close" closable disabled />
+            </div>
+            </div>
+        </div>
+        </Card>
+
+        <!-- Custom Styled Chips -->
+        <Card title="Custom Styled Chips" class="space-y-4">
+        <div class="flex flex-wrap gap-2">
+            <Chip 
+            label="Custom Purple" 
+            bg-color="bg-purple-100" 
+            text-color="text-purple-800" 
+            clickable 
+            @click="handleChipClick"
+            />
+            <Chip 
+            label="Custom Gradient" 
+            bg-color="bg-gradient-to-r from-pink-500 to-violet-500" 
+            text-color="text-white" 
+            rounded="lg"
+            clickable 
+            @click="handleChipClick"
+            />
+            <Chip 
+            label="Custom Border" 
+            variant="outlined"
+            border-color="border-orange-500" 
+            text-color="text-orange-600" 
+            closable 
+            @close="handleChipClose"
+            />
+        </div>
+        </Card>
+
+        <!-- Chip Groups -->
+        <Card title="Chip Groups" class="space-y-6">
+        <div class="space-y-4">
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Simple Chip Group</h4>
+            <ChipGroup 
+                :chips="simpleChips" 
+                color="primary" 
+                clickable 
+                @chip-click="handleGroupChipClick"
+            />
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Closable Chip Group</h4>
+            <ChipGroup 
+                v-model:chips="editableChips" 
+                color="success" 
+                closable 
+                @chip-close="handleGroupChipClose"
+            />
+            </div>
+            
+            <div>
+            <h4 class="text-lg font-semibold mb-2">Mixed Styled Chips</h4>
+            <ChipGroup 
+                :chips="mixedChips" 
+                gap="lg"
+                justify="center"
+                @chip-click="handleGroupChipClick"
+            />
+            </div>
+        </div>
+        </Card>
+    </div>
+</template>
+<script setup>
+    import { ref } from 'vue'
+    import Chip from '../pgo/buttons/Chip.vue'
+    import ChipGroup from '../pgo/buttons/ChipGroup.vue'
+    import Card from '../pgo/Card.vue'
+
+    // Chip Examples Data
+    const simpleChips = ref([
+      'JavaScript',
+      'Vue.js',
+      'TypeScript',
+      'Tailwind CSS',
+      'Node.js'
+    ])
+
+    const editableChips = ref([
+      { id: 1, text: 'Frontend' },
+      { id: 2, text: 'Backend' },
+      { id: 3, text: 'Database' },
+      { id: 4, text: 'DevOps' }
+    ])
+
+    const mixedChips = ref([
+      { 
+        id: 1, 
+        text: 'High Priority', 
+        color: 'error', 
+        variant: 'filled',
+        clickable: true 
+      },
+      { 
+        id: 2, 
+        text: 'Medium Priority', 
+        color: 'warning', 
+        variant: 'outlined',
+        clickable: true 
+      },
+      { 
+        id: 3, 
+        text: 'Low Priority', 
+        color: 'info', 
+        variant: 'default',
+        clickable: true 
+      },
+      { 
+        id: 4, 
+        text: 'Completed', 
+        color: 'success', 
+        variant: 'tonal',
+        closable: true 
+      }
+    ])
+
+    // Chip Event Handlers
+    const handleChipClick = () => {
+      console.log('Chip clicked!')
+    }
+
+    const handleChipClose = () => {
+      console.log('Chip closed!')
+    }
+
+    const handleGroupChipClick = (event) => {
+      console.log('Group chip clicked:', event)
+    }
+
+    const handleGroupChipClose = (event) => {
+      console.log('Group chip closed:', event)
+    }
+</script>