pgo-uiux2 1.0.0

package/src/components/pgo/Editor.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="rte-root border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900" data-component="rich-text-editor">
+    <!-- Toolbar -->
+    <div
+      v-if="editor"
+      class="rte-toolbar flex flex-wrap gap-1 p-2 border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800"
+      :class="{ 'sticky top-0 z-10': stickyToolbar }"
+    >
+      <!-- Core formatting -->
+      <ToolbarButton
+        icon="x-mark"
+        title="Clear content"
+        @click="clearContent"
+      />
+
+      <ToolbarButton
+        icon="bold"
+        title="Bold"
+        :active="editor.isActive('bold')"
+        @click="cmd(() => editor.chain().toggleBold().run())"
+      />
+
+      <ToolbarButton
+        icon="underline"
+        title="Underline"
+        :active="editor.isActive('underline')"
+        @click="cmd(() => editor.chain().toggleUnderline().run())"
+      />
+
+      <div class="w-px bg-gray-300 dark:bg-gray-600 mx-1" />
+
+      <ToolbarButton
+        title="LTR"
+        :active="isLTR"
+        @click="setTextDirection('ltr')"
+      >
+        LTR
+      </ToolbarButton>
+
+      <ToolbarButton
+        title="RTL"
+        :active="isRTL"
+        @click="setTextDirection('rtl')"
+      >
+        RTL
+      </ToolbarButton>
+
+      <div class="w-px bg-gray-300 dark:bg-gray-600 mx-1" />
+
+      <!-- Text alignment -->
+      <ToolbarButton
+        icon="align-left"
+        title="Align Left"
+        @click="cmd(() => editor.chain().setTextAlign('left').run())"
+      />
+      <ToolbarButton
+        icon="align-center"
+        title="Align Center"
+        @click="cmd(() => editor.chain().setTextAlign('center').run())"
+      />
+      <ToolbarButton
+        icon="align-right"
+        title="Align Right"
+        @click="cmd(() => editor.chain().setTextAlign('right').run())"
+      />
+
+      <ToolbarButton
+        icon="list-bullet"
+        title="Bullet list"
+        :active="editor.isActive('bulletList')"
+        @click="cmd(() => editor.chain().toggleBulletList().run())"
+      />
+
+      <ToolbarButton
+        icon="numbered-list"
+        title="Ordered list"
+        :active="editor.isActive('orderedList')"
+        @click="cmd(() => editor.chain().toggleOrderedList().run())"
+      />
+
+      <ToolbarButton
+        icon="arrow-right"
+        title="Indent"
+        @click="cmd(() => handleIndent())"
+      />
+
+      <ToolbarButton
+        icon="arrow-left"
+        title="Outdent"
+        @click="cmd(() => handleOutdent())"
+      />
+
+      <div class="w-px bg-gray-300 dark:bg-gray-600 mx-1" />
+
+      <ToolbarButton
+        icon="table-cells"
+        title="Insert table"
+        @click="cmd(insertTable)"
+      />
+
+      <!-- Table width controls -->
+      <ToolbarButton
+        v-if="editor.isActive('table')"
+        title="Table 100%"
+        @click="setTableWidth('100%')"
+      >
+        100%
+      </ToolbarButton>
+      <ToolbarButton
+        v-if="editor.isActive('table')"
+        title="Table 600px"
+        @click="setTableWidth('600px')"
+      >
+        600px
+      </ToolbarButton>
+
+      <ToolbarButton
+        v-if="editor.isActive('table')"
+        icon="trash"
+        title="Delete table"
+        @click="cmd(() => editor.chain().deleteTable().run())"
+      />
+
+      <!-- Table manipulation buttons -->
+      <template v-if="editor.isActive('table')">
+        <div class="w-px bg-gray-300 dark:bg-gray-600 mx-1" />
+        <ToolbarButton
+          icon="arrow-up"
+          title="Add row above"
+          @click="cmd(() => editor.chain().addRowBefore().run())"
+        />
+        <ToolbarButton
+          icon="arrow-down"
+          title="Add row below"
+          @click="cmd(() => editor.chain().addRowAfter().run())"
+        />
+        <ToolbarButton
+          icon="trash"
+          title="Delete row"
+          @click="cmd(() => editor.chain().deleteRow().run())"
+        />
+        <ToolbarButton
+          icon="arrow-left"
+          title="Add column left"
+          @click="cmd(() => editor.chain().addColumnBefore().run())"
+        />
+        <ToolbarButton
+          icon="arrow-right"
+          title="Add column right"
+          @click="cmd(() => editor.chain().addColumnAfter().run())"
+        />
+        <ToolbarButton
+          icon="trash"
+          title="Delete column"
+          @click="cmd(() => editor.chain().deleteColumn().run())"
+        />
+      </template>
+
+      <ToolbarButton
+        v-if="canEditHtml"
+        icon="code-bracket"
+        title="Toggle HTML"
+        :active="isHtmlMode"
+        @click="toggleHtmlMode"
+      />
+    </div>
+
+    <!-- Editor Content -->
+    <div v-if="!isHtmlMode" class="rte-editor p-4 min-h-64 max-w-none">
+      <EditorContent :editor="editor" />
+    </div>
+
+    <!-- HTML mode -->
+    <div v-else class="rte-html p-4">
+      <textarea
+        v-model="rawHtml"
+        rows="10"
+        class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded font-mono text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+      />
+      <button
+        type="button"
+        @click="applyHtml"
+        class="mt-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition"
+      >
+        Apply HTML
+      </button>
+    </div>
+
+    <!-- Footer -->
+    <div class="rte-footer flex items-center justify-between p-2 border-t border-gray-300 dark:border-gray-600 text-sm text-gray-600 dark:text-gray-400">
+      <span>{{ charCount }} characters</span>
+      <span v-if="isOverLimit" class="text-red-600 dark:text-red-400 font-medium">⚠ Limit reached</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /* Editor content styling */
+  .rte-editor :deep(ul),
+  .rte-editor :deep(ol) {
+    margin: 1rem 0;
+    padding-left: 2rem;
+  }
+
+  .rte-editor :deep(li) {
+    margin: 0.5rem 0;
+  }
+
+  .rte-editor :deep(ul li) {
+    list-style-type: disc;
+  }
+
+  .rte-editor :deep(ol li) {
+    list-style-type: decimal;
+  }
+
+  .rte-editor :deep(p) {
+    margin: 0.5rem 0;
+    line-height: 1.6;
+  }
+
+  /* Table styling */
+  .rte-editor :deep(table) {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1rem 0;
+    border: 2px solid #e5e7eb;
+  }
+
+  .rte-editor :deep(td),
+  .rte-editor :deep(th) {
+    border: 1px solid #d1d5db;
+    padding: 0.75rem;
+    min-width: 50px;
+    word-break: break-word;
+  }
+
+  .rte-editor :deep(th) {
+    background-color: #f3f4f6;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  .rte-editor :deep(tr:hover td) {
+    background-color: #f9fafb;
+  }
+
+  /* Dark mode table styling */
+  .dark .rte-editor :deep(table) {
+    border-color: #4b5563;
+  }
+
+  .dark .rte-editor :deep(td),
+  .dark .rte-editor :deep(th) {
+    border-color: #374151;
+  }
+
+  .dark .rte-editor :deep(th) {
+    background-color: #374151;
+  }
+
+  .dark .rte-editor :deep(tr:hover td) {
+    background-color: #ebebeb;
+  }
+
+  /* Text direction */
+  .rte-editor :deep([dir="rtl"]) {
+    direction: rtl;
+    text-align: right;
+  }
+
+  .rte-editor :deep([dir="ltr"]) {
+    direction: ltr;
+    text-align: left;
+  }
+
+  /* Focus style for table cells */
+  .rte-editor :deep(.selectedCell) {
+    background-color: #dbeafe;
+  }
+
+  .dark .rte-editor :deep(.selectedCell) {
+    background-color: #1e40af;
+  }
+</style>
+
+<script setup lang="ts">
+  import { ref, watch, computed, onBeforeUnmount, onMounted, defineComponent, h } from 'vue'
+  import { Editor, EditorContent } from '@tiptap/vue-3'
+  import StarterKit from '@tiptap/starter-kit'
+  import Underline from '@tiptap/extension-underline'
+  import CharacterCount from '@tiptap/extension-character-count'
+  import { Table } from '@tiptap/extension-table'
+  import { TableRow } from '@tiptap/extension-table-row'
+  import { TableHeader } from '@tiptap/extension-table-header'
+  import { TableCell } from '@tiptap/extension-table-cell'
+  import TextAlign from '@tiptap/extension-text-align'
+  import * as HeroIconsOutline from '@heroicons/vue/24/outline'
+
+  // Icon mapping
+  const iconMap: { [key: string]: any } = {
+    'x-mark': HeroIconsOutline.XMarkIcon,
+    'bold': HeroIconsOutline.PencilIcon,
+    'underline': HeroIconsOutline.UnderlineIcon,
+    'list-bullet': HeroIconsOutline.ListBulletIcon,
+    'numbered-list': HeroIconsOutline.ListBulletIcon,
+    'arrow-right': HeroIconsOutline.ArrowRightIcon,
+    'arrow-left': HeroIconsOutline.ArrowLeftIcon,
+    'arrow-up': HeroIconsOutline.ArrowUpIcon,
+    'arrow-down': HeroIconsOutline.ArrowDownIcon,
+    'align-left': HeroIconsOutline.ArrowLeftIcon,
+    'align-center': HeroIconsOutline.Bars3Icon,
+    'align-right': HeroIconsOutline.ArrowRightIcon,
+    'table-cells': HeroIconsOutline.TableCellsIcon,
+    'trash': HeroIconsOutline.TrashIcon,
+    'code-bracket': HeroIconsOutline.CodeBracketIcon,
+  }
+
+  // ToolbarButton component
+  const ToolbarButton = defineComponent({
+    name: 'ToolbarButton',
+    props: {
+      icon: String,
+      title: String,
+      active: Boolean,
+      disabled: Boolean
+    },
+    emits: ['click'],
+    setup(props, { slots, emit }) {
+      return () => {
+        const IconComponent = props.icon ? iconMap[props.icon] : null
+
+        return h(
+          'button',
+          {
+            type: 'button',
+            title: props.title,
+            disabled: props.disabled,
+            class: [
+              'p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              props.active ? 'bg-blue-200 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : ''
+            ].filter(Boolean).join(' '),
+            onClick: () => emit('click')
+          },
+          props.icon && IconComponent ? h(IconComponent, { class: 'w-5 h-5' }) : slots.default?.()
+        )
+      }
+    }
+  })
+
+  const props = defineProps<{
+    modelValue: string
+    maximumLength?: number | null
+    canEditHtml?: boolean
+    stickyToolbar?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+    (e: 'limitReached'): void
+    (e: 'limitOk'): void
+  }>()
+
+  const isHtmlMode = ref(false)
+  const rawHtml = ref('')
+  const isOverLimit = ref(false)
+  const editor = ref<any>(null)
+  const isLTR = ref(false)
+  const isRTL = ref(false)
+
+  onMounted(() => {
+    editor.value = new Editor({
+      content: props.modelValue,
+      injectCSS: true,
+      parseOptions: { preserveWhitespace: 'full' },
+      editable: true,
+      extensions: [
+        StarterKit.configure({
+          heading: false,
+          blockquote: false,
+          horizontalRule: false,
+          hardBreak: false,
+          paragraph: {
+            HTMLAttributes: {
+              dir: 'ltr'
+            }
+          }
+        }),
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Underline,
+        Table.configure({
+          resizable: true,
+          handleWidth: 4,
+          cellMinWidth: 50,
+          lastColumnResizable: true,
+          colgroup: true
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        CharacterCount.configure(props.maximumLength ? { limit: props.maximumLength } : {})
+      ],
+      onUpdate({ editor: ed }) {
+        const html = ed.getHTML()
+        emit('update:modelValue', html)
+        checkLimit()
+        updateDirectionState()
+      }
+    })
+    updateDirectionState()
+  })
+
+  const charCount = computed(() => {
+    if (!editor.value) return 0
+    return editor.value.storage.characterCount?.characters() ?? editor.value.state.doc.textContent.length
+  })
+
+  function checkLimit() {
+    if (!editor.value || !props.maximumLength) return
+    if (charCount.value >= props.maximumLength) {
+      if (!isOverLimit.value) emit('limitReached')
+      isOverLimit.value = true
+      editor.value.setOptions({ editable: false })
+    } else {
+      if (isOverLimit.value) emit('limitOk')
+      isOverLimit.value = false
+      editor.value.setOptions({ editable: true })
+    }
+  }
+
+  function updateDirectionState() {
+    if (!editor.value) return
+    const attrs = editor.value.getAttributes('paragraph')
+    const currentDir = attrs?.dir || 'ltr'
+    isLTR.value = currentDir === 'ltr'
+    isRTL.value = currentDir === 'rtl'
+  }
+
+  function cmd(fn: () => void) {
+    if (!editor.value) return
+    editor.value.chain().focus()
+    fn()
+  }
+
+  function clearContent() {
+    cmd(() => editor.value?.chain().clearContent().run())
+  }
+
+  function insertTable() {
+    if (!editor.value) return
+    editor.value.chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  }
+
+  function toggleHtmlMode() {
+    if (!isHtmlMode.value && editor.value) {
+      rawHtml.value = editor.value.getHTML()
+    }
+    isHtmlMode.value = !isHtmlMode.value
+  }
+
+  function applyHtml() {
+    if (!editor.value) return
+    editor.value.commands.setContent(rawHtml.value, false)
+    isHtmlMode.value = false
+  }
+
+  function setTextDirection(direction: string) {
+    if (!editor.value) return
+    editor.value.chain()
+      .focus()
+      .updateAttributes('paragraph', { dir: direction })
+      .run()
+    updateDirectionState()
+  }
+
+  function handleIndent() {
+    if (!editor.value) return
+    // Try to indent list items
+    if (editor.value.isActive('bulletList') || editor.value.isActive('orderedList')) {
+      editor.value.chain().focus().sinkListItem('listItem').run()
+    }
+  }
+
+  function handleOutdent() {
+    if (!editor.value) return
+    // Try to outdent list items
+    if (editor.value.isActive('bulletList') || editor.value.isActive('orderedList')) {
+      editor.value.chain().focus().liftListItem('listItem').run()
+    }
+  }
+
+  function setTableWidth(pxOrPercent: string) {
+    if (!editor.value) return
+    editor.value.chain().focus().updateAttributes('table', { style: `width: ${pxOrPercent}` }).run()
+  }
+
+  watch(
+    () => props.modelValue,
+    value => {
+      if (!editor.value || value === editor.value.getHTML()) return
+      editor.value.commands.setContent(value, false)
+    }
+  )
+
+  onBeforeUnmount(() => {
+    if (editor.value) {
+      editor.value.destroy()
+    }
+  })
+</script>

package/src/components/pgo/ExpansionPanel.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="expansion-panels vts-d-flex vts-flex-column vts-ga-2">
+    <div
+      class="expansion-panel vts-overflow-hidden vts-elevation-0 vts-border vts-border-thin vts-bg-surface vts-transition vts-transition-all vts-duration-3 vts-ease-standard"
+      :class="{ 'is-collapsed': panel.collapsed, 'is-disabled': panel.disabled, 'is-readonly': panel.readonly }"
+      v-for="(panel, index) in panels"
+      :key="index"
+    >
+      <!-- Panel Header -->
+      <div
+        class="panel-header vts-d-flex vts-justify-space-between vts-align-center vts-pa-3 vts-font-weight-bold vts-bg-surface vts-text vts-transition vts-transition-colors vts-duration-2 vts-ease-standard"
+        :class="{
+          'vts-bg-border-light': panel.disabled,
+          'vts-text-secondary': panel.disabled || panel.readonly,
+          'vts-cursor-not-allowed': panel.disabled || panel.readonly,
+          'vts-cursor-pointer': !panel.disabled && !panel.readonly
+        }"
+        @click="togglePanel(index)"
+      >
+        <span>{{ panel.title }}</span>
+        <span v-if="panel.icon" class="vts-text-h6">{{ panel.icon }}</span>
+      </div>
+
+      <!-- Panel Body -->
+      <transition
+        @before-enter="beforeEnter"
+        @enter="enter"
+        @after-enter="afterEnter"
+        @before-leave="beforeLeave"
+        @leave="leave"
+        @after-leave="afterLeave"
+      >
+        <div
+          class="panel-body vts-pa-3 vts-bg-surface-elevated vts-text vts-overflow-hidden vts-transition vts-transition-size-opacity vts-will-change-size-opacity vts-duration-2 vts-ease-standard"
+          v-show="!panel.collapsed"
+        >
+          <slot :name="'panel-' + index">{{ panel.content }}</slot>
+        </div>
+      </transition>
+    </div>
+
+    <!-- Control Buttons (Collapse All, None) -->
+    <div class="control-buttons vts-d-flex vts-ga-3 vts-mt-3 vts-justify-start">
+      <button class="vts-rounded vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-cursor-pointer vts-border vts-bg-primary vts-on-primary vts-transition vts-transition-colors vts-duration-2 vts-ease-standard" @click="collapseAll(true)">Collapse All</button>
+      <button class="vts-rounded vts-pt-2 vts-pb-2 vts-pl-3 vts-pr-3 vts-cursor-pointer vts-border vts-bg-primary vts-on-primary vts-transition vts-transition-colors vts-duration-2 vts-ease-standard" @click="collapseAll(false)">Expand All</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, ref } from 'vue'
+
+  type PanelItem = {
+    title?: string
+    icon?: string
+    content?: string
+    collapsed?: boolean
+    readonly?: boolean
+    disabled?: boolean
+  }
+
+  export default defineComponent({
+    name: 'ExpansionPanel',
+
+    props: {
+      panelsData: {
+        type: Array as PropType<PanelItem[]>,
+        default: () => []
+      },
+      allowMultiple: {
+        type: Boolean,
+        default: false
+      },
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
+      disable: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    setup(props) {
+      // Track the state of each panel (collapsed or expanded)
+      const panels = ref<PanelItem[]>(
+        props.panelsData.map(panel => ({
+          ...panel,
+          collapsed: true,
+          readonly: props.readOnly || panel.readonly,
+          disabled: props.disable || panel.disabled
+        }))
+      )
+
+      // Toggle the collapse state of a specific panel
+      const togglePanel = (index: number) => {
+        if (panels.value[index].disabled || panels.value[index].readonly) return
+
+        if (props.allowMultiple) {
+          // If multiple panels are allowed, just toggle the current panel
+          panels.value[index].collapsed = !panels.value[index].collapsed
+        } else {
+          // If only one panel can be open, toggle the clicked panel
+          // and collapse all others
+          panels.value.forEach((panel, idx) => {
+            if (idx === index) {
+              panel.collapsed = !panel.collapsed // Toggle the clicked panel
+            } else {
+              panel.collapsed = true // Collapse all other panels
+            }
+          })
+        }
+      }
+
+      // Collapse or expand all panels
+      const collapseAll = (collapse: boolean) => {
+        panels.value.forEach(panel => {
+          panel.collapsed = collapse
+        })
+      }
+
+      // height/opacity collapse transition hooks
+      const beforeEnter = (el: Element) => {
+        const e = el as HTMLElement
+        e.style.height = '0px'
+        e.style.opacity = '0'
+        e.style.overflow = 'hidden'
+      }
+
+      const enter = (el: Element) => {
+        const e = el as HTMLElement
+        // schedule height/opacity change on next frame to avoid stutter
+        requestAnimationFrame(() => {
+          e.style.height = `${e.scrollHeight}px`
+          e.style.opacity = '1'
+        })
+      }
+
+      const afterEnter = (el: Element) => {
+        const e = el as HTMLElement
+        e.style.height = 'auto'
+        e.style.opacity = ''
+        e.style.overflow = ''
+      }
+
+      const beforeLeave = (el: Element) => {
+        const e = el as HTMLElement
+        e.style.height = `${e.scrollHeight}px`
+        e.style.opacity = '1'
+        e.style.overflow = 'hidden'
+      }
+
+      const leave = (el: Element) => {
+        const e = el as HTMLElement
+        // schedule collapse on next frame for smooth start
+        requestAnimationFrame(() => {
+          e.style.height = '0px'
+          e.style.opacity = '0'
+        })
+      }
+
+      const afterLeave = (el: Element) => {
+        const e = el as HTMLElement
+        e.style.height = ''
+        e.style.opacity = ''
+        e.style.overflow = ''
+      }
+
+      return {
+        panels,
+        togglePanel,
+        collapseAll,
+        beforeEnter,
+        enter,
+        afterEnter,
+        beforeLeave,
+        leave,
+        afterLeave
+      }
+    }
+  })
+</script>
+
+<style scoped>
+</style>