vue-pane 0.0.0

package/src/styles/view/_monitor-multi.scss

@@ -0,0 +1,18 @@
+@use '../vp';
+
+.vp-monitor-multi {
+	&__value {
+		@extend %vp-monitor;
+
+		display: block;
+		height: calc(#{vp.cssVar('container-unit-size')} * 3);
+		line-height: vp.cssVar('container-unit-size');
+		padding-left: vp.cssVar('blade-h-padding');
+		padding-right: vp.cssVar('blade-h-padding');
+		resize: none;
+		white-space: pre;
+	}
+	&.#{vp.$disabled} &__value {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/_number.scss

@@ -0,0 +1,110 @@
+@use 'sass:math';
+@use '../vp';
+
+.vp-text {
+	$knob-bounds-width: 12px;
+	$knob-visual-width: 2px;
+
+	&--number &__input {
+		text-align: right;
+	}
+	&--dragging &__input {
+		opacity: 0.3;
+	}
+	&__knob {
+		cursor: ew-resize;
+		height: 100%;
+		left: calc(
+			#{vp.cssVar('blade-h-padding')} - #{math.div(
+				$knob-bounds-width - $knob-visual-width,
+				2
+			)}
+		);
+		position: absolute;
+		top: 0;
+		width: $knob-bounds-width;
+
+		&::before {
+			background-color: vp.cssVar('input-fg');
+			border-radius: math.div($knob-visual-width, 2);
+			bottom: 0;
+			content: '';
+			height: calc(#{vp.cssVar('container-unit-size')} - 4px);
+			left: 50%;
+			margin-bottom: auto;
+			margin-left: math.div(-$knob-visual-width, 2);
+			margin-top: auto;
+			opacity: 0.1;
+			position: absolute;
+			top: 0;
+			transition: border-radius 0.1s, height 0.1s, transform 0.1s, width 0.1s;
+			width: $knob-visual-width;
+		}
+	}
+	&__knob:hover::before,
+	&--dragging &__knob::before {
+		opacity: 1;
+	}
+	&--dragging &__knob::before {
+		border-radius: 50%;
+		height: 4px;
+		transform: translateX(math.div($knob-visual-width - 4px, 2));
+		width: 4px;
+	}
+	&__guide {
+		bottom: 0;
+		display: block;
+		height: 8px;
+		left: 50%;
+		margin: auto;
+		overflow: visible;
+		pointer-events: none;
+		position: absolute;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+	}
+	&--dragging &__guide {
+		visibility: visible;
+	}
+	&__guide-body {
+		fill: none;
+		stroke: vp.cssVar('input-fg');
+		stroke-dasharray: 1;
+	}
+	&__guide-head {
+		fill: none;
+		stroke: vp.cssVar('input-fg');
+	}
+	&__drag-tooltip {
+		background-color: vp.cssVar('container-fg');
+		border-radius: vp.cssVar('blade-border-radius');
+		color: vp.cssVar('base-bg');
+		font-family: vp.cssVar('base-font'), sans-serif;
+		font-size: 11px;
+		line-height: 1.5;
+		margin-left: math.div($knob-bounds-width, 2);
+		padding: 2px 4px;
+		pointer-events: none;
+		position: absolute;
+		transform: translate(-50%, calc(-100% - 4px));
+		visibility: hidden;
+		white-space: nowrap;
+
+		&::after {
+			border-color: vp.cssVar('container-fg') transparent transparent transparent;
+			border-style: solid;
+			border-width: 3px 2px 0;
+			content: '';
+			height: 0;
+			left: 50%;
+			margin-left: -2px;
+			position: absolute;
+			top: 100%;
+			width: 0;
+		}
+	}
+	&--dragging &__drag-tooltip {
+		visibility: visible;
+	}
+}

package/src/styles/view/_point-2d.scss

@@ -0,0 +1,61 @@
+@use 'sass:math';
+@use '../vp';
+
+.vp-point-2d {
+	position: relative;
+	&__header { display: flex; }
+	&__btn {
+		@extend %vp-button;
+
+		height: vp.cssVar('container-unit-size');
+		margin-right: 4px;
+		position: relative;
+		width: vp.cssVar('container-unit-size');
+
+		svg {
+			display: block;
+			height: 16px;
+			left: 50%;
+			margin-left: math.div(-16px, 2);
+			margin-top: math.div(-16px, 2);
+			position: absolute;
+			top: 50%;
+			width: 16px;
+
+			path { stroke: currentColor; stroke-width: 2; fill: none; }
+			circle { fill: currentColor; }
+		}
+	}
+	&__inputs { flex: 1; }
+	&__picker-panel {
+		height: 0;
+		margin-top: 0;
+		opacity: 0;
+		overflow: hidden;
+		transition: height vp.$fold-transition-duration ease-in-out,
+			opacity vp.$fold-transition-duration linear,
+			margin-top vp.$fold-transition-duration ease-in-out;
+	}
+	&#{&}--expanded &__picker-panel {
+		margin-top: vp.cssVar('container-unit-spacing');
+		opacity: 1;
+	}
+	&#{&}--expanded#{&}--complete &__picker-panel {
+		overflow: visible;
+	}
+	&__picker-wrap { position: relative; }
+	&__canvas {
+		background-color: vp.cssVar('input-bg');
+		border-radius: vp.cssVar('blade-border-radius');
+		cursor: crosshair;
+		display: block;
+		width: 100%;
+	}
+	&__crosshair-h, &__crosshair-v {
+		background-color: rgba(white, 0.5);
+		pointer-events: none;
+		position: absolute;
+	}
+	&__crosshair-h { height: 1px; left: 0; right: 0; }
+	&__crosshair-v { bottom: 0; top: 0; width: 1px; }
+}

