pgo-uiux2 1.0.0

package/src/components/pgo/OldAppBar.vue

@@ -0,0 +1,223 @@
+<template>
+  <header
+    :class="[
+      'w-full flex flex-col',
+      appBarZClass,
+      appBarZClass,
+      fixed
+        ? 'fixed top-0 left-0'
+        : floating
+        ? 'absolute top-0 left-1/2 -translate-x-1/2 rounded-xl shadow-lg'
+        : '',
+      elevation ? `shadow-${elevation}` : shadow ? shadow : '',
+      hidden ? 'hidden' : '',
+      color,
+      border,
+      p,
+      m,
+      customClass,
+    ]"
+    :dir="rtl ? 'rtl' : 'ltr'"
+    :style="[customStyle, appBarZStyle]"
+    data-component="appbar"
+  >
+    <div
+      :class="[
+        'max-w-7xl mx-auto w-full flex items-center h-16 justify-between',
+        innerDirectionClass,
+      ]"
+    >
+      <!-- ORDERED REGIONS -->
+      <template v-for="region in orderedRegions" :key="region">
+        <!-- PREPEND REGION -->
+        <template v-if="region === 'prepend'">
+          <div :class="['flex items-center', prependClass]">
+            <slot name="prepend" />
+
+            <button
+              v-if="drawer || menu"
+              @click="$emit('toggle-drawer')"
+              class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:bg-gray-100"
+            >
+              <slot name="drawer-icon">
+                <HeroIcon name="bars-3" size="24" color="text-gray-600" />
+              </slot>
+            </button>
+
+            <div
+              :class="[
+                'flex-shrink-0 flex items-center',
+                titleMarginClass,
+                titleAlignClass,
+              ]"
+            >
+              <slot name="title">
+                <span :class="['font-semibold', titleClass]">{{ title }}</span>
+              </slot>
+            </div>
+          </div>
+        </template>
+
+        <!-- NAV REGION -->
+        <template v-if="region === 'nav'">
+          <nav :class="navClass">
+            <slot name="nav" />
+          </nav>
+        </template>
+
+        <!-- ACTIONS REGION -->
+        <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-full hover:bg-gray-100 focus:outline-none"
+              >
+                <svg
+                  class="h-5 w-5"
+                  viewBox="0 0 24 24"
+                  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 mt-2 w-40 bg-white 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 px-4 py-2 hover:bg-gray-100"
+                    >
+                      <span v-if="action.icon" class="mr-2">
+                        <component :is="action.icon" />
+                      </span>
+                      {{ action.label }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <slot name="append" />
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- MOBILE NAV -->
+    <div v-show="isOpen" class="md:hidden bg-white border-t">
+      <div class="px-2 pt-2 pb-3 space-y-1">
+        <slot name="mobile-nav" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { HeroIcon } from "../pgo/";
+
+const props = defineProps({
+  title: String,
+  titleAlign: { type: String, default: "left" },
+  titleClass: String,
+  fixed: Boolean,
+  floating: Boolean,
+  elevation: [String, Number],
+  shadow: String,
+  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, default: () => [] },
+  rtl: Boolean,
+});
+
+const emit = defineEmits(["toggle-drawer"]);
+
+const isOpen = ref(false);
+const isOverflowOpen = ref(false);
+
+const toggleOverflow = () => (isOverflowOpen.value = !isOverflowOpen.value);
+
+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 align = props.titleAlign;
+  if (props.rtl) {
+    return {
+      center: "justify-center text-center w-full",
+      left: "justify-end text-right w-full",
+      right: "",
+    }[align];
+  }
+  return {
+    center: "justify-center text-center w-full",
+    right: "justify-end text-right w-full",
+    left: "",
+  }[align];
+});
+
+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"
+);
+
+// z-index support for appbar
+const appBarZClass = computed(() => {
+  if (props.zIndex !== undefined && typeof props.zIndex === "string") {
+    if (String(props.zIndex).startsWith("z-")) return String(props.zIndex);
+  }
+  return "z-30";
+});
+const appBarZStyle = computed(() => {
+  if (props.zIndex !== undefined && typeof props.zIndex === "number") {
+    return { zIndex: props.zIndex };
+  }
+  return undefined;
+});
+
+onMounted(() => {
+  const savedRtl = localStorage.getItem("rtlSetting");
+
+  
+});
+</script>

