vue-pane 0.0.0

package/src/components/VPane.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useFoldable } from '../composables/useFoldable'
+import { type PaneConfig, providePaneConfig } from '../composables/usePaneConfig'
+
+const expandedModel = defineModel<boolean>('expanded', { default: undefined })
+
+const {
+  title,
+  id,
+  disabled,
+  config,
+} = defineProps<{
+  title?: string
+  id?: string
+  disabled?: boolean
+  config?: PaneConfig
+}>()
+
+if (config) {
+  providePaneConfig(config)
+}
+
+const key = id ?? title
+const hasTitle = computed(() => !!title)
+const containerRef = ref<HTMLElement | null>(null)
+const { isExpanded, toggle } = useFoldable(
+  containerRef,
+  expandedModel,
+  key ? `vp-pane-${key}` : undefined,
+)
+</script>
+<template>
+  <div
+    class="vp-pane"
+    :class="{
+      'vp-pane--expanded': isExpanded,
+      'vp-pane--no-title': !hasTitle,
+      'vp--disabled': disabled,
+    }"
+  >
+    <button
+      v-if="hasTitle"
+      class="vp-pane__title"
+      @click="toggle"
+    >
+      {{ title }}
+      <div class="vp-pane__chevron" />
+    </button>
+    <div
+      ref="containerRef"
+      class="vp-pane__content"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/root';
+@use '../styles/view/tooltip';
+</style>

package/src/composables/useFoldable.ts

@@ -0,0 +1,128 @@
+import type { Ref } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { usePaneConfig } from './usePaneConfig.ts'
+
+function measureExpandedHeight(el: HTMLElement, expandedClass: string): number {
+  const parent = el.parentElement
+  if (!parent) return 0
+
+  const wasExpanded = parent.classList.contains(expandedClass)
+
+  // Temporarily disable transitions and apply expanded state to measure true height
+  el.style.transition = 'none'
+  if (!wasExpanded) {
+    parent.classList.add(expandedClass)
+    el.style.height = 'auto'
+  }
+  void el.offsetHeight
+  const height = el.clientHeight
+
+  if (!wasExpanded) {
+    parent.classList.remove(expandedClass)
+    el.style.height = ''
+  }
+  void el.offsetHeight
+  el.style.transition = ''
+
+  return height
+}
+
+export function useFoldable(
+  containerRef: Ref<HTMLElement | null>,
+  expandedRef: Ref<boolean>,
+  storageKey?: string,
+  expandedClass = 'vp-folder--expanded',
+): {
+  isExpanded: Ref<boolean>
+  toggle: () => void
+} {
+  let stored: string | null = null
+  if (storageKey) {
+    stored = localStorage?.getItem?.(storageKey) ?? null
+  }
+  const config = usePaneConfig()
+  const onToggle = (val: boolean) => expandedRef.value = val
+  const initialPropValue = expandedRef.value as boolean | undefined
+  const isExpanded = ref(
+    initialPropValue !== undefined
+      ? initialPropValue
+      : stored !== null
+        ? stored === 'true'
+        : config.expandedDefault ?? true,
+  )
+
+  watch(isExpanded, (val) => {
+    if (storageKey && typeof localStorage !== 'undefined') {
+      localStorage.setItem(storageKey, String(val))
+    }
+    onToggle(val)
+  })
+
+  onMounted(() => {
+    const el = containerRef.value
+    if (el && isExpanded.value) {
+      el.style.height = 'auto'
+    }
+  })
+
+  function animateExpand(el: HTMLElement) {
+    const targetHeight = measureExpandedHeight(el, expandedClass)
+    isExpanded.value = true
+
+    nextTick(() => {
+      if (targetHeight === 0) {
+        el.style.height = 'auto'
+        return
+      }
+      // Pin padding to 0 inline so both height and padding can animate from 0
+      el.style.paddingTop = '0'
+      el.style.paddingBottom = '0'
+      void el.offsetHeight
+
+      el.style.height = targetHeight + 'px'
+      el.style.paddingTop = ''
+      el.style.paddingBottom = ''
+
+      el.addEventListener('transitionend', (e: TransitionEvent) => {
+        if (e.propertyName === 'height' && isExpanded.value) {
+          el.style.height = 'auto'
+        }
+      }, { once: true })
+    })
+  }
+
+  function animateCollapse(el: HTMLElement) {
+    // Lock to px so height: auto → 0 is animatable
+    el.style.transition = 'none'
+    el.style.height = el.clientHeight + 'px'
+    void el.offsetHeight
+    el.style.transition = ''
+    void el.offsetHeight
+
+    el.style.height = '0'
+    isExpanded.value = false
+
+    el.addEventListener('transitionend', (e: TransitionEvent) => {
+      if (e.propertyName === 'height') {
+        el.style.height = ''
+      }
+    }, { once: true })
+  }
+
+  watch(() => expandedRef.value as boolean | undefined, (val) => {
+    if (val === undefined || val === isExpanded.value) return
+    const el = containerRef.value
+    if (!el) return
+    if (val) animateExpand(el)
+    else animateCollapse(el)
+  })
+
+  function toggle() {
+    const el = containerRef.value
+    if (!el) return
+    if (isExpanded.value) animateCollapse(el)
+    else animateExpand(el)
+  }
+
+  return { isExpanded, toggle }
+}

