pgo-uiux2 1.0.0

package/src/components/examples/VueDatePickerShowcase.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="vdp-showcase space-y-8 p-6">
+    <h2 class="text-xl font-semibold text-center">
+      Vue DatePicker Showcase - based on @vuepic/vue-datepicker
+    </h2>
+
+    <DatePicker
+      v-model="date"
+      label="Birth Date"
+
+    />
+
+    <!-- Basic date -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Basic Date
+      </h3>
+      <VueDatePicker
+        v-model="date"
+        format="yyyy-MM-dd"
+        placeholder="Select date"
+        :text-input="true"
+
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ date ? date.toString() : 'None' }}
+      </p>
+    </section>
+
+    <!-- Range selection -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Range Selection
+      </h3>
+      <VueDatePicker
+        v-model="range"
+        range
+        auto-apply
+        :multi-calendars="2"
+        placeholder="Select date range"
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ range && range[0] && range[1] ? range[0]?.toDateString() + ' — ' + range[1]?.toDateString() : 'None' }}
+      </p>
+    </section>
+
+    <!-- Date & time -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Date & Time
+      </h3>
+      <VueDatePicker
+        v-model="dateTime"
+        enable-time-picker
+        format="yyyy-MM-dd HH:mm"
+        placeholder="Select date & time"
+        text-input
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ dateTime ? dateTime.toString() : 'None' }}
+      </p>
+    </section>
+
+    <!-- Inline calendar -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Inline Calendar
+      </h3>
+      <VueDatePicker
+        v-model="inlineDate"
+        inline
+        auto-apply
+        text-input
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ inlineDate ? inlineDate.toDateString() : 'None' }}
+      </p>
+    </section>
+
+    <!-- Week / Month / Year pickers -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Week / Month / Year
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+          <label class="block mb-1 text-sm">Week Picker</label>
+          <VueDatePicker
+            v-model="week"
+            week-picker
+            auto-apply
+            text-input
+          />
+        </div>
+        <div>
+          <label class="block mb-1 text-sm">Month Picker</label>
+          <VueDatePicker
+            v-model="month"
+            month-picker
+            auto-apply
+            text-input
+          />
+        </div>
+        <div>
+          <label class="block mb-1 text-sm">Year Picker</label>
+          <VueDatePicker
+            v-model="year"
+            year-picker
+            auto-apply
+            text-input
+          />
+        </div>
+      </div>
+    </section>
+
+    <!-- Min / Max and disabled dates -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Bounded + Disabled Weekends
+      </h3>
+      <VueDatePicker
+        v-model="bounded"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :disabled-dates="disabledDates"
+        format="PPPP"
+        placeholder="Pick within bounds"
+        text-input
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ bounded ? bounded.toDateString() : 'None' }}
+      </p>
+      <p class="text-xs text-gray-500">
+        Bounds: {{ minDate.toDateString() }} — {{ maxDate.toDateString() }}
+      </p>
+    </section>
+
+    <!-- Multiple dates -->
+    <section>
+      <h3 class="mb-2 font-medium">
+        Multiple Dates
+      </h3>
+      <VueDatePicker
+        v-model="multiDates"
+        multi-dates
+        :max-dates="5"
+        text-input
+      />
+      <p class="mt-2 text-sm">
+        Selected: {{ multiDates && multiDates.length ? multiDates.map(d => d.toDateString()).join(', ') : 'None' }}
+      </p>
+    </section>
+
+    <!-- Position and Teleport -->
+    <!-- <section>
+      <h3 class="mb-2 font-medium">Position & Teleport</h3>
+      <VueDatePicker v-model="date" position="right" teleport="body" placeholder="Opens to the right" />
+    </section> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import DatePicker from '../pgo/inputs/DatePicker.vue'
+
+// Basic date
+const date = ref(null)
+
+// Range selection
+const range = ref(null)
+
+// Date & time
+const dateTime = ref(null)
+
+// Inline calendar
+const inlineDate = ref(null)
+
+// Week / Month / Year pickers
+const week = ref(null)
+const month = ref(null)
+const year = ref(null)
+
+// Min / Max and disabled dates
+const bounded = ref(null)
+const minDate = ref(new Date(new Date().getFullYear(), new Date().getMonth(), 5))
+const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth(), 25))
+
+function disabledDates(d) {
+  // Example: disable weekends
+  const day = d.getDay()
+  return day === 0 || day === 6
+}
+
+// Multiple selections
+const multiDates = ref([])
+</script>
+
+<style scoped>
+.vdp-showcase {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+}
+
+/* Theme token mapping for @vuepic/vue-datepicker via CSS variables */
+  /* DatePicker variables are now set globally in global.css */
+
+/* Optional: ensure the datepicker input uses tokenized radius when library falls back */
+:deep(.dp__input_wrap) {
+  border-radius: var(--vts-radius-md);
+}
+
+
+</style>

