pgo-ui 1.0.0

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>