pgo-uiux2 1.0.0

package/src/components/examples/ModalExample.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex gap-2">
+    <Button color="primary" @click="basic = true">Open Basic Modal</Button>
+    <Button color="primary" @click="persistent = true">Open Persistent Modal</Button>
+    <Button color="primary" @click="bottom = true">Open Bottom Sheet</Button>
+    <Button color="primary" @click="fullscreen = true">Open Fullscreen Modal</Button>
+
+    <!-- Basic -->
+    <Modal v-model="basic">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold" :style="headingStyles">Basic Modal</h2>
+          <Button color="primary" @click="basic = false">Close</Button>
+        </div>
+      </template>
+      <p :style="textStyles">Click outside or press ESC to close.</p>
+    </Modal>
+
+    <!-- Persistent -->
+    <Modal v-model="persistent" persistent>
+      <template #header>
+        <h2 class="text-lg font-semibold faruma" :style="headingStyles">ތަޅުވާ މޮޑެލް</h2>
+      </template>
+      <p class="faruma" :style="textStyles">ތެޅެންޔާ ތަޅުވާނެ</p>
+      <template #footer>
+        <Button class="faruma" color="primary" @click="persistent = false">ފަހިމްތި</Button>
+      </template>
+    </Modal>
+
+    <!-- Bottom sheet -->
+    <Modal v-model="bottom" transition="bottom" modal-class="rounded">
+      <template #header>
+        <h2 class="text-lg font-semibold" :style="headingStyles">Header</h2>
+      </template>
+      <p class="mb-4 faruma" :style="textStyles">ސްކްރޯލް</p>
+      <div class="space-y-2">
+        <p v-for="i in 60" :key="i" class="faruma" :style="textStyles">ވަރަށް ގިނަ ބައިވަރު އެކި އެކި ލިޔުންލިޔަން ހިތާ ހިތާ {{ i }}</p>
+      </div>
+
+      <template #footer>
+        <h2 class="text-lg font-semibold" :style="headingStyles">Footer</h2>
+      </template>
+    </Modal>
+
+    <!-- Fullscreen -->
+    <Modal v-model="fullscreen" fullscreen transition="right">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold" :style="headingStyles">Fullscreen Modal</h2>
+          <Button color="primary" @click="fullscreen = false">Close</Button>
+        </div>
+      </template>
+      <p :style="textStyles">Slides in from the right and occupies full viewport.</p>
+      <template #footer>
+        <Button color="primary" @click="fullscreen = false">Close</Button>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import Modal from '../pgo/Modal.vue'
+  import Button from '../pgo/Button.vue'
+
+  const basic = ref(false)
+  const persistent = ref(false)
+  const bottom = ref(false)
+  const fullscreen = ref(false)
+
+  const headingStyles = computed(() => ({
+    color: 'var(--vts-color-text)'
+  }))
+
+  const textStyles = computed(() => ({
+    color: 'var(--vts-color-text)'
+  }))
+</script>
+
+<style scoped>
+  /* Styles are now applied via theme tokens in template */
+</style>

