pgo-uiux2 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 { defineProps, withDefaults, 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/InputSearch.vue

@@ -0,0 +1,194 @@
+<template>
+  <div 
+    ref="containerRef"
+    :class="['relative', containerClass, width]"
+  >
+    <Base
+        :model-value="modelValue"
+        :label="label"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :error="!!error || errorMessages.length > 0"
+        :error-messages="errorMessages"
+        :clearable="clearable && !loading"
+        :size="size"
+        :id="inputId"
+        :prepend="prepend"
+        :append="append"
+        :is-open="isFocused"
+        @click:clear="clear"
+        :bg="bg"
+        :border="border"
+        :text-color="textColor"
+        :rounded="rounded"
+        :dir="computedDir" 
+        :lang="computedLang"
+        :width="width"
+        :rules="rules"
+    >
+      <template #control="{ attrs, events }">
+        <input
+          ref="inputRef"
+          v-bind="attrs"
+          v-on="events"
+          type="search"
+          :value="modelValue"
+          :placeholder="(isFocused && !modelValue) || (!label && !modelValue) ? placeholder : ''"
+          :class="inputClasses"
+          @input="handleInput"
+          @keydown.enter="handleEnter"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+      </template>
+
+      <!-- Loading spinner in append slot -->
+      <template v-if="loading" #append>
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </template>
+    </Base>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import Base from '../pgo/base/Base.vue'
+import { roundedMap, sizes, iconSizes } from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+    modelValue: { type: [String, Number], default: '' },
+    label: { type: [String, Object], default: '' },
+    placeholder: { type: String, default: 'Search...' },
+    hint: { type: String, default: '' },
+    error: { type: String, default: '' },
+    errorMessages: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    prepend: { type: String, default: '' },
+    append: { type: String, default: '' },
+    rules: { type: Array, default: () => [] },  // ADD THIS
+    
+    // Search behavior
+    debounce: { type: Number, default: 300 },
+    
+    // Appearance
+    size: { type: String },
+    rounded: { type: String },
+    border: { type: String},
+    textColor: { type: String },
+    bg: { type: String },
+    containerClass: { type: String, default: '' },
+    id: { type: String, default: '' },
+    width: { type: String, default: 'w-full' },
+    
+    // RTL/Lang support
+    dir: { type: String, default: '' },
+    lang: { type: String, default: '' },
+
+    // Props that might be passed but not used (to avoid warnings)
+    items: { type: Array, default: () => [] },
+    itemText: { type: String, default: 'text' },
+    itemValue: { type: String, default: 'value' },
+})
+
+// Inject dir from parent Card (if exists)
+const cardDir = inject('parentDir', '')
+const cardLang = inject('parentLang', '')
+
+// Use component's dir if provided, otherwise use card's dir
+const computedDir = computed(() => props.dir || cardDir)
+const computedLang = computed(() => props.lang || cardLang)
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'input', 
+  'change', 
+  'focus', 
+  'blur',
+  'clear',
+  'search',
+  'enter'
+])
+
+const inputRef = ref(null)
+const containerRef = ref(null)
+const isFocused = ref(false)
+let debounceTimeout = null
+
+// Generate unique ID
+const inputId = computed(() => props.id || `search-${Math.random().toString(36).substr(2, 9)}`)
+
+// Input classes
+const inputClasses = computed(() => [
+  'w-full bg-transparent outline-none border-none',
+  'placeholder:text-gray-400',
+  'focus:outline-none'
+])
+
+// Handlers
+const handleInput = (e) => {
+  const value = e.target.value
+  
+  // Update immediately for label animation
+  emit('update:modelValue', value)
+  
+  clearTimeout(debounceTimeout)
+  debounceTimeout = setTimeout(() => {
+    emit('input', value)
+    emit('search', value)
+  }, props.debounce)
+}
+
+const handleFocus = (event) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleEnter = (event) => {
+  emit('enter', props.modelValue)
+  emit('search', props.modelValue)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// Focus method
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// Lifecycle
+onBeforeUnmount(() => {
+  clearTimeout(debounceTimeout)
+})
+
+// Expose methods
+defineExpose({ focus, clear })
+</script>
+
+<style scoped>
+/* Remove default search input styling */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+</style>

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>