pgo-ui 1.0.0

package/src/components/pgo/Footer.vue

@@ -0,0 +1,39 @@
+<template>
+  <footer ref="el" :class="['w-full', densityClass]" :style="style">
+    <slot />
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, inject } from "vue";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: () => `footer-${Math.random().toString(36).slice(2, 9)}`,
+  },
+  dense: { type: Boolean, default: false },
+});
+const layout = inject<any>("layout", null);
+const el = ref<HTMLElement | null>(null);
+const height = ref(0);
+
+function update() {
+  if (!el.value) return;
+  height.value = el.value.getBoundingClientRect().height;
+  if (layout) layout.register("footer", props.id, { height: height.value });
+}
+
+onMounted(() => {
+  update();
+  const ro = new ResizeObserver(update);
+  if (el.value) ro.observe(el.value);
+  onBeforeUnmount(() => {
+    ro.disconnect();
+    if (layout) layout.unregister("footer", props.id);
+  });
+});
+
+const densityClass = computed(() => (props.dense ? "h-10" : "h-14"));
+const style = computed(() => ({}));
+</script>

package/src/components/pgo/HeroIcon.vue

@@ -0,0 +1,124 @@
+<template>
+  <component
+    :is="IconAsyncComponent"
+    v-bind="attrs"
+    :class="computedClass"
+    :style="computedStyle"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import { computed, useAttrs } from "vue";
+import { defineAsyncComponent } from "vue";
+
+// Props
+interface Props {
+  name: string;
+  type?: "solid" | "outline" | "mini" | "micro";
+  size?: number | string;
+  color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "outline",
+  size: 24,
+  color: "currentColor",
+});
+
+const attrs = useAttrs();
+
+// Convert icon names like "academic-cap" to "AcademicCapIcon"
+const normalizeName = (str: string) => {
+  return (
+    str
+      .replace(/-([a-z])/g, (_, c) => c.toUpperCase()) // kebab → camel
+      .replace(/(?:^|_|\s|-)(\w)/g, (_, c) => c.toUpperCase()) // capitalize
+      .replace(/Icon$/, "") + "Icon"
+  );
+};
+
+const iconName = computed(() => normalizeName(props.name));
+
+// Async loader
+const IconAsyncComponent = computed(() =>
+  defineAsyncComponent({
+    loader: async () => {
+      let pack;
+      
+      if (props.type === "solid") {
+        pack = await import("@heroicons/vue/24/solid");
+      } else if (props.type === "outline") {
+        pack = await import("@heroicons/vue/24/outline");
+      } else if (props.type === "mini") {
+        pack = await import("@heroicons/vue/20/solid");
+      } else if (props.type === "micro") {
+        pack = await import("@heroicons/vue/16/solid");
+      } else {
+        pack = await import("@heroicons/vue/24/outline");
+      }
+      
+      const icon = (pack as any)[iconName.value];
+
+      if (!icon) {
+        throw new Error(
+          `Icon "${iconName.value}" not found in ${props.type} icons`
+        );
+      }
+
+      return icon as Component;
+    },
+
+    // Loading icon
+    loadingComponent: defineAsyncComponent(
+      async () => (await import("@heroicons/vue/24/outline")).ArrowPathIcon
+    ),
+
+    // Error fallback icon
+    errorComponent: defineAsyncComponent(
+      async () =>
+        (await import("@heroicons/vue/24/outline")).ExclamationTriangleIcon
+    ),
+
+    delay: 200,
+    timeout: 5000,
+  })
+);
+
+// Tailwind color detection
+const isTailwindColorClass = (value?: string) =>
+  value
+    ? /(?:^|\s)(?:text-|fill-|stroke-|bg-|ring-|border-)/.test(value)
+    : false;
+
+const tailwindColorClass = computed(() =>
+  isTailwindColorClass(props.color) ? String(props.color) : ""
+);
+
+const computedClass = computed(() => {
+  const classes = ["hero-icon"];
+
+  if (attrs.class) classes.push(String(attrs.class));
+  if (tailwindColorClass.value) classes.push(tailwindColorClass.value);
+
+  return classes.filter(Boolean).join(" ");
+});
+
+const computedStyle = computed(() => {
+  const styleObj: Record<string, any> =
+    typeof attrs.style === "object" ? { ...attrs.style } : {};
+
+  const sizeCss =
+    typeof props.size === "number" ? `${props.size}px` : props.size;
+
+  styleObj.width = sizeCss;
+  styleObj.height = sizeCss;
+
+  // Inline CSS color if not a Tailwind class
+  if (!isTailwindColorClass(props.color)) {
+    styleObj.color = props.color;
+  }
+
+  return styleObj;
+});
+</script>

