vue-pane 0.0.0

package/src/components/PMonitor.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import PLabel from './PLabel.vue'
+
+const {
+  value,
+  label,
+  tooltip,
+} = defineProps<{
+  value: unknown
+  label?: string
+  tooltip?: string
+}>()
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-monitor">
+      <div class="vp-monitor__value">
+        {{ value }}
+      </div>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/log';
+</style>

package/src/components/PMonitorMulti.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import PLabel from './PLabel.vue'
+
+const {
+  value,
+  label,
+  tooltip,
+} = defineProps<{
+  value: unknown
+  label?: string
+  tooltip?: string
+}>()
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-monitor-multi">
+      <textarea
+        class="vp-monitor-multi__value"
+        readonly
+        :value="String(value)"
+      />
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/monitor-multi';
+</style>

package/src/components/PNumber.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import PLabel from './PLabel.vue'
+
+const model = defineModel<number>({ required: true })
+const {
+  label,
+  tooltip,
+  min,
+  max,
+  step = 1,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+  min?: number
+  max?: number
+  step?: number
+}>()
+
+const isDragging = ref(false)
+const isFocused = ref(false)
+const localValue = ref(String(model.value))
+const dragPixelDelta = ref(0)
+
+watch(model, (val) => {
+  if (!isFocused.value) {
+    localValue.value = String(val)
+  }
+})
+
+function clamp(val: number): number {
+  if (min !== undefined) val = Math.max(min, val)
+  if (max !== undefined) val = Math.min(max, val)
+  return val
+}
+
+function snapToStep(val: number): number {
+  return Math.round(val / step) * step
+}
+
+const guideBodyPath = computed(() => {
+  const x = dragPixelDelta.value
+  return `M 0,4 L${x},4`
+})
+
+const guideHeadPath = computed(() => {
+  const x = dragPixelDelta.value
+  if (x === 0) return ''
+  const aox = x + (x > 0 ? -1 : 1)
+  const adx = Math.max(-4, Math.min(4, -aox))
+  return `M ${aox + adx},0 L${aox},4 L${aox + adx},8 M ${x},-1 L${x},9`
+})
+
+const tooltipText = computed(() => {
+  const decimals = step < 1 ? (String(step).split('.')[1]?.length ?? 0) : 0
+  return model.value.toFixed(decimals)
+})
+
+function onFocus() {
+  isFocused.value = true
+}
+
+function onBlur() {
+  isFocused.value = false
+  const parsed = parseFloat(localValue.value)
+  if (!isNaN(parsed)) {
+    model.value = clamp(parsed)
+  } else {
+    localValue.value = String(model.value)
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    (e.target as HTMLInputElement).blur()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    const multiplier = e.shiftKey ? 10 : 1
+    model.value = clamp(model.value + step * multiplier)
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    const multiplier = e.shiftKey ? 10 : 1
+    model.value = clamp(model.value - step * multiplier)
+  }
+}
+
+let dragStartX = 0
+let dragStartValue = 0
+
+function onKnobPointerDown(e: PointerEvent) {
+  e.preventDefault()
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  isDragging.value = true
+  dragStartX = e.clientX
+  dragStartValue = model.value
+  dragPixelDelta.value = 0
+  document.body.style.cursor = 'ew-resize'
+}
+
+function onKnobPointerMove(e: PointerEvent) {
+  if (!isDragging.value) return
+  const delta = e.clientX - dragStartX
+  dragPixelDelta.value = delta
+  model.value = clamp(snapToStep(dragStartValue + delta))
+}
+
+function onKnobPointerUp() {
+  isDragging.value = false
+  dragPixelDelta.value = 0
+  document.body.style.cursor = ''
+}
+</script>
+
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div
+      class="vp-text vp-text--number"
+      :class="{ 'vp-text--dragging': isDragging }"
+    >
+      <input
+        v-model="localValue"
+        class="vp-text__input"
+        type="text"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      >
+      <div
+        class="vp-text__knob"
+        @pointerdown="onKnobPointerDown"
+        @pointermove="onKnobPointerMove"
+        @pointerup="onKnobPointerUp"
+        @pointercancel="onKnobPointerUp"
+      >
+        <svg class="vp-text__guide">
+          <path
+            class="vp-text__guide-body"
+            :d="guideBodyPath"
+          />
+          <path
+            class="vp-text__guide-head"
+            :d="guideHeadPath"
+          />
+        </svg>
+        <div
+          class="vp-text__drag-tooltip"
+          :style="{ left: `${dragPixelDelta}px` }"
+        >
+          {{ tooltipText }}
+        </div>
+      </div>
+    </div>
+  </PLabel>
+</template>
+
+<style lang="scss">
+@use '../styles/view/text';
+@use '../styles/view/number';
+</style>