package/src/components/examples/NavDrawerExample.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="flex">
+    <NavDrawer
+      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'"
+      :draggable="true"
+      searchPlaceholder="ހޯދާ"
+      :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="#/users">
+            <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>
+        <NavDrawerItem class="px-4" href="#/">
+          <HeroIcon name="arrow-uturn-left" size="20" /> Logout
+        </NavDrawerItem>
+      </template> -->
+    </NavDrawer>
+
+    <div class="ml-72 mr-72 mt-32 p-4">
+      <label class="block">
+        <input type="checkbox" v-model="drawerOpen" /> Open drawer
+      </label>
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="temporary" /> Temporary</label
+      >
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="rail" /> Rail</label
+      >
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="hoverExpand" /> Expand on hover</label
+      >
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="persistent" /> Persistent
+        (open/close)</label
+      >
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="permanent" /> Permanent (always
+        open)</label
+      >
+      <label class="block mt-2"
+        >Location:
+        <select v-model="location" class="ml-2">
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </label>
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="isStuck" /> Stuck (top)</label
+      >
+      <label class="block mt-2"
+        ><input type="checkbox" v-model="overlayAppBar" /> Overlay AppBar</label
+      >
+      <label class="block mt-2"
+        >Custom Z Index:
+        <input
+          type="number"
+          v-model.number="zIndex"
+          class="ml-2 w-20 border p-1 rounded"
+        />
+      </label>
+      <label class="block mt-2"
+        >AppBar Offset:
+        <input type="checkbox" v-model="appBarOffset" class="ml-2" />
+      </label>
+    </div>
+
+    <!-- second example: data-driven drawer -->
+    <!-- <div class="ml-72 p-4 mt-6">
+      <h3 class="text-lg font-semibold mb-2">Data-driven NavDrawer</h3>
+      <NavDrawer
+        v-model="drawerOpen"
+        v-model:items="sampleItems"
+        :filterable="true"
+        :group-by="'group'"
+        :group-icons="{ 'އާންމު': 'home', 'ތަފާސް ހިސާބު': 'document', 'އެޑްމިން': 'cog' }"
+        :render-group-parent="true"
+        :group-parents="{ 'އާންމު': { label: 'އާންމު', href: '#/main', icon: 'home' }, 'ތަފާސް ހިސާބު': { label: 'ތަފާސް', href: '#/reports', icon: 'document' }, 'އެޑްމިން': { label: 'އެޑްމިން', href: '#/admin', icon: 'cog' } }"
+        :draggable="true"
+        :overlay-app-bar="overlayAppBar"
+        color="bg-white"
+        width="w-64"
+      />
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { HeroIcon, NavDrawer, NavDrawerItem } from "../"
+import { ref, watch, computed, onMounted } from "vue";
+import { drawerOpen } from "../../pgo-components/lib/drawerState";
+import { globalRtl } from "../../pgo-components/lib/core/rtl/rtl";
+
+const temporary = ref(false);
+const rail = ref(false);
+const hoverExpand = ref(false);
+const persistent = ref(false);
+const permanent = ref(false);
+const isStuck = ref(false);
+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: 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";
+  } else {
+    location.value = "left";
+  }
+});
+</script>

package/src/components/examples/NumberFieldExample.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="space-y-6 p-6">
+    <h2 class="text-lg font-semibold">NumberField Examples</h2>
+
+    <!-- Basic -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Basic</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField v-model="basic" placeholder="Enter number" />
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ basic }}</div>
+    </section>
+
+    <!-- Min / Max / Step -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Min / Max / Step</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField label="numbers" v-model="minmax" :min="0" :max="10" :step="0.5" placeholder="0 - 10 step 0.5" />
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ minmax }}</div>
+    </section>
+
+    <!-- Allow decimals toggle -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Disable decimals</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField v-model="noDecimal" :allow-decimal="false" placeholder="Integers only" />
+        <button @click="noDecimal = 5" class="px-2 py-1 border rounded">Set 5</button>
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ noDecimal }}</div>
+    </section>
+
+    <!-- Clearable / Loading -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Clearable & Loading</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField v-model="loadingValue" :loading="loading" clearable />
+        <button @click="toggleLoading" class="px-2 py-1 rounded border">
+          {{ loading ? 'Stop' : 'Start' }} Loading
+        </button>
+        <button @click="clearLoadingValue" class="px-2 py-1 rounded border">Clear</button>
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ loadingValue }}</div>
+    </section>
+
+    <!-- Sizes -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Sizes</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField v-model="sizeVal" size="sm" :placeholder="'small'"/>
+        <NumberField v-model="sizeVal" size="md" :placeholder="'medium'"/>
+        <NumberField v-model="sizeVal" size="lg" :placeholder="'large'"/>
+      </div>
+      <div class="text-sm text-gray-600">Shared value: {{ sizeVal }}</div>
+    </section>
+
+    <!-- Disabled -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Disabled</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField v-model="disabledVal" disabled />
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ disabledVal }}</div>
+    </section>
+
+    <!-- Programmatic focus / clear -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Programmatic focus & clear</h3>
+      <div class="flex items-center space-x-4">
+        <NumberField ref="progRef" v-model="progValue" placeholder="Focus me" />
+        <button @click="focusField" class="px-2 py-1 rounded border">Focus</button>
+        <button @click="clearField" class="px-2 py-1 rounded border">Clear</button>
+      </div>
+      <div class="text-sm text-gray-600">Value: {{ progValue }}</div>
+    </section>
+
+    <!-- Form example -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Form submit</h3>
+      <form @submit.prevent="submitForm" class="space-y-3">
+        <div class="flex items-center space-x-4">
+          <NumberField v-model="formValue" :min="1" :max="100" placeholder="1 - 100" />
+        </div>
+        <div class="flex items-center space-x-2">
+          <button type="submit" class="px-3 py-1 rounded bg-primary text-white">Submit</button>
+          <button type="button" @click="formValue = 50" class="px-3 py-1 rounded border">Set 50</button>
+        </div>
+        <div class="text-sm text-gray-600">Form value: {{ formValue }}</div>
+      </form>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import NumberField from '../pgo/inputs/NumberField.vue'
+
+const basic = ref('')
+const minmax = ref('')
+const noDecimal = ref('')
+const loadingValue = ref('')
+const loading = ref(false)
+const sizeVal = ref('')
+const disabledVal = ref(7)
+const progValue = ref('')
+const progRef = ref(null)
+const formValue = ref('')
+
+// Programmatic actions
+const toggleLoading = () => {
+  loading.value = !loading.value
+  if (!loading.value) return
+  // demo auto-fill while loading
+  setTimeout(() => {
+    loadingValue.value = 123.45
+    loading.value = false
+  }, 1200)
+}
+
+const clearLoadingValue = () => {
+  loadingValue.value = ''
+}
+
+const focusField = () => {
+  // NumberField exposes focus() method
+  progRef.value?.focus?.()
+}
+
+const clearField = () => {
+  progRef.value?.clear?.()
+}
+
+// Form submit
+const submitForm = () => {
+  // eslint-disable-next-line no-alert
+  alert('Submitted: ' + String(formValue.value))
+}
+</script>
+
+<style scoped>
+/* Demo only: make .bg-primary available if your tokens don't provide it */
+.bg-primary {
+  background-color: theme('colors.primary', '#2563eb');
+}
+</style>