package/src/components/pgo/LayoutContainer.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="flex h-screen overflow-hidden">
+    <!-- Drawer -->
+    <NavDrawer
+
+      :collapsed="collapsed"
+      :class="[
+        'flex-shrink-0 bg-white shadow-lg z-30',
+        isMobile ? 'fixed inset-y-0 left-0 transform transition-transform duration-300 ease-in-out' : '',
+        drawerWidthClass,
+        drawerOpenClass
+      ]"
+      @close="closeDrawer"
+      @toggleCollapse="toggleCollapse"
+    />
+
+    <!-- Backdrop for mobile drawer -->
+
+    <div
+      v-if="isMobile && showDrawer"
+      class="fixed inset-0 bg-black bg-opacity-40 z-20"
+      @click="closeDrawer"
+    ></div>
+
+    <!-- Main content area -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <!-- AppBar -->
+      <AppBar
+        title="This is APP"
+        :class="['flex-shrink-0']"
+        @toggleDrawer="toggleDrawer"
+      />
+
+      <!-- Content -->
+      <main class="flex-1 overflow-auto bg-gray-50 vts-p-4">
+        <slot>
+          sadf
+        </slot>
+      </main>
+
+      <!-- Optional Footer -->
+      <footer v-if="$slots.footer" class="flex-shrink-0 vts-p-4 bg-white shadow-inner">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import AppBar from '../pgo/AppBar.vue';
+import NavDrawer from '../pgo/NavDrawer.vue';
+
+const collapsed = ref(false);
+const showDrawer = ref(false);
+const windowWidth = ref(window.innerWidth);
+
+const MOBILE_BREAKPOINT = 768; // Tailwind md
+
+// Detect mobile screen
+const isMobile = computed(() => windowWidth.value < MOBILE_BREAKPOINT);
+
+// Drawer width
+const drawerWidthClass = computed(() => (collapsed.value ? 'w-16' : 'w-64'));
+
+// Mobile drawer open/close transform
+const drawerOpenClass = computed(() => {
+  if (!isMobile.value) return '';
+  return showDrawer.value ? 'translate-x-0' : '-translate-x-full';
+});
+
+// Toggle collapse
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+}
+
+// Toggle drawer visibility (for mobile)
+function toggleDrawer() {
+  showDrawer.value = !showDrawer.value;
+}
+
+function closeDrawer() {
+  showDrawer.value = false;
+}
+
+// Update window width
+function updateWidth() {
+  windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateWidth);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth);
+});
+</script>
+
+<style scoped>
+/* Optional: smooth transition for main content margin on desktop when collapsing drawer */
+.flex-1 {
+  transition: margin-left 0.3s ease-in-out;
+}
+</style>

package/src/components/pgo/Main.vue

@@ -0,0 +1,37 @@
+<template>
+  <main
+    :class="['flex-1 w-full transition-padding duration-200', contentClass]"
+    ref="el"
+    :style="style"
+  >
+    <slot />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, watch, onMounted } from "vue";
+
+const layout = inject<any>("layout", null);
+const el = ref<HTMLElement | null>(null);
+
+const contentClass = computed(() => "");
+
+const style = computed(() => {
+//   console.log("Layout in Main.vue horizontal:", layout?.horizontalOffset?.value);
+  const top = layout?.topOffset?.value || 0;
+  const bottom = layout?.bottomOffset?.value || 0;
+  const { left, right } = layout?.horizontalOffset?.value || {
+    left: 0,
+    right: 0,
+  };
+  return {
+    paddingTop: `${top}px`,
+    paddingBottom: `${bottom}px`,
+    paddingLeft: left ? `${left}px` : undefined,
+    paddingRight: right ? `${right}px` : undefined,
+    minHeight: `calc(100vh - ${bottom}px)`,
+  };
+});
+
+onMounted(() => {});
+</script>

package/src/components/pgo/Modal.vue

