pgo-uiux2 1.0.0

package/src/components/pgo/TipTapEditor.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="tiptap-editor">
+    <div class="tiptap-editor-toolbar sticky-top" v-if="editor && editor.isEditable">
+      <!-- Toolbar buttons (similar to your original code) -->
+      <div v-for="(button, index) in buttons" :key="index" class="tiptap-editor-btn"
+           :v-tooltip="button.tooltip"
+           @click="button.action">
+        <v-icon small>{{ button.icon }}</v-icon>
+      </div>
+
+      <!-- More buttons here... -->
+
+    </div>
+    <div id="tiptap-html" v-if="viewHtml" contenteditable="true">{{ htmlContent }}</div>
+    <editor-content v-if="!viewHtml" class="tiptap-editor-content" :editor="editor" />
+
+    <div v-if="maximumLength !== null" class="tiptap-editor-footer">
+      <span :class="{ 'red--text': isLimitReached }">{{ currentCharCount }} / {{ maximumLength }}</span>
+      <span v-if="isLimitReached" class="red--text">Limit reached — editor disabled</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import { TableRow } from '@tiptap/extension-table';
+// import TableRow from '@tiptap/extension-table-row';
+import { TableCell } from '@tiptap/extension-table';
+// import TableCell from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table';
+// import TableHeader from '@tiptap/extension-table-header';
+// import Bdi from './extensions/bdi';
+// import Indent from './extensions/indent';
+// import Table from './extensions/customTable';
+// import Toc from './extensions/toc';
+// import CharacterCount from '@tiptap/extension-character-count';
+
+export default {
+  components: { EditorContent },
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    maximumLength: {
+      type: Number,
+      default: null
+    }
+  },
+
+  setup(props, { emit }) {
+    // Reactive references
+    const editor = ref(null);
+    const viewHtml = ref(false);
+    const htmlContent = ref('');
+    const currentCharCount = ref(0);
+    const isLimitReached = computed(() => {
+      return props.maximumLength !== null && currentCharCount.value >= props.maximumLength;
+    });
+
+    // Watch value prop to update editor content
+    watch(() => props.value, (newValue) => {
+      if (editor.value && editor.value.getHTML() !== newValue) {
+        editor.value.commands.setContent(newValue, false);
+      }
+    });
+
+    // Methods
+    const setHtml = () => {
+      const tag = document.querySelector('#tiptap-html');
+      editor.value.commands.setContent(tag.innerHTML + '');
+      viewHtml.value = false;
+    };
+
+    // Initialize buttons
+    const buttons = ref([
+      { tooltip: 'Clear', icon: 'mdi-backspace-reverse-outline', action: () => editor.value.chain().focus().clearContent().run() },
+      { tooltip: 'Bold', icon: 'mdi-format-bold', action: () => editor.value.chain().focus().toggleBold().run() },
+      // More buttons here
+    ]);
+
+    // Setup editor instance on mounted
+    onMounted(() => {
+    //   const charCountExt = props.maximumLength ? CharacterCount.configure({ limit: props.maximumLength }) : CharacterCount;
+      const charCountExt = 123;
+      editor.value = new Editor({
+        injectCSS: false,
+        parseOptions: { preserveWhitespace: true },
+        content: props.value,
+        extensions: [
+          StarterKit.configure({
+            horizontalRule: false,
+            blockquote: false,
+            hardBreak: false,
+            heading: false
+          }),
+        //   Bdi,
+        //   Indent,
+        //   Table,
+          TableRow,
+          TableCell,
+          TableHeader,
+        //   Underline,
+        //   Toc,
+          charCountExt
+        ],
+        onUpdate: () => {
+          emit('input', editor.value.getHTML());
+          try {
+            const storage = editor.value.storage?.characterCount;
+            currentCharCount.value = storage?.characters || 0;
+          } catch (e) {
+            currentCharCount.value = editor.value.getText().length || 0;
+          }
+
+          if (props.maximumLength !== null) {
+            const reached = currentCharCount.value >= props.maximumLength;
+            if (reached && editor.value.isEditable) {
+              editor.value.setEditable(false);
+              emit('limitReached');
+            } else if (!reached && !editor.value.isEditable) {
+              editor.value.setEditable(true);
+              emit('limitOk');
+            }
+          }
+        }
+      });
+    });
+
+    // Cleanup on before unmount
+    onBeforeUnmount(() => {
+      if (editor.value) {
+        editor.value.destroy();
+      }
+    });
+
+    return {
+      editor,
+      viewHtml,
+      htmlContent,
+      currentCharCount,
+      isLimitReached,
+      buttons,
+      setHtml
+    };
+  }
+};
+</script>
+
+<style>
+  .tiptap-editor {
+    border: 1px solid lightgrey;
+    /* border-radius: 4px; */
+  }
+  .tiptap-editor-toolbar.sticky-top {
+    position: sticky;
+    top: 0;
+  }
+  .tiptap-editor-toolbar {
+    display: flex;
+    gap: 2px;
+    background-color: lightgrey;
+    padding: 5px;
+  }
+  .tiptap-editor-btn {
+    border: 1px solid grey;
+    width: 30px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .tiptap-editor-btn:hover {
+    background-color: #bbb;
+  }
+
+  .tiptap-editor-content {
+    padding: 5px;
+    background-color: #fafafa;
+    min-height: 40px;
+    /* text-align: justify; */
+  }
+  .ProseMirror:focus-visible {
+    outline: 0px solid transparent !important;
+  }
+  .tiptap-editor-content bdi {
+    background-color: lightgrey;
+    font-family: Roboto, sans-serif !important;
+  }
+  .flip {
+    transform: rotateY(180deg);
+  }
+  .tiptap-editor-btn.is-active {
+    border-color: rgb(0, 110, 255) !important;
+    box-shadow: inset 0 0 4px rgb(0, 110, 255);
+  }
+  .tiptap-editor-btn.is-active > * {
+    color: rgb(0, 110, 255);
+  }
+</style>
+
+<style lang="scss">
+  @for $i from 1 through 8 {
+    [data-indent='#{$i}'] {
+      $val: $i * 3rem;
+      padding-right: $val;
+    }
+
+    .ProseMirror {
+      font-family: faruma;
+      font-size: 16px;
+      background-color: white;
+
+      table {
+        border-collapse: collapse;
+        table-layout: auto;
+        width: 100%;
+        margin: 5px 0;
+        overflow: hidden;
+
+        td,
+        th {
+          min-width: 1em;
+          border: 1px dashed black;
+          padding: 3px 5px;
+          vertical-align: top;
+          box-sizing: border-box;
+          position: relative;
+        }
+
+        th {
+          font-weight: bold;
+          text-align: center;
+          background-color: #eee;
+        }
+
+        .selectedCell:after {
+          z-index: 2;
+          position: absolute;
+          content: '';
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: rgba(200, 200, 255, 0.4);
+          pointer-events: none;
+        }
+
+        .column-resize-handle {
+          position: absolute;
+          right: -2px;
+          top: 0;
+          bottom: -2px;
+          width: 4px;
+          background-color: #adf;
+          pointer-events: none;
+        }
+
+        p:last-of-type {
+          margin: 0;
+        }
+      }
+
+      table.border {
+        th,
+        td {
+          border: 1px solid #666;
+        }
+      }
+
+      ol {
+        list-style-type: none;
+        counter-reset: item;
+        margin: 0;
+        padding: 0;
+      }
+
+      ol > li {
+        display: table;
+        counter-increment: item;
+        margin-bottom: 0.6em;
+      }
+
+      ol > li:before {
+        content: counters(item, '.') '. ';
+        display: table-cell;
+        padding-right: 0.6em;
+      }
+
+      li ol > li {
+        margin: 0;
+      }
+
+      li ol > li:before {
+        content: counters(item, '.') ' ';
+      }
+    }
+
+    .resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+
+    .tableWrapper {
+      padding: 10px 0;
+      overflow-x: auto;
+    }
+    .ProseMirror * {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+</style>

package/src/components/pgo/Tooltip.NOTES.md

@@ -0,0 +1,12 @@
+Architecture Notes
+
+- Teleport: Tooltip content is rendered into `body` using Vue's `Teleport` to avoid overflow/clipping issues within parent containers.
+- Positioning: Computes position from activator `getBoundingClientRect()` and accounts for page scroll. Only inline styles applied for `top/left/position/z-index` and arrow location.
+- Triggers: Supports hover, focus, click via props `openOnHover`, `openOnFocus`, `openOnClick`. Manual control via `v-model:open` (i.e., `modelValue`).
+- Controlled vs Uncontrolled: If `modelValue` is provided, component acts in controlled mode and emits `update:modelValue`. Otherwise uses internal state.
+- RTL: Uses `globalRtl` reactive value; swaps left/right placement when RTL is enabled.
+- Accessibility: Adds `role="tooltip"`, links activator with `aria-describedby`, and manages `aria-expanded`.
+- Close Guards: Closes on `Escape` key and outside click; listeners installed on mount and removed on unmount.
+- Theming: No hardcoded colors. Uses existing workspace CSS variables: `--vts-color-surfaceElevated`, `--vts-color-text`, `--vts-color-border`, `--vts-radius-sm`, `--vts-elevation-2`, and `--vts-z-tooltip`.
+- SSR-safe: Avoids direct DOM usage during SSR; all DOM access happens in lifecycle hooks (`onMounted`) and guarded in computations.
+- Tree-shakable: Minimal dependencies, no external UI libraries; component is standalone and uses `script setup` with TypeScript.

package/src/components/pgo/Tooltip.PROPS.md

@@ -0,0 +1,21 @@
+Props
+- `modelValue: boolean | undefined` — controlled open state
+- `openOnHover: boolean` — enable hover trigger (default true)
+- `openOnFocus: boolean` — enable focus trigger (default true)
+- `openOnClick: boolean` — enable click trigger (default false)
+- `disabled: boolean` — disables tooltip
+- `placement: 'top' | 'bottom' | 'left' | 'right'` — tooltip placement (RTL-aware for left/right)
+- `offset: { x?: number; y?: number }` — pixel offsets (default { x: 0, y: 8 })
+- `arrow: boolean` — show arrow indicator (default true)
+- `showDelay: number` — delay (ms) before opening (default 80)
+- `hideDelay: number` — delay (ms) before closing (default 80)
+- `teleport: string` — Teleport target (default 'body')
+
+Emits
+- `update:modelValue` — when controlled open state changes
+- `open` — fired after tooltip opened and positioned
+- `close` — fired after tooltip closed
+
+Slots
+- `activator` — slot for trigger element, receives `{ open, close, isOpen }`
+- default — tooltip content

package/src/components/pgo/Tooltip.vue

@@ -0,0 +1,281 @@
+<template>
+  <div
+    ref="activatorRef"
+    class="vts-d-inline-block"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
+    @click="onClick"
+    :aria-describedby="tooltipId"
+    :aria-expanded="isOpen"
+    :aria-disabled="disabled ? 'true' : 'false'"
+  >
+    <slot name="activator" :props="activatorSlotProps"></slot>
+  </div>
+
+  <Teleport to="body">
+    <div
+      v-show="isOpen"
+      :id="tooltipId"
+      ref="tooltipRef"
+      class="vts-position-absolute vts-bg-surface-elevated vts-text vts-border vts-rounded-sm vts-elevation-2 vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-max-w-280"
+      role="tooltip"
+      :class="[placementClass]"
+      :style="tooltipStyles"
+      @keydown.esc.stop.prevent="close"
+    >
+      <div v-if="arrow" class="vts-position-absolute vts-bg-surface-elevated vts-border-t vts-border-s vts-border-color" :class="[placementClass]" :style="arrowStyles"></div>
+      <div class="vts-text-body-2">
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { globalRtl } from '../../pgo-components/lib/core/rtl/rtl'
+
+  // Props
+  interface Offset {
+    x?: number
+    y?: number
+  }
+
+  type Trigger = 'hover' | 'focus' | 'click' | 'manual'
+
+  type PlacementBase = 'top' | 'bottom' | 'left' | 'right'
+
+
+  const props = defineProps({
+    modelValue: { type: Boolean, default: undefined }, // controlled mode
+    openOnHover: { type: Boolean, default: true },
+    openOnFocus: { type: Boolean, default: true },
+    openOnClick: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placement: { type: String as () => PlacementBase, default: 'top' },
+    offset: { type: Object as () => Offset, default: () => ({ x: 0, y: 0 }) },
+    arrow: { type: Boolean, default: true },
+    showDelay: { type: Number, default: 80 },
+    hideDelay: { type: Number, default: 80 },
+    teleport: { type: String, default: 'body' }
+  })
+
+  const emit = defineEmits(['update:modelValue', 'open', 'close'])
+
+  // State
+  const isControlled = computed(() => props.modelValue !== undefined)
+  const internalOpen = ref(false)
+  const isOpen = computed({
+    get: () => (isControlled.value ? !!props.modelValue : internalOpen.value),
+    set: (val: boolean) => {
+      if (props.disabled) return
+      if (isControlled.value) emit('update:modelValue', val)
+      else internalOpen.value = val
+    }
+  })
+
+  // Elements
+  const activatorRef = ref<HTMLElement | null>(null)
+  const tooltipRef = ref<HTMLElement | null>(null)
+
+  // IDs
+  const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 10)}`
+
+  // RTL
+  const isRtl = computed(() => globalRtl.value)
+
+  // Placement with RTL adjustment for left/right
+  const normalizedPlacement = computed<PlacementBase>(() => {
+    if (!isRtl.value) return props.placement
+    if (props.placement === 'left') return 'right'
+    if (props.placement === 'right') return 'left'
+    return props.placement
+  })
+
+  const placementClass = computed(() => `placement-${normalizedPlacement.value}`)
+
+  // Positioning
+  const tooltipStyles = ref<Record<string, string>>({})
+  const arrowStyles = ref<Record<string, string>>({})
+  const hasPositioned = ref(false)
+
+  // Track how tooltip was opened to coordinate closing behavior
+  type TriggerSource = 'hover' | 'focus' | 'click' | 'manual' | null
+  const lastTrigger = ref<TriggerSource>(null)
+
+  function computePosition() {
+    const activator = activatorRef.value
+    const tooltip = tooltipRef.value
+    if (!activator || !tooltip) return
+    // Ensure the tooltip can be measured on first render
+    if (!hasPositioned.value) {
+      tooltipStyles.value = {
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+        visibility: 'hidden',
+        zIndex: 'var(--vts-z-tooltip, 1000)'
+      }
+      // Force a reflow so getBoundingClientRect has correct size
+      void tooltip.offsetHeight
+    }
+
+    const rect = activator.getBoundingClientRect()
+    const tooltipRect = tooltip.getBoundingClientRect()
+
+    const scrollX = window.scrollX || window.pageXOffset
+    const scrollY = window.scrollY || window.pageYOffset
+
+    let top = 0
+    let left = 0
+
+    const offsetX = props.offset?.x ?? 0
+    const offsetY = props.offset?.y ?? 0
+    const gap = props.arrow ? 8 : 0
+
+    switch (normalizedPlacement.value) {
+      case 'top':
+        top = rect.top + scrollY - tooltipRect.height - gap - offsetY
+        left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+        break
+      case 'bottom':
+        top = rect.bottom + scrollY + gap + offsetY
+        left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+        break
+      case 'left':
+        top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
+        left = rect.left + scrollX - tooltipRect.width - gap - offsetX
+        break
+      case 'right':
+        top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
+        left = rect.right + scrollX + gap + offsetX
+        break
+    }
+
+    tooltipStyles.value = {
+      position: 'absolute',
+      top: `${top}px`,
+      left: `${left}px`,
+      zIndex: 'var(--vts-z-tooltip, 1000)',
+      visibility: ''
+    }
+
+    // Arrow positioning
+    if (props.arrow) {
+      const size = 8
+      const common = { width: `${size}px`, height: `${size}px` }
+      switch (normalizedPlacement.value) {
+        case 'top':
+          arrowStyles.value = { ...common, bottom: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+          break
+        case 'bottom':
+          arrowStyles.value = { ...common, top: `-4px`, left: '50%', transform: 'translateX(-50%) rotate(45deg)' }
+          break
+        case 'left':
+          arrowStyles.value = { ...common, right: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+          break
+        case 'right':
+          arrowStyles.value = { ...common, left: `-4px`, top: '50%', transform: 'translateY(-50%) rotate(45deg)' }
+          break
+      }
+    }
+
+    hasPositioned.value = true
+  }
+
+  // Open/close with delays
+  let showTimer: number | null = null
+  let hideTimer: number | null = null
+
+  function clearTimers() {
+    if (showTimer) {
+      window.clearTimeout(showTimer)
+      showTimer = null
+    }
+    if (hideTimer) {
+      window.clearTimeout(hideTimer)
+      hideTimer = null
+    }
+  }
+
+  function open(source: TriggerSource = null) {
+    if (props.disabled) return
+    clearTimers()
+    showTimer = window.setTimeout(async () => {
+      lastTrigger.value = source
+      isOpen.value = true
+      await nextTick()
+      computePosition()
+      emit('open')
+    }, props.showDelay)
+  }
+
+  function close() {
+    clearTimers()
+    hideTimer = window.setTimeout(() => {
+      isOpen.value = false
+      lastTrigger.value = null
+      hasPositioned.value = false
+      emit('close')
+    }, props.hideDelay)
+  }
+
+  // Triggers
+  const activatorSlotProps = computed(() => ({
+    open: (src?: TriggerSource) => open(src ?? 'manual'),
+    close,
+    isOpen: isOpen.value
+  }))
+
+  function onMouseEnter() {
+    if (props.openOnHover) open('hover')
+  }
+  function onMouseLeave() {
+    if (props.openOnHover) close()
+  }
+  function onFocusIn() {
+    if (props.openOnFocus) open('focus')
+  }
+  function onFocusOut() {
+    // Avoid immediate close on click-first interaction when openOnClick is enabled
+    if (props.openOnFocus && lastTrigger.value === 'focus') close()
+  }
+  function onClick() {
+    if (!props.openOnClick) return
+    if (isOpen.value) close()
+    else open('click')
+  }
+
+  // Outside click & escape
+  function onDocumentClick(e: MouseEvent) {
+    if (!isOpen.value) return
+    const target = e.target as Node
+    if (tooltipRef.value && tooltipRef.value.contains(target)) return
+    if (activatorRef.value && activatorRef.value.contains(target)) return
+    close()
+  }
+
+  function onDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') close()
+  }
+
+  onMounted(() => {
+    computePosition()
+    document.addEventListener('click', onDocumentClick, { passive: true })
+    document.addEventListener('keydown', onDocumentKeydown)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('click', onDocumentClick)
+    document.removeEventListener('keydown', onDocumentKeydown)
+  })
+
+  watch(isOpen, val => {
+    if (val) nextTick(computePosition)
+  })
+</script>
+
+<style scoped>
+</style>