pgo-uiux2 1.0.0

package/src/components/pgo/Modal.vue

@@ -0,0 +1,273 @@
+<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" @click="attemptClose" />
+
+        <!-- Modal -->
+        <Transition :name="transitionName">
+          <div
+            v-if="show"
+            class="relative w-full max-h-[100vh] flex flex-col"
+            :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"
+
+            >
+              <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> 
+            <!-- Header (optional, sticky) -->
+            <!-- <div v-if="$slots.header" class="sticky top-0 z-10 vts-pa-4 border-b " :style="headerThemeStyles">
+              <slot name="header" />
+            </div> -->
+
+            <!-- Content (scrolls) -->
+            <!-- <div class="overflow-y-auto p-4 flex-1">
+              <slot />
+            </div> -->
+
+            <!-- Footer (optional, sticky) -->
+            <!-- <div v-if="$slots.footer" class="sticky bottom-0 z-10 vts-pa-4 border-t" :style="footerThemeStyles">
+              <slot name="footer" />
+            </div> -->
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import Card from './Card.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: '' },
+    title: { type: [String, Object], default: '' },
+    cardClass: { type: String, default: '' },
+    overflow: { type: String, default: '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>

package/src/components/pgo/NavDrawerItem.vue

@@ -0,0 +1,161 @@
+<template>
+  <li
+    :class="['nav-drawer-item', itemClass, { 'is-dragging': dragging, 'is-drag-over': isDragOver, 'drag-pos-before': isDragOver && dragPos === 'before', 'drag-pos-after': isDragOver && dragPos === 'after' }]"
+    :data-drawer-item-id="props.id"
+    :draggable="draggable"
+    @dragstart="onDragStart"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop"
+  >
+      <component
+        :is="tag"
+        v-bind="mergedAttrs"
+        :class="['flex items-center vts-ga-3 vts-px-12 vts-py-2 hover:brightness-110', { 'opacity-50 cursor-not-allowed': disabled } ]"
+      role="menuitem"
+      :tabindex="disabled ? -1 : 0"
+      @click="onClick"
+    >
+      <slot />
+    </component>
+  </li>
+</template>
+
+<script setup lang="ts">
+/*
+  NavDrawerItem
+  Usage:
+  <NavDrawerItem href="#/path"><HeroIcon name="home" /> Dashboard</NavDrawerItem>
+  The first child (e.g., an icon) will be detected by DOM normalization and receive .rail-icon; labels will be wrapped in .rail-label.
+*/
+import { computed, useSlots, useAttrs } from 'vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  href: { type: String, default: undefined },
+  to: { type: [String, Object] as PropType<string | Record<string, any> | undefined>, default: undefined },
+  tag: { type: String as PropType<string>, default: undefined },
+  disabled: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+  icon: { type: [String, Object] as PropType<string | object | undefined>, default: undefined },
+  extraClass: { type: [String], default: '' }
+  ,
+  id: { type: [String, Number], default: undefined },
+  draggable: { type: Boolean, default: false },
+  dragging: { type: Boolean, default: false }
+  ,isDragOver: { type: Boolean, default: false },
+  dragPos: { type: String as PropType<'before' | 'after' | null>, default: null }
+})
+
+const emit = defineEmits(['click', 'dragstart', 'dragover', 'drop', 'dragleave'])
+const attrs = useAttrs()
+const slot = useSlots()
+
+// Determine the tag to render (a or router-link or div)
+const tag = computed(() => {
+  if (props.tag) return props.tag
+  if (props.to) return 'a'
+  if (props.href) return 'a'
+  return 'div'
+})
+
+const linkAttrs = computed(() => {
+  const a: Record<string, any> = {}
+  if (props.href) a.href = props.href
+  if (props.to) a['data-router-link'] = props.to
+  return a
+})
+
+const mergedAttrs = computed(() => ({ ...linkAttrs.value, ...attrs }))
+
+// optional access to children via slot for hooks (normalization handled in NavDrawer)
+const children = slot.default ? slot.default() : []
+
+function onDragStart(e: DragEvent) {
+  if (!props.draggable) return
+  // set the id in dataTransfer for retrieval
+  if (e.dataTransfer && props.id !== undefined) {
+    e.dataTransfer.setData('text/plain', String(props.id))
+    e.dataTransfer.effectAllowed = 'move'
+  }
+  emit('dragstart', { id: props.id, event: e })
+}
+
+function onDragOver(e: DragEvent) {
+  if (!props.draggable) return
+  emit('dragover', { id: props.id, event: e })
+}
+
+function onDragLeave(e: DragEvent) {
+  if (!props.draggable) return
+  emit('dragleave', { id: props.id, event: e })
+}
+
+function onDrop(e: DragEvent) {
+  if (!props.draggable) return
+  const data = e.dataTransfer?.getData('text/plain')
+  emit('drop', { id: props.id, sourceId: data, event: e })
+}
+
+function onClick(e: Event) {
+  if (props.disabled) {
+    e.preventDefault();
+    return
+  }
+  emit('click', e)
+}
+
+const itemClass = computed(() => {
+  return [props.active ? 'bg-blue-50 dark:bg-blue-900/20' : '', props.extraClass || ''].join(' ')
+})
+</script>
+
+<style scoped>
+.nav-drawer-item {
+  display: block;
+}
+.nav-drawer-item .rail-icon {
+  display: inline-flex;
+  width: 1.25rem;
+  justify-content: center;
+  align-items: center;
+}
+.nav-drawer-item .rail-label {
+  display: inline-block;
+  flex: 1 1 auto;
+}
+.nav-drawer-item.is-dragging {
+  opacity: 0.6;
+  background: rgba(99, 102, 241, 0.06);
+}
+.nav-drawer-item.is-drag-over.drag-pos-before::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 0;
+  height: 3px;
+  background: rgba(99, 102, 241, 0.9);
+  border-radius: 2px;
+}
+.nav-drawer-item.is-drag-over.drag-pos-after::after {
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 0;
+  height: 3px;
+  background: rgba(99, 102, 241, 0.9);
+  border-radius: 2px;
+}
+
+.nav-drawer-item {
+  position: relative;
+  transition: background 150ms, transform 150ms;
+}
+.nav-drawer-item .rail-label {
+  transition: opacity 150ms ease, max-width 170ms ease;
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>