package/src/components/examples/RadioButtonExample.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="space-y-6 p-6">
+    <h2 class="text-lg font-semibold">Radio Examples</h2>
+
+    <!-- Basic single radios -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Basic</h3>
+      <div class="flex items-center space-x-4">
+        <Radio v-model="gender" value="M">Male</Radio>
+        <Radio v-model="gender" value="F">Female</Radio>
+      </div>
+      <div class="text-sm text-gray-600">Selected: {{ gender }}</div>
+    </section>
+
+    <!-- Named group -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Named group (keyboard navigation)</h3>
+      <div class="flex items-center space-x-4">
+        <Radio v-model="choice" name="group1" value="a">Option A</Radio>
+        <Radio v-model="choice" name="group1" value="b">Option B</Radio>
+        <Radio v-model="choice" name="group1" value="c">Option C</Radio>
+      </div>
+      <div class="text-sm text-gray-600">Choice: {{ choice }}</div>
+    </section>
+
+    <!-- RadioGroup: options array -->
+    <section class="space-y-2">
+      <h3 class="font-medium">RadioGroup (options array)</h3>
+      <RadioGroup v-model="rgVal" :options="rgOptions" />
+      <div class="text-sm text-gray-600">RadioGroup value: {{ rgVal }}</div>
+    </section>
+
+    <!-- RadioGroup: descriptions & disabled options -->
+    <section class="space-y-2">
+      <h3 class="font-medium">RadioGroup (descriptions & disabled)</h3>
+      <RadioGroup v-model="rgVal2" :options="rgOptions2" direction="vertical" />
+      <div class="text-sm text-gray-600">RadioGroup value: {{ rgVal2 }}</div>
+    </section>
+
+    <!-- RadioGroup slot fallback -->
+    <section class="space-y-2">
+      <h3 class="font-medium">RadioGroup (slot fallback)</h3>
+      <RadioGroup v-model="rgSlotVal">
+        <div class="flex items-center space-x-4">
+          <Radio v-model="rgSlotVal" name="fallback" value="one">One</Radio>
+          <Radio v-model="rgSlotVal" name="fallback" value="two">Two</Radio>
+          <Radio v-model="rgSlotVal" name="fallback" value="three">Three</Radio>
+        </div>
+      </RadioGroup>
+      <div class="text-sm text-gray-600">Slot group value: {{ rgSlotVal }}</div>
+    </section>
+
+    <!-- Numeric values -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Numeric values</h3>
+      <div class="flex items-center space-x-4">
+        <Radio v-model="selectedId" :value="1">Item 1</Radio>
+        <Radio v-model="selectedId" :value="2">Item 2</Radio>
+        <Radio v-model="selectedId" :value="3">Item 3</Radio>
+      </div>
+      <div class="text-sm text-gray-600">Selected id: {{ selectedId }}</div>
+    </section>
+
+    <!-- Sizes and custom color -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Sizes & colors</h3>
+      <div class="flex items-center space-x-4">
+        <Radio v-model="sizeChoice" value="x" size="sm" color="success">Small / green</Radio>
+        <Radio v-model="sizeChoice" value="y" size="md" color="warning">Default / amber</Radio>
+        <Radio v-model="sizeChoice" value="z" size="lg" color="bg-red-500">Large / custom Tailwind</Radio>
+      </div>
+      <div class="text-sm text-gray-600">Size choice: {{ sizeChoice }}</div>
+    </section>
+
+    <!-- Disabled example -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Disabled</h3>
+      <div class="flex items-center space-x-4">
+        <Radio v-model="val" value="a">Enabled</Radio>
+        <Radio v-model="val" value="b" disabled>Disabled</Radio>
+      </div>
+      <div class="text-sm text-gray-600">Val: {{ val }}</div>
+    </section>
+
+    <!-- Slot label example -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Rich label (slot)</h3>
+      <div>
+        <Radio v-model="opt" :value="1">
+          <div class="flex flex-col">
+            <span class="font-semibold">Option 1</span>
+            <small class="text-gray-500">Extra description</small>
+          </div>
+        </Radio>
+      </div>
+      <div class="text-sm text-gray-600">Opt: {{ opt }}</div>
+    </section>
+
+    <!-- Form submit example -->
+    <section class="space-y-2">
+      <h3 class="font-medium">Form submit</h3>
+      <form @submit.prevent="handleSubmit" class="space-y-3">
+        <div class="flex items-center space-x-4">
+          <Radio v-model="formModel" value="yes">Yes</Radio>
+          <Radio v-model="formModel" value="no">No</Radio>
+        </div>
+        <div class="flex items-center space-x-2">
+          <button type="submit" class="px-3 py-1 rounded bg-primary text-white">Submit</button>
+          <button type="button" @click="formModel = 'yes'" class="px-3 py-1 rounded border">Set Yes</button>
+        </div>
+        <div class="text-sm text-gray-600">Form value: {{ formModel }}</div>
+      </form>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Radio from '../pgo/inputs/Radio.vue'
+import RadioGroup from '../pgo/inputs/RadioGroup.vue'
+
+const gender = ref(null)
+const choice = ref('a')
+const selectedId = ref(2)
+const sizeChoice = ref('y')
+const val = ref('a')
+const opt = ref(null)
+const formModel = ref('yes')
+
+// RadioGroup examples state
+const rgVal = ref('M')
+const rgOptions = [
+  { label: 'Male', value: 'M' },
+  { label: 'Female', value: 'F' },
+  { label: 'Other', value: 'O' }
+]
+
+const rgVal2 = ref(2)
+const rgOptions2 = [
+  { label: 'One', value: 1, description: 'First option' },
+  { label: 'Two (disabled)', value: 2, disabled: true, description: 'Temporarily unavailable' },
+  { label: 'Three', value: 3, description: 'Third option' }
+]
+
+// Slot fallback example value
+const rgSlotVal = ref('two')
+
+const handleSubmit = () => {
+  // Replace with your submit logic
+  // For demo we just alert the value
+  // eslint-disable-next-line no-alert
+  alert('Submitted: ' + String(formModel.value))
+}
+</script>
+
+<style scoped>
+/* Small adjustments for demonstration layout */
+.bg-primary {
+  background-color: theme('colors.primary', '#2563eb');
+}
+</style>