package/src/components/pgo/PApp.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="['min-h-screen flex flex-col w-full', rtlClass]" ref="root">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  provide,
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  toRaw,
+} from "vue";
+import { globalRtl } from "../../pgo-components/lib/core/rtl/rtl";
+
+// Layout registry (v-app coordinator)
+const app = reactive({
+  appBars: new Map(),
+  footers: new Map(),
+  drawers: new Map(),
+});
+
+function register(type: "appBar" | "footer" | "drawer", id: string, meta: any) {
+  if (type === "appBar") app.appBars.set(id, meta);
+  if (type === "footer") app.footers.set(id, meta);
+  if (type === "drawer") app.drawers.set(id, meta);
+}
+function unregister(type: "appBar" | "footer" | "drawer", id: string) {
+  if (type === "appBar") app.appBars.delete(id);
+  if (type === "footer") app.footers.delete(id);
+  if (type === "drawer") app.drawers.delete(id);
+}
+
+const root = ref<HTMLElement | null>(null);
+
+// Derived metrics
+const topOffset = computed(() => {
+  let h = 0;
+  for (const [, meta] of app.appBars) {
+    if (meta.dense) h += meta.height || 0;
+    else h += meta.height || 0;
+  }
+  return h;
+});
+
+const bottomOffset = computed(() => {
+  let h = 0;
+  for (const [, meta] of app.footers) h += meta.height || 0;
+  return h;
+});
+
+// For left/right drawer offset use only permanent drawers
+const horizontalOffset = computed(() => {
+  let left = 0,
+    right = 0;
+
+    // console.log("App drawers:", toRaw(app.drawers));
+  for (const [, meta] of app.drawers) {
+
+    if (meta.mode === "permanent") {
+        // console.log("Drawer meta:", toRaw(meta));
+      if (meta.right) right += meta.width || 0;
+      else left += meta.width || 0;
+    }
+    // rail with expanded state contributes width when expanded
+    if (meta.mode === "rail" && meta.expanded) {
+      if (meta.right) right += meta.width || 0;
+      else left += meta.width || 0;
+    }
+  }
+// console.log("Raw app contents:", toRaw(app));
+//   console.log("horizontalOffset", toRaw(app.drawers), left, right);
+  return { left, right };
+});
+
+provide("layout", {
+  register,
+  unregister,
+  topOffset,
+  bottomOffset,
+  horizontalOffset,
+  app,
+});
+
+const rtlClass = computed(() =>
+  globalRtl.value ? "direction-rtl" : "direction-ltr"
+);
+</script>
+
+<style>
+/* small helpers in case Tailwind is insufficient */
+.direction-rtl {
+  direction: rtl;
+}
+.direction-ltr {
+  direction: ltr;
+}
+</style>

package/src/components/pgo/Pagination.vue