@@ -0,0 +1,261 @@
+<template>
+  <Teleport to="body">
+    <Transition :name="transitionName">
+      <div 
+        v-if="show" 
+        :class="[
+          'fixed inset-0 z-50 flex items-center justify-center overflow-hidden',
+ 
+          ]">
+        <!-- Overlay -->
+        <div class="absolute inset-0 overflow-hidden" :style="overlayThemeStyles" :class="[overlayClass, 'vts-bg-overlay']" @click="attemptClose" />
+
+        <!-- Modal -->
+        <Transition :name="transitionName">
+          <div
+            v-if="show"
+            class="relative max-h-fit flex flex-col overflow-y-auto"
+            :class="[fullscreen ? 'h-screen w-full rounded-none' : 'mx-4 sm:max-w-lg', modalClass, shake && 'animate-shake']"
+            @click.stop
+          >
+            <Card 
+              :lang="lang"
+              :labels="labels"
+              :width="width"
+              :title="title"
+              :cardClass="cardClass"
+              :overflow="overflow"
+              :bg="bg"
+              :border="border"
+              :rounded="rounded"
+              :shadow="shadow"
+              :dir="dir"
+              :height="fullscreen ? 'h-screen' : height"
+              :margin="fullscreen ? 'm-0' : margin"
+
+            >
+              <template #header>
+                    <slot name="header" />
+              </template>
+              <slot />
+              <template #footer>
+                    <slot name="footer" >
+                        <!-- <Button
+                          label="Cancel"
+                          color="secondary"
+                          variant="outlined"
+                          @click="cancelUpdate"
+                        />
+                        <Button
+                          label="Confirm"
+                          color="primary"
+                          :loading="updateLoading"
+                          @click="confirmUpdate"
+                        /> -->
+                    </slot>
+              </template>
+
+            </Card> 
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+
+  const props = defineProps({
+    modelValue: { type: Boolean, required: true },
+    persistent: { type: Boolean, default: false },
+    fullscreen: { type: Boolean, default: false },
+    transition: { type: String, default: 'center' },
+    overlayClass: { type: String, default: '' },
+    modalClass: { type: String, default: '' },
+
+    //card
+    lang: { type: String, default: '' },
+    labels: { type: [String, Object], default: () => ({
+        en: {
+            title: '',
+            body: '',
+            footer: ''
+        },
+        dv: {
+            title: '',
+            body: '',
+            footer: ''
+        }
+    }) },
+    width: { type: String, default: '' },
+    height: { type: String, default: '' },
+    title: { type: [String, Object], default: '' },
+    cardClass: { type: String, default: '' },
+    overflow: { type: String, default: 'max-h-[calc(100vh-150px)] overflow-auto' },
+    bg: { type: String, default: 'bg-background-color' },
+    border: { type: String, default: 'border border-input-border' },
+    rounded: { type: String, default: '' },
+    shadow: { type: String, default: '' },
+    dir: { type: String, default: '' },
+
+    //body props
+        bodyClass: { type: String, default: '' },
+        margin: { type: String, default: 'mx-0 my-6' },
+        padding: { type: String, default: 'px-6 py-4' },
+        textColor: { type: String, default: 'text-input-text' },
+        textSize: { type: String, default: 'text-base' },
+
+        // header props
+        headerClass: { type: String, default: '' },
+        titleClass: { type: String, default: '' },
+        headerBg: { type: String, default: '' },
+        headerText: { type: String, default: 'text-input-text' },
+        headerTextSize: { type: String, default: 'text-lg font-semibold' },
+        headerBd: { type: String, default: '' },
+        headerMargin: { type: String, default: '' },
+        headerPadding: { type: String, default: 'px-6 pt-4' },
+
+        //footer props
+        footerClass: { type: String, default: '' },
+        footerBg: { type: String, default: '' },
+        footerText: { type: String, default: 'text-input-text' },
+        footerTextSize: { type: String, default: '' },
+        footerBd: { type: String, default: '' },
+        footerMargin: { type: String, default: '' },
+        footerPadding: { type: String, default: 'px-6 py-4' },
+
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const modalThemeStyles = computed(() => ({
+    backgroundColor: 'var(--vts-color-surfaceElevated)',
+    color: 'var(--vts-color-text)',
+    borderRadius: 'var(--vts-radius-lg)',
+    boxShadow: 'var(--vts-elevation-4)'
+  }))
+
+  const overlayThemeStyles = computed(() => ({
+    // backgroundColor: 'var(--vts-color-overlay)'
+  }))
+
+  const footerThemeStyles = computed(() => ({
+    backgroundColor: 'var(--vts-color-surfaceElevated)',
+    borderTopColor: 'var(--vts-color-border)'
+  }))
+
+  const headerThemeStyles = computed(() => ({
+    backgroundColor: 'var(--vts-color-surfaceElevated)',
+    borderBottomColor: 'var(--vts-color-border)'
+  }))
+
+  const show = computed({
+    get: () => props.modelValue,
+    set: v => emit('update:modelValue', v)
+  })
+
+  const shake = ref(false)
+
+  function attemptClose() {
+    if (props.persistent) {
+      shake.value = true
+      setTimeout(() => (shake.value = false), 400)
+      return
+    }
+    show.value = false
+  }
+
+  function onEsc(e) {
+    if (e.key === 'Escape' && show.value) {
+      attemptClose()
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('keydown', onEsc)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', onEsc)
+  })
+
+  const transitionName = computed(() => {
+    // console.log(props.transition)
+    return `${props.transition ?? 'center'}`
+  })
+</script>
+
+<style scoped>
+  /* Fade */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.9s ease;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /* Center */
+  .center-enter-active,
+  .center-leave-active {
+    transition: transform 0.35s ease, opacity 0.25s ease;
+  }
+  .center-enter-from,
+  .center-leave-to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  /* Bottom */
+  .bottom-enter-active,
+  .bottom-leave-active {
+    transition: transform 0.4s ease;
+  }
+  .bottom-enter-from,
+  .bottom-leave-to {
+    transform: translateY(100%);
+  }
+
+  /* Top */
+  .top-enter-from,
+  .top-leave-to {
+    transform: translateY(-100%);
+  }
+
+  /* Left */
+  .left-enter-from,
+  .left-leave-to {
+    transform: translateX(-100%);
+  }
+
+  /* Right */
+  .right-enter-from,
+  .right-leave-to {
+    transform: translateX(100%);
+  }
+
+  /* Shake */
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-10px);
+    }
+    50% {
+      transform: translateX(10px);
+    }
+    75% {
+      transform: translateX(-10px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .animate-shake {
+    animation: shake 0.3s ease forwards;
+  }
+</style>

package/src/components/pgo/NavDrawer.vue

@@ -0,0 +1,127 @@
+<template>
+  <aside
+    ref="el"
+    :class="[
+      'fixed top-0 h-full z-30 transition-transform duration-300 bg-white dark:bg-slate-800',
+      positionClass,
+      modeClass,
+      permanentTransformClass,
+      railClass,
+    ]"
+    :style="computedStyle"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div class="h-full flex flex-col overflow-hidden">
+      <slot />
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from "vue";
+import { globalRtl } from "../../pgo-components/lib/core/rtl/rtl";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: () => `drawer-${Math.random().toString(36).slice(2, 9)}`,
+  },
+  mode: { type: String, default: "permanent" }, // 'permanent' | 'temporary' | 'rail'
+  width: { type: Number, default: 256 },
+  railWidth: { type: Number, default: 72 },
+  modelValue: { type: Boolean, default: true }, // open state for temporary
+  expandOnHover: { type: Boolean, default: false },
+  right: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const layout = inject<any>("layout", null);
+const el = ref<HTMLElement | null>(null);
+const expanded = ref(false);
+
+function update() {
+  if (!el.value) return;
+  const w = props.mode === "rail" ? props.railWidth : props.width;
+  if (layout)
+    layout.register("drawer", props.id, {
+      width: w,
+      mode: props.mode,
+      expanded: expanded.value,
+      right: props.right,
+    });
+}
+
+onMounted(() => {
+  update();
+  const ro = new ResizeObserver(update);
+  if (el.value) ro.observe(el.value);
+  onBeforeUnmount(() => {
+    ro.disconnect();
+    if (layout) layout.unregister("drawer", props.id);
+  });
+});
+
+watch([() => props.mode, expanded], update);
+
+const isOpen = computed(() => {
+  if (props.mode === "temporary") return props.modelValue;
+  if (props.mode === "permanent") return true;
+  if (props.mode === "rail") return true;
+  return true;
+});
+
+function onMouseEnter() {
+  if (props.mode === "rail" && props.expandOnHover) {
+    expanded.value = true;
+    update();
+  }
+}
+function onMouseLeave() {
+  if (props.mode === "rail" && props.expandOnHover) {
+    expanded.value = false;
+    update();
+  }
+}
+
+const positionClass = computed(() =>
+  props.right
+    ? globalRtl.value
+      ? "left-0"
+      : "right-0"
+    : globalRtl.value
+    ? "right-0"
+    : "left-0"
+);
+const modeClass = computed(() => {
+  if (props.mode === "temporary")
+    return isOpen.value
+      ? "translate-x-0"
+      : props.right
+      ? "translate-x-full"
+      : "-translate-x-full";
+  if (props.mode === "permanent") return "translate-x-0";
+  if (props.mode === "rail") return "translate-x-0";
+  return "";
+});
+const permanentTransformClass = computed(() =>
+  props.mode === "temporary" ? "pointer-events-auto" : "pointer-events-auto"
+);
+const railClass = computed(() => {
+  if (props.mode === "rail") {
+    const w = expanded.value ? `${props.width}px` : `${props.railWidth}px`;
+    return "";
+  }
+  return "";
+});
+
+const computedStyle = computed(() => {
+  if (props.mode === "rail") {
+    const w = expanded.value ? props.width : props.railWidth;
+    return { width: `${w}px` };
+  }
+  if (props.mode === "permanent") return { width: `${props.width}px` };
+  if (props.mode === "temporary") return { width: `${props.width}px` };
+  return {};
+});
+</script>