package/src/styles/view/_root.scss

@@ -0,0 +1,126 @@
+@use '../vp';
+
+:root {
+	@extend %vp-theming;
+}
+
+// Resets for form elements inside any vp container, including teleported
+// overlays. :where() zeroes the container's specificity
+:where(.vp-pane, .vp-color__popup) {
+	button, input, select, textarea {
+		appearance: none;
+		background-color: transparent;
+		border-width: 0;
+		font-family: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		margin: 0;
+		outline: none;
+		padding: 0;
+	}
+}
+
+.vp-pane {
+	@extend %vp-theming;
+
+	background-color: vp.cssVar('base-bg');
+	border-radius: vp.cssVar('base-border-radius');
+	box-shadow: 0 2px 4px vp.cssVar('base-shadow');
+	font-family: vp.cssVar('base-font');
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	text-align: left;
+
+	&__title {
+		@extend %vp-folder_title;
+
+		border-radius: vp.cssVar('base-border-radius');
+		padding-left: calc(
+			2px * 2 + #{vp.cssVar('container-h-padding')}
+		);
+	}
+	&#{&}--expanded &__title {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+		transition-delay: 0s;
+		transition-duration: 0s;
+	}
+	&--no-title > &__title {
+		display: none;
+	}
+	&__chevron {
+		@extend %vp-folder_mark;
+	}
+	&__title:disabled &__chevron {
+		display: none;
+	}
+	&#{&}--expanded &__chevron {
+		@extend %vp-folder_mark-expanded;
+	}
+	&__content {
+		@extend %vp-folder_container;
+		@extend %vp-container_children;
+	}
+	&#{&}--expanded &__content {
+		@extend %vp-folder_container-expanded;
+	}
+	&#{&}--complete:not(#{&}--expanded) &__content {
+		@extend %vp-folder_container-shrinkedCompletely;
+	}
+
+	// Last folder in root — rounded bottom corners
+	&__content {
+		& > .vp-folder:last-child > .vp-folder__content {
+			border-bottom-left-radius: vp.cssVar('base-border-radius');
+			border-bottom-right-radius: vp.cssVar('base-border-radius');
+		}
+		& > .vp-folder:last-child > .vp-folder__indent {
+			border-bottom-left-radius: vp.cssVar('base-border-radius');
+		}
+		& > .vp-folder:last-child:not(.vp-folder--expanded) > .vp-folder__title {
+			border-bottom-left-radius: vp.cssVar('base-border-radius');
+			border-bottom-right-radius: vp.cssVar('base-border-radius');
+		}
+		& > .vp-folder:last-child.vp-folder--expanded > .vp-folder__title {
+			transition-delay: 0s;
+			transition-duration: 0s;
+		}
+		// Last folder at any depth — rounded bottom-right corner when collapsed
+		& .vp-folder:not(:has(~ .vp-folder)):not(.vp-folder--expanded) > .vp-folder__title {
+			border-bottom-right-radius: vp.cssVar('base-border-radius');
+		}
+		// Last tab in root — rounded bottom corners
+		& > .vp-tab:last-child > .vp-tab__content {
+			border-bottom-left-radius: vp.cssVar('base-border-radius');
+			border-bottom-right-radius: vp.cssVar('base-border-radius');
+		}
+		& > .vp-tab:last-child > .vp-tab__indent {
+			border-bottom-left-radius: vp.cssVar('base-border-radius');
+		}
+	}
+	// First folder/tab when pane has no title
+	&--no-title &__content {
+		& > .vp-folder:first-child {
+			margin-top: calc(-1 * #{vp.cssVar('container-v-padding')});
+
+			& > .vp-folder__title {
+				border-top-left-radius: vp.cssVar('base-border-radius');
+				border-top-right-radius: vp.cssVar('base-border-radius');
+			}
+		}
+		& > .vp-tab:first-child {
+			margin-top: calc(-1 * #{vp.cssVar('container-v-padding')});
+
+			& > .vp-tab__title-bar {
+				border-top-left-radius: vp.cssVar('base-border-radius');
+				border-top-right-radius: vp.cssVar('base-border-radius');
+			}
+		}
+	}
+
+	&.#{vp.$disabled},
+	.#{vp.$disabled} {
+		pointer-events: none;
+	}
+}