@@ -0,0 +1,242 @@
+<template>
+  <div :class="[bg, 'flex items-center justify-between px-2']">
+    <!-- Items per page and info -->
+    <bdi class="flex items-center">
+      <div class="flex items-center gap-2">
+        <p :class="['text-sm font-medium', textColor]">{{ t('pagination.itemsPerPage') }}</p>
+        <select
+          :value="itemsPerPage"
+          :class="[
+            'h-8 w-[70px] border bg-transparent px-2 py-1 text-sm',
+            'focus:outline-none focus:ring-2 focus:ring-offset-2',
+            inputBorder,
+            rounded
+          ]"
+          @change="handleItemsPerPageChange"
+        >
+          <option v-for="option in itemsPerPageOptions" :key="option" :value="option">
+            {{ option }}
+          </option>
+        </select>
+      </div>
+    </bdi>
+
+    <div :class="['flex items-center gap-2 text-base font-medium', textColor]">
+      <bdi :class="language == 'dv' ? 'text-right faruma' : 'text-left'">{{ startItem }}-{{ endItem }} {{ t('pagination.of') }} {{ itemsLength }}</bdi>
+    </div>
+
+    <!-- Pagination controls -->
+    <bdi class="flex items-center gap-1">
+      <!-- First Page -->
+      <button
+        :disabled="page <= 1"
+        :class="[
+          'inline-flex items-center justify-center h-8 w-8 text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          buttonSecondary,
+          rounded
+        ]"
+        @click="handlePageChange(1)"
+        :title="t('pagination.page') + ' 1'"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+        </svg>
+      </button>
+
+      <!-- Previous Page -->
+      <button
+        :disabled="page <= 1"
+        :class="[
+          'inline-flex items-center justify-center h-8 w-8 text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          buttonSecondary,
+          rounded
+        ]"
+        @click="handlePageChange(page - 1)"
+        :title="t('pagination.previous')"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+
+      <!-- Page Numbers -->
+      <div class="flex items-center gap-1">
+        <button
+          v-for="pageNum in visiblePages"
+          :key="pageNum"
+          :disabled="pageNum === '...'"
+          :class="[
+            'inline-flex items-center justify-center text-[#fff] h-8 min-w-8 px-3 text-sm font-medium transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+            pageNum === '...' ? 'cursor-default pointer-events-none' : '',
+            pageNum === page ? buttonPrimary : buttonSecondary,
+            rounded
+          ]"
+          @click="pageNum !== '...' && handlePageChange(pageNum)"
+          :title="pageNum !== '...' ? t('pagination.page') + ' ' + pageNum : ''"
+        >
+          {{ pageNum }}
+        </button>
+      </div>
+
+      <!-- Next Page -->
+      <button
+        :disabled="page >= totalPages"
+        :class="[
+          'inline-flex items-center justify-center h-8 w-8 text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          buttonSecondary,
+          rounded
+        ]"
+        @click="handlePageChange(page + 1)"
+        :title="t('pagination.next')"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+
+      <!-- Last Page -->
+      <button
+        :disabled="page >= totalPages"
+        :class="[
+          'inline-flex items-center justify-center h-8 w-8  text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          buttonSecondary,
+          rounded
+        ]"
+        @click="handlePageChange(totalPages)"
+        :title="t('pagination.page') + ' ' + totalPages"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+        </svg>
+      </button>
+    </bdi>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+
+const { t, language } = inject('i18n')
+
+const props = defineProps({
+  // Pagination data
+  page: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: true
+  },
+  itemsLength: {
+    type: Number,
+    required: true
+  },
+  itemsPerPageOptions: {
+    type: Array,
+    default: () => [10, 20, 30, 40, 50]
+  },
+
+  // Styling
+  bg: {
+    type: String,
+    default: 'bg-background'
+  },
+  border: {
+    type: String,
+    default: 'border-t border-input-border'
+  },
+  textColor: {
+    type: String,
+    default: 'text-textcolor'
+  },
+  inputBorder: {
+    type: String,
+    default: 'border-input-border focus:none'
+  },
+  buttonPrimary: {
+    type: String,
+    default: 'bg-primary hover:bg-primary/90'
+  },
+  buttonSecondary: {
+    type: String,
+    default: 'border border-input-border bg-background hover:bg-accent hover:text-accent-foreground'
+  },
+  rounded: {
+    type: String,
+    default: 'rounded-none'
+  }
+})
+
+const emit = defineEmits(['update:page', 'update:itemsPerPage', 'change'])
+
+// Computed properties
+const totalPages = computed(() => {
+  return Math.ceil(props.itemsLength / props.itemsPerPage) || 1
+})
+
+const startItem = computed(() => {
+  if (props.itemsLength === 0) return 0
+  return (props.page - 1) * props.itemsPerPage + 1
+})
+
+const endItem = computed(() => {
+  const end = props.page * props.itemsPerPage
+  return Math.min(end, props.itemsLength)
+})
+
+const visiblePages = computed(() => {
+  const current = props.page
+  const total = totalPages.value
+  const delta = 1 // Show 1 page on each side
+  const range = []
+  
+  for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
+    range.push(i)
+  }
+  
+  if (current - delta > 2) {
+    range.unshift('...')
+  }
+  if (current + delta < total - 1) {
+    range.push('...')
+  }
+  
+  range.unshift(1)
+  if (total > 1) {
+    range.push(total)
+  }
+  
+  return range.filter((item, index, arr) => arr.indexOf(item) === index)
+})
+
+// Methods
+const handlePageChange = (newPage) => {
+  if (newPage >= 1 && newPage <= totalPages.value && newPage !== props.page) {
+    emit('update:page', newPage)
+    emit('change', {
+      page: newPage,
+      itemsPerPage: props.itemsPerPage
+    })
+  }
+}
+
+const handleItemsPerPageChange = (event) => {
+  const newItemsPerPage = parseInt(event.target.value)
+  emit('update:itemsPerPage', newItemsPerPage)
+  emit('update:page', 1) // Reset to first page
+  emit('change', {
+    page: 1,
+    itemsPerPage: newItemsPerPage
+  })
+}
+</script>