package/src/components/PPoint2d.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { usePickerFold } from '../composables/usePickerFold'
+import PLabel from './PLabel.vue'
+
+const model = defineModel<{ x: number, y: number }>({ required: true })
+const {
+  label,
+  tooltip,
+  min = -1,
+  max = 1,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+  min?: number
+  max?: number
+}>()
+
+const isOpen = ref(false)
+const panelRef = ref<HTMLElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+const isComplete = usePickerFold(panelRef, isOpen)
+const canvasSize = 160
+
+const localX = computed(() => model.value.x.toFixed(3))
+const localY = computed(() => model.value.y.toFixed(3))
+
+function clamp(val: number): number {
+  return Math.max(min, Math.min(max, val))
+}
+
+function onXBlur(e: Event) {
+  const val = parseFloat((e.target as HTMLInputElement).value)
+  if (!isNaN(val)) model.value = { x: clamp(val), y: model.value.y }
+}
+
+function onYBlur(e: Event) {
+  const val = parseFloat((e.target as HTMLInputElement).value)
+  if (!isNaN(val)) model.value = { x: model.value.x, y: clamp(val) }
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function drawCanvas() {
+  const canvas = canvasRef.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')!
+  const size = canvasSize
+  ctx.clearRect(0, 0, size, size)
+  ctx.fillStyle = 'rgba(0,0,0,0.3)'
+  ctx.fillRect(0, 0, size, size)
+  ctx.strokeStyle = 'rgba(255,255,255,0.1)'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(size / 2, 0)
+  ctx.lineTo(size / 2, size)
+  ctx.moveTo(0, size / 2)
+  ctx.lineTo(size, size / 2)
+  ctx.stroke()
+}
+
+onMounted(() => {
+  drawCanvas()
+})
+
+const crosshairX = computed(() => {
+  const range = max - min
+  return ((model.value.x - min) / range) * canvasSize
+})
+
+const crosshairY = computed(() => {
+  const range = max - min
+  return canvasSize - ((model.value.y - min) / range) * canvasSize
+})
+
+let canvasDragging = false
+
+function posToValue(e: PointerEvent) {
+  const canvas = canvasRef.value!
+  const rect = canvas.getBoundingClientRect()
+  const rx = (e.clientX - rect.left) / rect.width
+  const ry = 1 - (e.clientY - rect.top) / rect.height
+  const range = max - min
+  return {
+    x: clamp(min + rx * range),
+    y: clamp(min + ry * range),
+  }
+}
+
+function onCanvasDown(e: PointerEvent) {
+  e.preventDefault()
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  canvasDragging = true
+  model.value = posToValue(e)
+}
+
+function onCanvasMove(e: PointerEvent) {
+  if (!canvasDragging) return
+  model.value = posToValue(e)
+}
+
+function onCanvasUp() {
+  canvasDragging = false
+}
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div
+      class="vp-point-2d"
+      :class="{ 'vp-point-2d--expanded': isOpen, 'vp-point-2d--complete': isComplete }"
+    >
+      <div class="vp-point-2d__header">
+        <button
+          class="vp-point-2d__btn"
+          @click="toggle"
+        >
+          <svg viewBox="0 0 16 16">
+            <path d="M8 2 L8 14 M2 8 L14 8" />
+            <circle
+              cx="8"
+              cy="8"
+              r="1.5"
+            />
+          </svg>
+        </button>
+        <div class="vp-point-2d__inputs">
+          <div style="display:flex; gap:2px">
+            <div
+              class="vp-text vp-text--number vp-text--first"
+              style="flex:1"
+            >
+              <input
+                class="vp-text__input"
+                type="text"
+                :value="localX"
+                @blur="onXBlur"
+                @keydown.enter="(e) => (e.target as HTMLElement).blur()"
+              >
+            </div>
+            <div
+              class="vp-text vp-text--number vp-text--last"
+              style="flex:1"
+            >
+              <input
+                class="vp-text__input"
+                type="text"
+                :value="localY"
+                @blur="onYBlur"
+                @keydown.enter="(e) => (e.target as HTMLElement).blur()"
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        ref="panelRef"
+        class="vp-point-2d__picker-panel"
+      >
+        <div class="vp-point-2d__picker-wrap">
+          <canvas
+            ref="canvasRef"
+            class="vp-point-2d__canvas"
+            :height="canvasSize"
+            :width="canvasSize"
+            @pointerdown="onCanvasDown"
+            @pointermove="onCanvasMove"
+            @pointerup="onCanvasUp"
+            @pointercancel="onCanvasUp"
+          />
+          <div
+            class="vp-point-2d__crosshair-h"
+            :style="{ top: crosshairY + 'px' }"
+          />
+          <div
+            class="vp-point-2d__crosshair-v"
+            :style="{ left: crosshairX + 'px' }"
+          />
+        </div>
+      </div>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/point-2d';
+</style>

package/src/components/PSelect.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import PLabel from './PLabel.vue'
+
+const model = defineModel<string | number>({ required: true })
+const {
+  label,
+  tooltip,
+  options,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+  options: { value: string | number, label: string }[]
+}>()
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-select">
+      <select
+        class="vp-select__input"
+        :value="model"
+        @change="model = ($event.target as HTMLSelectElement).value"
+      >
+        <option
+          v-for="opt in options"
+          :key="opt.value"
+          :value="opt.value"
+        >
+          {{ opt.label }}
+        </option>
+      </select>
+      <div class="vp-select__arrow">
+        <svg viewBox="0 0 16 16">
+          <path d="M 2 5 L 8 11 L 14 5" />
+        </svg>
+      </div>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/list';
+</style>

package/src/components/PSeparator.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-separator">
+    <hr class="vp-separator__rule">
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/separator';
+</style>

package/src/components/PSlider.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PLabel from './PLabel.vue'
+
+const model = defineModel<number>({ required: true })
+const {
+  label,
+  tooltip,
+  min = 0,
+  max = 1,
+  step = null,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+  min?: number
+  max?: number
+  step?: number | null
+}>()
+
+const trackRef = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
+
+const knobPercent = computed(() => {
+  const range = max - min
+  if (range === 0) return 0
+  return ((model.value - min) / range) * 100
+})
+
+function clamp(val: number): number {
+  return Math.max(min, Math.min(max, val))
+}
+
+function valueFromPointer(e: PointerEvent): number {
+  const el = trackRef.value
+  if (!el) return model.value
+  const rect = el.getBoundingClientRect()
+  const ratio = (e.clientX - rect.left) / rect.width
+  const raw = min + ratio * (max - min)
+  if (step === null) return clamp(raw)
+  return clamp(Math.round(raw / step) * step)
+}
+
+function onTrackPointerDown(e: PointerEvent) {
+  e.preventDefault()
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  isDragging.value = true
+  model.value = valueFromPointer(e)
+}
+
+function onTrackPointerMove(e: PointerEvent) {
+  if (!isDragging.value) return
+  model.value = valueFromPointer(e)
+}
+
+function onPointerUp() {
+  isDragging.value = false
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const increment = step ?? (max - min) / 100
+  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    model.value = clamp(model.value + increment * (e.shiftKey ? 10 : 1))
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    model.value = clamp(model.value - increment * (e.shiftKey ? 10 : 1))
+  }
+}
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-slider">
+      <div
+        ref="trackRef"
+        class="vp-slider__track"
+        tabindex="0"
+        @pointerdown="onTrackPointerDown"
+        @pointermove="onTrackPointerMove"
+        @pointerup="onPointerUp"
+        @pointercancel="onPointerUp"
+        @keydown="onKeydown"
+      >
+        <div
+          class="vp-slider__knob"
+          :style="{ left: knobPercent + '%' }"
+        />
+      </div>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/slider';
+</style>