package/src/composables/usePaneConfig.ts

@@ -0,0 +1,25 @@
+import { type Component, inject, type InjectionKey, provide } from 'vue'
+import PTooltipIcon from '../components/PTooltipIcon.vue'
+
+export interface PaneConfig {
+  readonly tooltipIcon?: Component | null
+  readonly expandedDefault?: boolean
+}
+
+const DEFAULTS: PaneConfig = {
+  expandedDefault: true,
+  tooltipIcon: PTooltipIcon,
+}
+
+export const PANE_CONFIG_KEY: InjectionKey<PaneConfig> = Symbol('vp-config')
+
+export function usePaneConfig(): PaneConfig {
+  return inject(PANE_CONFIG_KEY, DEFAULTS)
+}
+
+export function providePaneConfig(config: Partial<PaneConfig> | null = null): void {
+  provide(PANE_CONFIG_KEY, {
+    ...usePaneConfig(),
+    ...config,
+  } as PaneConfig)
+}

package/src/composables/usePickerFold.ts

@@ -0,0 +1,46 @@
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
+
+export function usePickerFold(
+  panelRef: Ref<HTMLElement | null>,
+  isOpen: Ref<boolean>,
+): Ref<boolean> {
+  const isComplete = ref(false)
+
+  watch(isOpen, (open) => {
+    const el = panelRef.value
+    if (!el) return
+
+    isComplete.value = false
+
+    if (open) {
+      el.style.transition = 'none'
+      el.style.height = 'auto'
+      void el.offsetHeight
+      const h = el.clientHeight
+      el.style.height = '0'
+      void el.offsetHeight
+      el.style.transition = ''
+      void el.offsetHeight
+      el.style.height = h + 'px'
+      el.addEventListener('transitionend', (e: TransitionEvent) => {
+        if (e.propertyName === 'height') {
+          el.style.height = 'auto'
+          isComplete.value = true
+        }
+      }, { once: true })
+    } else {
+      el.style.transition = 'none'
+      el.style.height = el.clientHeight + 'px'
+      void el.offsetHeight
+      el.style.transition = ''
+      void el.offsetHeight
+      el.style.height = '0'
+      el.addEventListener('transitionend', (e: TransitionEvent) => {
+        if (e.propertyName === 'height') el.style.height = ''
+      }, { once: true })
+    }
+  })
+
+  return isComplete
+}

package/src/composables/useTooltip.ts