package/src/components/examples/_DatePickerExample.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="p-6 space-y-8">
+    <h2 class="text-xl font-semibold">DatePicker Examples</h2>
+
+    <div class="space-y-4">
+      <h3 class="font-medium">Single Date</h3>
+      <DatePicker v-model="single" placeholder="Pick a date" />
+      <div class="text-sm text-[var(--vts-color-textSecondary)]">Selected: {{ single && single.toDateString() }}</div>
+    </div>
+
+    <div class="space-y-4">
+      <h3 class="font-medium">Range</h3>
+      <DatePicker v-model="range" :range="true" placeholder="Pick a date range" />
+      <div class="text-sm text-[var(--vts-color-textSecondary)]">Selected: {{ range && range[0] && range[0].toDateString() }} — {{ range && range[1] && range[1].toDateString() }}</div>
+    </div>
+
+    <div class="space-y-4">
+      <h3 class="font-medium">With Constraints</h3>
+      <DatePicker v-model="bounded" :min="min" :max="max" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DatePicker from '../pgo/inputs/DatePicker.vue'
+
+const single = ref<Date | null>(null)
+const range = ref<[Date | null, Date | null] | null>(null)
+const bounded = ref<Date | null>(null)
+const min = new Date()
+const max = new Date(new Date().getFullYear(), 11, 31)
+</script>

package/src/components/examples/__FormExample.vue

@@ -0,0 +1,77 @@
+<template>
+  <Card
+    :title="'Form Example'"
+    class="mb-4"
+  >
+    <Form
+      v-model="form"
+      :rules="rules"
+      :validate-on="'change'"
+      submit-text="Submit"
+    >
+      <template #default="{ values, errors, setField }">
+        <div class="space-y-3">
+          <InputSearch
+            v-model="values.name"
+            label="Name"
+            :error-messages="errors.name || []"
+            :placeholder="'Your name'"
+            @input="val => setField('name', val)"
+          />
+
+          <Select
+            v-model="values.category"
+            label="Category"
+            :items="categories"
+            size="md"
+            item-title="text"
+            item-value="value"
+            :error-messages="errors.category || []"
+            @change="val => setField('category', val)"
+          />
+
+          <FileUpload
+            v-model="values.files"
+            label="Attachments"
+            :error-messages="errors.files || []"
+            accept="image/*,.pdf"
+            rounded=""
+            :max-size-mb="2"
+            @change="files => setField('files', files)"
+          />
+        </div>
+      </template>
+    </Form>
+  </Card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Card from '../pgo/Card.vue'
+import Form from '../pgo/forms/Form.vue'
+import InputSearch from '../pgo/InputSearch.vue'
+import Select from '../pgo/inputs/Select.vue'
+import FileUpload from '../pgo/inputs/FileUpload.vue'
+const form = ref({ name: '', category: '', files: [] })
+
+const rules = {
+  name: [
+    (v) => (v && String(v).trim().length >= 2) || 'Name is required (min 2 chars)'
+  ],
+  category: [
+    (v) => !!v || 'Category is required'
+  ],
+  files: [
+    (arr) => (Array.isArray(arr) && arr.length > 0) || 'At least one file'
+  ]
+}
+
+const categories = [
+  { text: 'General', value: 'general' },
+  { text: 'Bug', value: 'bug' },
+  { text: 'Feature', value: 'feature' },
+]
+</script>
+
+<style scoped>
+</style>

package/src/components/index.ts