package/src/components/PTab.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { usePaneConfig } from '../composables/usePaneConfig'
+import { useTooltip } from '../composables/useTooltip'
+
+const model = defineModel<number>({ default: 0 })
+const {
+  tabs,
+  tooltips,
+} = defineProps<{
+  tabs: string[]
+  tooltips?: string[]
+}>()
+
+const { floatingStyles, visible, activeText, show, hide } = useTooltip()
+const config = usePaneConfig()
+
+function setTab(i: number) {
+  model.value = i
+}
+</script>
+<template>
+  <div class="vp-tab">
+    <div class="vp-tab__title-bar">
+      <div
+        v-for="(tab, i) in tabs"
+        :key="i"
+        class="vp-tab-item"
+        :class="{ 'vp-tab-item--selected': i === model }"
+      >
+        <button
+          class="vp-tab-item__btn"
+          @click="setTab(i)"
+        >
+          <span class="vp-tab-item__label">
+            {{ tab }}
+            <component
+              :is="config.tooltipIcon"
+              v-if="tooltips?.[i] && config.tooltipIcon"
+              @mouseenter="tooltips?.[i] && show($event, tooltips[i])"
+              @mouseleave="hide"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="visible"
+        ref="floatingEl"
+        class="vp-tooltip"
+        :style="floatingStyles"
+      >
+        {{ activeText }}
+      </div>
+    </Teleport>
+    <div class="vp-tab__indent" />
+    <div class="vp-tab__content">
+      <div
+        v-for="(tab, i) in tabs"
+        v-show="i === model"
+        :key="i"
+        class="vp-tab-page"
+      >
+        <div class="vp-tab-page__content">
+          <slot :name="tab" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/tab';
+</style>

package/src/components/PText.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import PLabel from './PLabel.vue'
+
+const model = defineModel<string>({ required: true })
+const {
+  label,
+  tooltip,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+}>()
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-text">
+      <input
+        class="vp-text__input"
+        type="text"
+        :value="model"
+        @input="model = ($event.target as HTMLInputElement).value"
+      >
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/text';
+</style>

package/src/components/PTooltipIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    viewBox="0 0 16 16"
+    width="10"
+    height="10"
+    fill="none"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="7"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <circle
+      cx="8"
+      cy="5.5"
+      r="1"
+      fill="currentColor"
+    />
+    <rect
+      x="7"
+      y="7.5"
+      width="2"
+      height="4"
+      rx="1"
+      fill="currentColor"
+    />
+  </svg>
+</template>