package/src/styles/view/_separator.scss

@@ -0,0 +1,15 @@
+@use '../vp';
+
+.vp-separator {
+	&__rule {
+		background-color: vp.cssVar('groove-fg');
+		border-width: 0;
+		display: block;
+		height: vp.$separator-width;
+		margin: 0;
+		width: 100%;
+	}
+	&.#{vp.$disabled} &__rule {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/_slider.scss

@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '../vp';
+
+.vp-slider {
+	&.vp--disabled { opacity: 0.5; }
+	&__track {
+		box-sizing: border-box; cursor: pointer;
+		height: vp.cssVar('container-unit-size');
+		margin: 0 math.div(vp.$slider-knob-size, 2);
+		outline: none; position: relative;
+		&::before {
+			background-color: vp.cssVar('input-bg'); border-radius: 1px;
+			content: ''; display: block; height: 2px; inset: 0; margin: auto; position: absolute;
+		}
+	}
+	&__knob {
+		height: 100%; left: 0; position: absolute; top: 0;
+		&::before {
+			background-color: vp.cssVar('input-fg'); border-radius: 1px;
+			content: ''; display: block; height: 2px; inset: 0; margin-bottom: auto; margin-top: auto; position: absolute;
+		}
+		&::after {
+			background-color: vp.cssVar('button-bg'); border-radius: vp.cssVar('blade-border-radius');
+			bottom: 0; content: ''; display: block; height: vp.$slider-knob-size;
+			margin-bottom: auto; margin-top: auto; position: absolute;
+			right: math.div(-1 * vp.$slider-knob-size, 2); top: 0; width: vp.$slider-knob-size;
+		}
+	}
+	&__track:hover &__knob::after { background-color: vp.cssVar('button-bg-hover'); }
+	&__track:focus &__knob::after { background-color: vp.cssVar('button-bg-focus'); }
+	&__track:active &__knob::after { background-color: vp.cssVar('button-bg-active'); }
+}

package/src/styles/view/_tab.scss

@@ -0,0 +1,139 @@
+@use '../vp';
+
+.vp-tab {
+	position: relative;
+
+	&__title-bar {
+		align-items: flex-end;
+		color: vp.cssVar('container-bg');
+		display: flex;
+		overflow: hidden;
+		position: relative;
+
+		&:hover {
+			color: vp.cssVar('container-bg-hover');
+		}
+		&:has(*:focus) {
+			color: vp.cssVar('container-bg-focus');
+		}
+		&:has(*:active) {
+			color: vp.cssVar('container-bg-active');
+		}
+
+		// Bottom border line
+		&::before {
+			background-color: currentColor;
+			bottom: 0;
+			content: '';
+			height: 2px;
+			left: 0;
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+		}
+	}
+
+	&.#{vp.$disabled} &__title-bar::before {
+		opacity: 0.5;
+	}
+
+	&__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-bar:hover + &__indent {
+		color: vp.cssVar('container-bg-hover');
+	}
+	&__title-bar:has(*:focus) + &__indent {
+		color: vp.cssVar('container-bg-focus');
+	}
+	&__title-bar:has(*:active) + &__indent {
+		color: vp.cssVar('container-bg-active');
+	}
+	&.#{vp.$disabled} > &__indent {
+		opacity: 0.5;
+	}
+}
+
+.vp-tab-item {
+	flex: 1;
+	min-width: 0;
+	position: relative;
+
+	& + & {
+		margin-left: 2px;
+	}
+
+	&__btn {
+		cursor: pointer;
+		display: block;
+		padding-left: calc(#{vp.cssVar('container-h-padding')} + 4px);
+		padding-right: calc(#{vp.cssVar('container-h-padding')} + 4px);
+		position: relative;
+		width: 100%;
+
+		&:disabled {
+			opacity: 0.5;
+		}
+
+		// Tab background — inset leaves 2px at bottom for the title-bar border to show through
+		&::before {
+			background-color: vp.cssVar('container-bg');
+			content: '';
+			inset: 0 0 2px;
+			pointer-events: none;
+			position: absolute;
+		}
+		&:hover::before {
+			background-color: vp.cssVar('container-bg-hover');
+		}
+		&:focus::before {
+			background-color: vp.cssVar('container-bg-focus');
+		}
+		&:active::before {
+			background-color: vp.cssVar('container-bg-active');
+		}
+	}
+
+	&__label {
+		color: vp.cssVar('container-fg');
+		height: calc(#{vp.cssVar('container-unit-size')} + 4px);
+		line-height: calc(#{vp.cssVar('container-unit-size')} + 4px);
+		opacity: 0.5;
+		overflow: hidden;
+		position: relative;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&--selected &__label {
+		opacity: 1;
+	}
+}
+
+.vp-tab-page {
+	&__content {
+		@extend %vp-container_children;
+		@extend %vp-container_subcontainers;
+
+		padding-bottom: vp.cssVar('container-v-padding');
+		padding-left: 4px;
+		padding-top: vp.cssVar('container-v-padding');
+	}
+}

package/src/styles/view/_text.scss

@@ -0,0 +1,24 @@
+@use '../vp';
+
+.vp-text {
+	position: relative;
+
+	&__input {
+		@extend %vp-input;
+
+		padding-left: vp.cssVar('blade-h-padding');
+		padding-right: vp.cssVar('blade-h-padding');
+	}
+	// Array position variants
+	&--first &__input {
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+	&--middle &__input {
+		border-radius: 0;
+	}
+	&--last &__input {
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+	}
+}

package/src/styles/view/_tooltip.scss

@@ -0,0 +1,17 @@
+@use '../vp';
+
+.vp-tooltip {
+	background-color: #{vp.cssVar('base-bg')};
+	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+	border-radius: vp.cssVar('blade-border-radius');
+	box-shadow: vp.cssVar('base-shadow');
+	color: vp.cssVar('container-fg');
+	font-family: vp.cssVar('base-font'), sans-serif;
+	font-size: 11px;
+	line-height: 1.5;
+	max-width: 200px;
+	padding: 4px 8px;
+	pointer-events: none;
+	white-space: pre-wrap;
+	z-index: vp.$z-index-picker;
+}

package/src/styles/view/_views.scss

@@ -0,0 +1,2 @@
+@forward './root';
+@forward './tooltip';

package/src/styles/view/placeholder/_button.scss

@@ -0,0 +1,28 @@
+@use '../../common/defs';
+
+%vp-button {
+	background-color: defs.cssVar('button-bg');
+	border-radius: defs.cssVar('blade-border-radius');
+	color: defs.cssVar('button-fg');
+	cursor: pointer;
+	display: block;
+	font-weight: bold;
+	height: defs.cssVar('container-unit-size');
+	line-height: defs.cssVar('container-unit-size');
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: defs.cssVar('button-bg-hover');
+	}
+	&:focus {
+		background-color: defs.cssVar('button-bg-focus');
+	}
+	&:active {
+		background-color: defs.cssVar('button-bg-active');
+	}
+	&:disabled {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/placeholder/_container.scss

@@ -0,0 +1,80 @@
+@use '../../common/defs';
+
+%vp-container_children {
+	// Negative bottom margin on last container cancels the parent's padding-bottom
+	& > .vp-container:last-child {
+		margin-bottom: calc(-1 * #{defs.cssVar('container-v-padding')});
+	}
+
+	// Bottom left radius of last folder
+	& > .vp-folder:last-child .vp-folder__content {
+		border-bottom-left-radius: 0;
+	}
+
+	& > .vp-folder:last-child .vp-folder__title {
+		border-bottom-left-radius: 0;
+	}
+
+	// Spacing between two blades
+	& > *:not(:first-child) {
+		margin-top: defs.cssVar('container-unit-spacing');
+	}
+
+	// Top spacing of folder and separator
+	& > .vp-separator:not(:first-child),
+	& > .vp-container:not(:first-child) {
+		margin-top: defs.cssVar('container-v-padding');
+	}
+
+	// Bottom spacing of separator and containers
+	& > .vp-separator + *,
+	& > .vp-container + * {
+		margin-top: defs.cssVar('container-v-padding');
+	}
+
+	// Spacing between two containers and separators
+	& > .vp-separator + .vp-separator,
+	& > .vp-container + .vp-container {
+		margin-top: 0;
+	}
+}
+
+%vp-container_subcontainers {
+	// Left spacing of subcontainers
+	& > .vp-container {
+		margin-left: 4px;
+	}
+
+	// Left border radius of subfolder
+	& > .vp-folder > .vp-folder__title {
+		border-top-left-radius: defs.cssVar('blade-border-radius');
+		border-bottom-left-radius: defs.cssVar('blade-border-radius');
+	}
+
+	& > .vp-folder.vp-folder--expanded > .vp-folder__title {
+		border-bottom-left-radius: 0;
+	}
+
+	& .vp-folder > .vp-folder__content {
+		border-bottom-left-radius: defs.cssVar('blade-border-radius');
+	}
+
+	// Top left border radius of subfolder after container
+	& > .vp-container + .vp-folder > .vp-folder__title {
+		border-top-left-radius: 0;
+	}
+
+	// Top left border radius of subtab after container
+	& > .vp-container + .vp-tab > .vp-tab__title-bar {
+		border-top-left-radius: 0;
+	}
+
+	// Left border radius of subtab
+	& > .vp-tab > .vp-tab__title-bar {
+		border-top-left-radius: defs.cssVar('blade-border-radius');
+	}
+
+	& .vp-tab > .vp-tab__content {
+		border-bottom-left-radius: defs.cssVar('blade-border-radius');
+	}
+}