@@ -0,0 +1,25 @@
+import AppBar from "./pgo/AppBar.vue";
+import Button from "./pgo/Button.vue";
+import Card from "./pgo/Card.vue";
+import HeroIcon from "./pgo/HeroIcon.vue";
+import Select from "./pgo/inputs/Select.vue";
+import FileUpload from "./pgo/inputs/FileUpload.vue";
+import Form from "./pgo/forms/Form.vue";
+// import NavDrawer from './pgo/NavDrawer.vue'
+import NavigationDrawer from "./pgo/NavigationDrawer.vue";
+import NavDrawer from "./pgo/NavDrawer.vue";
+import NavDrawerItem from "./pgo/NavDrawerItem.vue";
+import OldAppBar from "./pgo/OldAppBar.vue";
+
+export {
+  AppBar,
+  OldAppBar,
+  Button,
+  Card,
+  HeroIcon,
+  Select,
+  NavDrawer,
+  NavDrawerItem,
+  FileUpload,
+  Form,
+};

package/src/components/pgo/AppBar.vue

@@ -0,0 +1,347 @@
+<template>
+  <header
+    ref="el"
+    data-component="appbar"
+    :dir="rtl ? 'rtl' : 'ltr'"
+    :class="[
+      'w-full flex flex-col transition-transform duration-300',
+      appBarZClass,
+      fixed ? 'fixed top-0 left-0' : floating ? 'absolute top-0 left-1/2 -translate-x-1/2 rounded-xl shadow-lg' : 'relative',
+      elevationClass,
+      hidden ? 'hidden' : '',
+      color,
+      border,
+      p,
+      m,
+      customClass,
+      densityClass,
+      collapseClass
+    ]"
+    :style="[themeStyles, customStyle, appBarZStyle]"
+  >
+    <div :class="['max-w-7xl mx-auto w-full flex items-center justify-between', innerDirectionClass, dense ? 'h-12' : 'h-16']">
+      <!-- DYNAMIC REGION ORDER -->
+      <template v-for="region in orderedRegions" :key="region">
+        <!-- PREPEND -->
+        <template v-if="region === 'prepend'">
+          <div :class="['flex items-center', prependClass]">
+            <slot name="prepend" />
+
+            <!-- drawer/menu button -->
+            <button
+              v-if="drawer || menu"
+              @click="$emit('toggle-drawer')"
+              class="md:hidden inline-flex items-center justify-center .vts-pa-2 rounded-md"
+            >
+              <slot name="drawer-icon">
+                <HeroIcon name="bars-3" size="24" color="text-gray-600" />
+              </slot>
+            </button>
+
+            <!-- TITLE -->
+            <div :class="['shrink-0 flex items-center', titleMarginClass, titleAlignClass]">
+              <slot name="title">
+                <span :class="['font-semibold', titleClass]">{{ title }}</span>
+              </slot>
+            </div>
+          </div>
+        </template>
+
+        <!-- NAV -->
+        <template v-if="region === 'nav'">
+          <nav :class="navClass">
+            <slot name="nav" />
+          </nav>
+        </template>
+
+        <!-- ACTIONS -->
+        <template v-if="region === 'actions'">
+          <div :class="['flex items-center', actionsSpaceClass]">
+            <slot name="actions" />
+
+            <!-- Overflow actions -->
+            <div v-if="overflowActions.length" class="relative">
+              <button @click="toggleOverflow" class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10">
+                <svg class="h-5 w-5" fill="none" stroke="currentColor">
+                  <circle cx="12" cy="12" r="2" />
+                  <circle cx="19" cy="12" r="2" />
+                  <circle cx="5" cy="12" r="2" />
+                </svg>
+              </button>
+
+              <div v-if="isOverflowOpen" :class="['absolute vts-mt-2 w-40 rounded shadow-lg z-50', overflowPositionClass]">
+                <ul>
+                  <li v-for="(action, i) in overflowActions" :key="i">
+                    <button @click="action.onClick" class="w-full text-left vts-px-4 vts-py-2 hover:bg-black/5 dark:hover:bg-white/10">
+                      <span v-if="action.icon" class="vts-mr-2">
+                        <component :is="action.icon" />
+                      </span>
+                      {{ action.label }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <!-- Language Selector -->
+            <div class="relative" ref="langMenuRef">
+              <button @click="toggleLangMenu" class="px-2 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10">
+                {{ currentLangCode }}
+              </button>
+              <div
+                v-if="isLangOpen"
+                :class="['absolute vts-mt-2 w-28 rounded shadow-lg z-50', overflowPositionClass]"
+                :style="{ backgroundColor: 'var(--vts-color-surfaceElevated)', borderColor: 'var(--vts-color-divider)' }"
+              >
+                <ul>
+                  <li v-for="(lang, i) in languagesList" :key="i">
+                    <button
+                      @click="selectLanguage(lang)"
+                      class="w-full text-left vts-px-3 vts-py-2 hover:bg-black/5 dark:hover:bg-white/10"
+                    >
+                      {{ getLangLabel(lang) }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <slot name="append" />
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- MOBILE NAV -->
+    <div
+      v-show="isOpen"
+      class="md:hidden vts-border-sm"
+      :style="{ backgroundColor: 'var(--vts-color-surfaceElevated)', borderColor: 'var(--vts-color-divider)' }"
+    >
+      <div class="vts-px-2 vts-pt-2 vts-pb-3 vts-space-y-1">
+        <slot name="mobile-nav" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, onBeforeUnmount, inject, watch } from 'vue'
+  import type { PropType } from 'vue'
+  import { HeroIcon } from './'
+  import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+
+  const themeStyles = computed(() => ({
+    backgroundColor: 'var(--vts-color-surfaceElevated)',
+    color: 'var(--vts-color-text)',
+    boxShadow: props.elevation ? `var(--vts-elevation-${props.elevation})` : props.shadow ? 'var(--vts-shadow-md)' : undefined,
+    borderBottom: '1px solid var(--vts-color-border)'
+  }))
+
+  /* ---------------------------------------------
+ * PROPS — merged (old props kept)
+ ----------------------------------------------*/
+  const props = defineProps({
+    id: {
+      type: String,
+      default: () => `appbar-${Math.random().toString(36).slice(2, 9)}`
+    },
+
+    title: String,
+    titleAlign: { type: String, default: 'left' },
+    titleClass: String,
+
+    fixed: Boolean,
+    floating: Boolean,
+
+    elevation: [String, Number],
+    shadow: String, // kept for compatibility
+
+    color: String,
+    border: String,
+    p: String,
+    m: String,
+    hidden: Boolean,
+    customClass: String,
+    customStyle: [String, Object],
+
+    zIndex: { type: [String, Number], default: undefined },
+
+    drawer: Boolean,
+    menu: Boolean,
+    overflowActions: { type: Array as PropType<Array<{ label: string; icon?: any; onClick?: () => void }>>, default: () => [] },
+
+    // Language selector
+    languages: { type: Array as PropType<string[]>, default: () => ['en', 'dv'] },
+
+    rtl: { type: Boolean, default: globalRtl.value },
+
+    dense: Boolean,
+    collapseOnScroll: Boolean
+  })
+
+  /* ---------------------------------------------
+ * layout integration
+ ----------------------------------------------*/
+  const layout = inject('layout', null)
+  const el = ref<HTMLElement | null>(null)
+  const height = ref(0)
+
+  function updateHeight() {
+    if (!el.value) return
+    height.value = el.value.getBoundingClientRect().height
+    if (layout)
+      layout.register('appBar', props.id, {
+        height: height.value,
+        dense: props.dense
+      })
+    // console.log('AppBar registered with height:', height.value, ' and dense:', props.dense)
+  }
+
+  onMounted(() => {
+    updateHeight()
+    const ro = new ResizeObserver(updateHeight)
+    if (el.value) ro.observe(el.value)
+
+    if (props.collapseOnScroll) window.addEventListener('scroll', onScroll, { passive: true })
+    document.addEventListener('click', onDocumentClick, { capture: true })
+
+    onBeforeUnmount(() => {
+      ro.disconnect()
+      if (props.collapseOnScroll) window.removeEventListener('scroll', onScroll)
+      document.removeEventListener('click', onDocumentClick, { capture: true })
+      if (layout) layout.unregister('appBar', props.id)
+    })
+  })
+
+  /* ---------------------------------------------
+ * collapse on scroll
+ ----------------------------------------------*/
+  let lastScroll = 0
+  const collapseClass = ref('')
+
+  function onScroll() {
+    const y = window.scrollY
+    const delta = y - lastScroll
+    lastScroll = y
+
+    if (y > 0 && delta > 0) collapseClass.value = '-translate-y-12 opacity-95'
+    else collapseClass.value = ''
+  }
+
+  /* ---------------------------------------------
+ * OLD RTL logic (preserved)
+ ----------------------------------------------*/
+  const orderedRegions = computed(() => (props.rtl ? ['actions', 'nav', 'prepend'] : ['prepend', 'nav', 'actions']))
+
+  const innerDirectionClass = computed(() => (props.rtl ? 'flex-row-reverse' : 'flex-row'))
+
+  const prependClass = computed(() => (props.rtl ? 'mr-2' : ''))
+  const titleMarginClass = computed(() => (props.rtl ? 'mr-2' : 'ml-2'))
+
+  const titleAlignClass = computed(() => {
+    const a = props.titleAlign
+    const RTL = props.rtl
+
+    if (RTL)
+      return {
+        center: 'justify-center text-center w-full',
+        left: 'justify-end text-right w-full',
+        right: ''
+      }[a]
+
+    return {
+      center: 'justify-center text-center w-full',
+      right: 'justify-end text-right w-full',
+      left: ''
+    }[a]
+  })
+
+  const navClass = computed(() =>
+    props.rtl ? 'hidden md:flex md:mr-6 md:space-x-4 items-center' : 'hidden md:flex md:ml-6 md:space-x-4 items-center'
+  )
+
+  const actionsSpaceClass = computed(() => (props.rtl ? 'space-x-2 space-x-reverse' : 'space-x-2'))
+
+  const overflowPositionClass = computed(() => (props.rtl ? 'left-0' : 'right-0'))
+
+  /* ---------------------------------------------
+ * Overflow menu
+ ----------------------------------------------*/
+  const isOverflowOpen = ref(false)
+  const toggleOverflow = () => (isOverflowOpen.value = !isOverflowOpen.value)
+
+  /* ---------------------------------------------
+ * Language selector (i18n)
+ ----------------------------------------------*/
+  const { setLanguage, language } = inject('i18n') as any
+  const isLangOpen = ref(false)
+  const toggleLangMenu = () => (isLangOpen.value = !isLangOpen.value)
+  const langMenuRef = ref<HTMLElement | null>(null)
+  const languagesList = computed<string[]>(() =>
+    Array.isArray(props.languages) && props.languages.length ? props.languages : ['en', 'dv']
+  )
+  const currentLangCode = computed(() => {
+    const val = (language && (language.value ?? language)) as string
+    const code = (val || '').slice(0, 2)
+    if (code === 'dv') return 'ދިވެހި'
+    return (code || 'en').toUpperCase()
+  })
+  function selectLanguage(lang: string) {
+    if (typeof setLanguage === 'function') setLanguage(lang)
+    window.location.reload()
+    isLangOpen.value = false
+  }
+
+  function onDocumentClick(e: MouseEvent) {
+    if (!isLangOpen.value) return
+    isLangOpen.value = false
+    // const root = langMenuRef.value
+    // const target = e.target as Node | null
+    // if (!root || !target) {
+    //   isLangOpen.value = false
+    //   return
+    // }
+    // if (!root.contains(target)) {
+    //   isLangOpen.value = false
+    // }
+  }
+
+  function getLangLabel(lang: string) {
+    const val = (language && (language.value ?? language)) as string
+    const isDv = (val || '').slice(0, 2) === 'dv'
+    if (isDv) {
+      if (lang === 'en') return 'އިނގިރޭސި'
+      if (lang === 'dv') return 'ދިވެހި'
+    }
+    return (lang || '').toUpperCase()
+  }
+
+  /* ---------------------------------------------
+ * elevation + zIndex logic (merged)
+ ----------------------------------------------*/
+  const elevationClass = computed(() => {
+    if (props.shadow) return props.shadow
+    if (props.elevation) return `shadow-${props.elevation}`
+    return ''
+  })
+
+  const appBarZClass = computed(() => {
+    if (typeof props.zIndex === 'string' && props.zIndex.startsWith('z-')) return props.zIndex
+    return 'z-30'
+  })
+  const appBarZStyle = computed(() => (typeof props.zIndex === 'number' ? { zIndex: props.zIndex } : undefined))
+
+  /* ---------------------------------------------
+ * density class
+ ----------------------------------------------*/
+  const densityClass = computed(() => (props.dense ? 'py-1' : ''))
+
+  /* ---------------------------------------------
+ * mobile nav
+ ----------------------------------------------*/
+  const isOpen = ref(false)
+
+  /* expose for template */
+</script>
+