@@ -0,0 +1,27 @@
+import { ref, useTemplateRef } from 'vue'
+import { flip, offset, shift, useFloating } from '@floating-ui/vue'
+
+export function useTooltip() {
+  const referenceEl = ref<HTMLElement | null>(null)
+  const floatingEl = useTemplateRef<HTMLElement>('floatingEl')
+  const visible = ref(false)
+  const activeText = ref<string | undefined>(undefined)
+
+  const { floatingStyles } = useFloating(referenceEl, floatingEl, {
+    placement: 'top-start',
+    strategy: 'fixed',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  })
+
+  function show(e: MouseEvent, text: string) {
+    referenceEl.value = e.currentTarget as HTMLElement
+    activeText.value = text
+    visible.value = true
+  }
+
+  function hide() {
+    visible.value = false
+  }
+
+  return { floatingStyles, visible, activeText, show, hide }
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+import VPane from './components/VPane.vue'
+import PFolder from './components/PFolder.vue'
+import PLabel from './components/PLabel.vue'
+import PText from './components/PText.vue'
+import PNumber from './components/PNumber.vue'
+import PButton from './components/PButton.vue'
+import PSeparator from './components/PSeparator.vue'
+import PCheckbox from './components/PCheckbox.vue'
+import PSelect from './components/PSelect.vue'
+import PMonitor from './components/PMonitor.vue'
+import PMonitorMulti from './components/PMonitorMulti.vue'
+import PSlider from './components/PSlider.vue'
+import PTab from './components/PTab.vue'
+import PColor from './components/PColor.vue'
+import PGraph from './components/PGraph.vue'
+import PPoint2d from './components/PPoint2d.vue'
+
+export type { PaneConfig } from './composables/usePaneConfig'
+export { usePaneConfig } from './composables/usePaneConfig'
+
+export {
+  VPane,
+  PFolder,
+  PLabel,
+  PText,
+  PNumber,
+  PButton,
+  PSeparator,
+  PCheckbox,
+  PSelect,
+  PMonitor,
+  PMonitorMulti,
+  PSlider,
+  PTab,
+  PColor,
+  PGraph,
+  PPoint2d,
+}

package/src/styles/_vp.scss

@@ -0,0 +1,12 @@
+// Entry point for plugins
+
+@forward './common/defs';
+
+@forward './view/placeholder/button';
+@forward './view/placeholder/container';
+@forward './view/placeholder/folder';
+@forward './view/placeholder/input';
+@forward './view/placeholder/list';
+@forward './view/placeholder/monitor';
+@forward './view/placeholder/texts';
+@forward './view/placeholder/theme';

package/src/styles/common/_defs.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use 'sass:string';
+
+$prefix: 'vp';
+
+// Global state classes
+$disabled: #{$prefix}--disabled;
+
+// Common Sass variables
+$fold-transition-duration: 0.2s;
+$separator-width: 2px;
+$slider-knob-size: 12px;
+$z-index-picker: 1000;
+
+// CSS variables — short names to reduce file size
+$css-vars: (
+	'base-bg': 'bs-bg',
+	'base-border-radius': 'bs-br',
+	'base-font': 'bs-ff',
+	'base-shadow': 'bs-sh',
+	'blade-border-radius': 'bld-br',
+	'blade-h-padding': 'bld-hp',
+	'blade-value-width': 'bld-vw',
+	'button-bg': 'btn-bg',
+	'button-bg-active': 'btn-bg-a',
+	'button-bg-focus': 'btn-bg-f',
+	'button-bg-hover': 'btn-bg-h',
+	'button-fg': 'btn-fg',
+	'container-bg': 'cnt-bg',
+	'container-bg-active': 'cnt-bg-a',
+	'container-bg-focus': 'cnt-bg-f',
+	'container-bg-hover': 'cnt-bg-h',
+	'container-fg': 'cnt-fg',
+	'container-h-padding': 'cnt-hp',
+	'container-unit-size': 'cnt-usz',
+	'container-unit-spacing': 'cnt-usp',
+	'container-v-padding': 'cnt-vp',
+	'groove-fg': 'grv-fg',
+	'input-bg': 'in-bg',
+	'input-bg-active': 'in-bg-a',
+	'input-bg-focus': 'in-bg-f',
+	'input-bg-hover': 'in-bg-h',
+	'input-fg': 'in-fg',
+	'label-fg': 'lbl-fg',
+	'monitor-bg': 'mo-bg',
+	'monitor-fg': 'mo-fg',
+);
+
+@function cssVar($name) {
+	$short-name: map.get($css-vars, $name);
+	@if $short-name == null {
+		@error 'Short CSS variable for \'#{$name}\' not found.';
+	}
+	@return string.unquote('var(--' + $short-name + ')');
+}
+

package/src/styles/index.scss

@@ -0,0 +1 @@
+@use './view/views';

package/src/styles/view/_button.scss

@@ -0,0 +1,12 @@
+@use '../vp';
+
+.vp-button {
+	&__btn {
+		@extend %vp-button;
+
+		width: 100%;
+	}
+	&__label {
+		text-align: center;
+	}
+}

package/src/styles/view/_checkbox.scss

@@ -0,0 +1,54 @@
+@use '../vp';
+
+.vp-checkbox {
+	&__label {
+		display: block;
+		position: relative;
+	}
+	&__input {
+		left: 0;
+		opacity: 0;
+		position: absolute;
+		top: 0;
+	}
+	&__box {
+		background-color: vp.cssVar('input-bg');
+		border-radius: vp.cssVar('blade-border-radius');
+		cursor: pointer;
+		display: block;
+		height: vp.cssVar('container-unit-size');
+		position: relative;
+		width: vp.cssVar('container-unit-size');
+
+		svg {
+			display: block;
+			height: 16px;
+			inset: 0;
+			margin: auto;
+			opacity: 0;
+			position: absolute;
+			width: 16px;
+
+			path {
+				fill: none;
+				stroke: vp.cssVar('input-fg');
+				stroke-width: 2;
+			}
+		}
+	}
+	&__input:hover + &__box {
+		background-color: vp.cssVar('input-bg-hover');
+	}
+	&__input:focus + &__box {
+		background-color: vp.cssVar('input-bg-focus');
+	}
+	&__input:active + &__box {
+		background-color: vp.cssVar('input-bg-active');
+	}
+	&__input:checked + &__box svg {
+		opacity: 1;
+	}
+	&.#{vp.$disabled} &__box {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/_color.scss

@@ -0,0 +1,57 @@
+@use '../vp';
+
+.vp-color {
+	position: relative;
+
+	&__header { display: flex; }
+	&__swatch { flex-grow: 0; flex-shrink: 0; width: vp.cssVar('container-unit-size'); }
+	&__text { flex: 1; margin-left: 4px; }
+
+	&__swatch-btn {
+		background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+		background-size: 8px 8px;
+		border-radius: vp.cssVar('blade-border-radius');
+		cursor: pointer;
+		display: block;
+		height: vp.cssVar('container-unit-size');
+		overflow: hidden;
+		position: relative;
+		width: 100%;
+
+		&:focus::after {
+			border: rgba(white, 0.75) solid 2px;
+			border-radius: vp.cssVar('blade-border-radius');
+			box-sizing: border-box;
+			content: '';
+			display: block;
+			inset: 0;
+			position: absolute;
+		}
+
+		&__color { inset: 0; position: absolute; }
+	}
+
+	&__popup {
+		z-index: vp.$z-index-picker;
+
+		// vue-color CSS variable overrides — maps to our design tokens
+		--vc-body-bg: #{vp.cssVar('base-bg')};
+		--vc-picker-bg: rgba(255, 255, 255, 0.85);
+		--vc-input-bg: #{vp.cssVar('input-bg')};
+		--vc-input-text: #{vp.cssVar('container-fg')};
+		--vc-input-label: #{vp.cssVar('label-fg')};
+		--vc-input-border: rgba(255, 255, 255, 0.15);
+		--vc-chrome-toggle-btn-highlighted: #{vp.cssVar('input-bg-hover')};
+
+		.vc-chrome-picker {
+			box-sizing: border-box;
+			font-family: #{vp.cssVar('base-font')};
+			font-size: 11px;
+			width: 220px;
+		}
+	}
+}

package/src/styles/view/_folder.scss

@@ -0,0 +1,70 @@
+@use '../vp';
+
+.vp-folder {
+	position: relative;
+
+	// Title button
+	&__title {
+		@extend %vp-folder_title;
+	}
+	// Title text inside button
+	&__title-text {
+		padding-left: 4px;
+	}
+	// Expand/collapse chevron
+	&__chevron {
+		@extend %vp-folder_mark;
+	}
+	&__title:disabled &__chevron {
+		display: none;
+	}
+	&#{&}--expanded > &__title > &__chevron {
+		@extend %vp-folder_mark-expanded;
+	}
+	// Children container
+	&__content {
+		@extend %vp-folder_container;
+		@extend %vp-container_children;
+		@extend %vp-container_subcontainers;
+
+		padding-left: 4px;
+	}
+	&#{&}--expanded > &__content {
+		@extend %vp-folder_container-expanded;
+	}
+	&#{&}--complete:not(#{&}--expanded) > &__content {
+		@extend %vp-folder_container-shrinkedCompletely;
+	}
+	// Indent line
+	&__indent {
+		bottom: 0;
+		color: vp.cssVar('container-bg');
+		left: 0;
+		overflow: hidden;
+		position: absolute;
+		top: calc(#{vp.cssVar('container-unit-size')} + 4px);
+		width: max(vp.cssVar('base-border-radius'), 4px);
+
+		&::before {
+			background-color: currentColor;
+			bottom: 0;
+			content: '';
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 4px;
+		}
+	}
+	&__title:hover + &__indent {
+		color: vp.cssVar('container-bg-hover');
+	}
+	&__title:focus + &__indent {
+		color: vp.cssVar('container-bg-focus');
+	}
+	&__title:active + &__indent {
+		color: vp.cssVar('container-bg-active');
+	}
+	&.#{vp.$disabled} > &__indent {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/_graph.scss

@@ -0,0 +1,11 @@
+@use '../vp';
+
+.vp-graph {
+	position: relative;
+	&__svg {
+		@extend %vp-monitor;
+		display: block; height: calc(vp.cssVar('container-unit-size') * 3);
+		polyline { fill: none; stroke: vp.cssVar('monitor-fg'); stroke-linejoin: round; }
+	}
+	&.vp--disabled &__svg { opacity: 0.5; }
+}

package/src/styles/view/_label.scss

@@ -0,0 +1,37 @@
+@use '../vp';
+
+.vp-label {
+	align-items: center;
+	display: flex;
+	line-height: 1.3;
+	padding-left: vp.cssVar('container-h-padding');
+	padding-right: vp.cssVar('container-h-padding');
+
+	&--no-label {
+		display: block;
+	}
+
+	&__text {
+		color: vp.cssVar('label-fg');
+		flex: 1;
+		hyphens: auto;
+		overflow: hidden;
+		padding-left: 4px;
+		padding-right: 16px;
+	}
+	&.#{vp.$disabled} &__text {
+		opacity: 0.5;
+	}
+	&--no-label &__text {
+		display: none;
+	}
+	&__value {
+		align-self: flex-start;
+		flex-grow: 0;
+		flex-shrink: 0;
+		width: vp.cssVar('blade-value-width');
+	}
+	&--no-label &__value {
+		width: 100%;
+	}
+}

package/src/styles/view/_list.scss

@@ -0,0 +1,17 @@
+@use '../vp';
+
+.vp-select {
+	@extend %vp-list;
+
+	&__input {
+		@extend %vp-list_select;
+
+		padding: 0 (16px + 2px * 2) 0 vp.cssVar('blade-h-padding');
+		width: 100%;
+	}
+	&__arrow {
+		@extend %vp-list_arrow;
+
+		color: vp.cssVar('button-fg');
+	}
+}

package/src/styles/view/_log.scss

@@ -0,0 +1,13 @@
+@use '../vp';
+
+.vp-monitor {
+	&__value {
+		@extend %vp-monitor;
+
+		padding-left: vp.cssVar('blade-h-padding');
+		padding-right: vp.cssVar('blade-h-padding');
+	}
+	&.#{vp.$disabled} &__value {
+		opacity: 0.5;
+	}
+}