@v1nt1248/3nclient-lib 0.3.50 → 0.4.0

package/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue

@@ -6,19 +6,13 @@
     Ui3nScrollbarVerticalSlots,
     Ui3nScrollbarVerticalExpose,
   } from './types';
+  import { toCssLength } from '../../utils/ui/to-css-length';
 
   const MIN_HEIGHT = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarVerticalProps>(), {
     thumbMinHeight: MIN_HEIGHT,
     thumbHeight: 'auto',
-    thumbRadius: 4,
-    thumbColor: 'var(--color-bg-control-accent-default)',
-    thumbHoverColor: 'var(--color-bg-control-accent-hover)',
-    thumbActiveColor: 'var(--color-bg-control-accent-focused)',
-    trackWidth: 6,
-    trackRadius: 4,
-    trackColor: 'transparent',
     autoUpdate: true,
   });
   const emits = defineEmits<Ui3nScrollbarVerticalEmits>();
@@ -80,23 +74,40 @@
     return (scrollTop.value / maxScrollTop) * maxThumbTop;
   });
 
-  const thumbRadiusCss = computed(() => {
-    const num = Number(props.thumbRadius);
-    return isNaN(num) ? String(props.thumbRadius) : `${num}px`;
-  });
-  const thumbColorCss = computed(() => props.thumbColor);
-  const thumbHoverColorCss = computed(() => props.thumbHoverColor);
-  const thumbActiveColorCss = computed(() => props.thumbActiveColor);
-  const trackWidthCss = computed(() => {
-    const num = Number(props.trackWidth);
-    return isNaN(num) ? String(props.trackWidth) : `${num}px`;
-  });
-  const trackColorCss = computed(() => props.trackColor);
-  const trackRadiusCss = computed(() => {
-    const num = Number(props.trackRadius);
-    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
-  });
 
+  const scrollbarStyle = computed(() => {
+    const styles: Record<string, string> = {};
+
+    if (props.thumbRadius !== undefined) {
+      styles['--ui3n-scrollbar-thumb-radius'] = toCssLength(props.thumbRadius);
+    }
+
+    if (props.thumbColor) {
+      styles['--ui3n-scrollbar-thumb-color'] = props.thumbColor;
+    }
+
+    if (props.thumbHoverColor) {
+      styles['--ui3n-scrollbar-thumb-hover-color'] = props.thumbHoverColor;
+    }
+
+    if (props.thumbActiveColor) {
+      styles['--ui3n-scrollbar-thumb-active-color'] = props.thumbActiveColor;
+    }
+
+    if (props.trackWidth !== undefined) {
+      styles['--ui3n-scrollbar-track-width'] = toCssLength(props.trackWidth);
+    }
+
+    if (props.trackRadius !== undefined) {
+      styles['--ui3n-scrollbar-track-radius'] = toCssLength(props.trackRadius);
+    }
+
+    if (props.trackColor) {
+      styles['--ui3n-scrollbar-track-color'] = props.trackColor;
+    }
+
+    return styles;
+  });
   function updateMetrics() {
     if (!containerRef.value) {
       return;
@@ -233,16 +244,9 @@
 
 <template>
   <div
+    data-ui3n="scrollbar-vertical"
     :class="$style.ui3nScrollbarVertical"
-    :style="{
-      '--ui3n-scrollbar-thumb-radius': thumbRadiusCss,
-      '--ui3n-scrollbar-thumb-color': thumbColorCss,
-      '--ui3n-scrollbar-thumb-hover-color': thumbHoverColorCss,
-      '--ui3n-scrollbar-thumb-active-color': thumbActiveColorCss,
-      '--ui3n-scrollbar-track-width': trackWidthCss,
-      '--ui3n-scrollbar-track-radius': trackRadiusCss,
-      '--ui3n-scrollbar-track-color': trackColorCss,
-    }"
+    :style="scrollbarStyle"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >
@@ -274,6 +278,14 @@
 
 <style lang="scss" module>
   .ui3nScrollbarVertical {
+    --_scrollbar-thumb-radius: var(--ui3n-scrollbar-thumb-radius, 4px);
+    --_scrollbar-thumb-color: var(--ui3n-scrollbar-thumb-color, var(--color-bg-control-accent-default));
+    --_scrollbar-thumb-hover-color: var(--ui3n-scrollbar-thumb-hover-color, var(--color-bg-control-accent-hover));
+    --_scrollbar-thumb-active-color: var(--ui3n-scrollbar-thumb-active-color, var(--color-bg-control-accent-focused));
+    --_scrollbar-track-width: var(--ui3n-scrollbar-track-width, 6px);
+    --_scrollbar-track-radius: var(--ui3n-scrollbar-track-radius, 4px);
+    --_scrollbar-track-color: var(--ui3n-scrollbar-track-color, transparent);
+
     position: relative;
     width: 100%;
     height: 100%;
@@ -301,9 +313,9 @@
     top: 0;
     right: 2px;
     bottom: 0;
-    width: var(--ui3n-scrollbar-track-width);
-    background: var(--ui3n-scrollbar-track-color);
-    border-radius: var(--ui3n-scrollbar-track-radius);
+    width: var(--_scrollbar-track-width);
+    background: var(--_scrollbar-track-color);
+    border-radius: var(--_scrollbar-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;
@@ -323,19 +335,19 @@
     position: absolute;
     left: 0;
     width: 100%;
-    border-radius: var(--ui3n-scrollbar-thumb-radius);
-    background-color: var(--ui3n-scrollbar-thumb-color);
+    border-radius: var(--_scrollbar-thumb-radius);
+    background-color: var(--_scrollbar-thumb-color);
     cursor: pointer;
     transition: background-color 0.15s ease;
     touch-action: none;
 
     &:hover {
-      background-color: var(--ui3n-scrollbar-thumb-hover-color);
+      background-color: var(--_scrollbar-thumb-hover-color);
     }
 
     &:active,
     &.active {
-      background-color: var(--ui3n-scrollbar-thumb-active-color);
+      background-color: var(--_scrollbar-thumb-active-color);
     }
   }
 </style>

package/src/components/ui3n-selector/ui3n-selector.vue

@@ -241,6 +241,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="selector"
     :class="$style.ui3nSelector"
   >
     <input
@@ -374,16 +375,20 @@
   @use '@/assets/styles/mixins' as mixins;
 
   .ui3nSelector {
-    --ui3n-selector-activator-height: 32px;
-    --ui3n-selector-border-radius: calc(var(--ui3n-selector-activator-height) / 2.5);
-    --ui3n-selector-font-size: 12px;
-    --ui3n-selector-trigger-padding: 0 24px 0 8px;
-    --ui3n-selector-trigger-font-size: 13px;
-    --ui3n-selector-item-min-height: 32px;
-    --ui3n-selector-item-padding: 4px;
-    --ui3n-selector-item-font-size: 13px;
-    --ui3n-selector-item-border-radius: 4px;
-    --ui3n-selector-body-padding: 4px;
+    --_selector-activator-height: var(--ui3n-selector-activator-height, 32px);
+    --_selector-border-radius: var(--ui3n-selector-border-radius, calc(var(--_selector-activator-height) / 2.5));
+    --_selector-font-size: var(--ui3n-selector-font-size, 12px);
+    --_selector-trigger-padding: var(--ui3n-selector-trigger-padding, 0 24px 0 8px);
+    --_selector-trigger-font-size: var(--ui3n-selector-trigger-font-size, 13px);
+    --_selector-item-min-height: var(--ui3n-selector-item-min-height, 32px);
+    --_selector-item-padding: var(--ui3n-selector-item-padding, 4px);
+    --_selector-item-font-size: var(--ui3n-selector-item-font-size, 13px);
+    --_selector-item-border-radius: var(--ui3n-selector-item-border-radius, 4px);
+    --_selector-body-padding: var(--ui3n-selector-body-padding, 4px);
+    --_selector-body-border-color: var(
+      --ui3n-selector-body-border-color,
+      var(--color-border-block-primary-default)
+    );
 
     position: relative;
     width: 100%;
@@ -392,7 +397,7 @@
   .label {
     display: block;
     width: 100%;
-    font-size: var(--ui3n-selector-font-size);
+    font-size: var(--_selector-font-size);
     font-weight: 500;
     line-height: 1.33;
     color: var(--color-text-control-primary-default);
@@ -400,25 +405,25 @@
   }
 
   .menu {
-    border-radius: var(--ui3n-selector-border-radius);
+    border-radius: var(--_selector-border-radius);
 
     & > div {
       max-width: 100% !important;
-      border-radius: var(--ui3n-selector-border-radius);
+      border-radius: var(--_selector-border-radius);
     }
   }
 
   .trigger {
     display: flex;
     width: 100%;
-    height: var(--ui3n-selector-activator-height);
-    padding: var(--ui3n-selector-trigger-padding);
+    height: var(--_selector-activator-height);
+    padding: var(--_selector-trigger-padding);
     justify-content: flex-start;
     align-items: center;
     background-color: var(--color-bg-control-secondary-default);
-    border-radius: var(--ui3n-selector-border-radius);
+    border-radius: var(--_selector-border-radius);
     color: var(--color-text-control-primary-default);
-    font-size: var(--ui3n-selector-trigger-font-size);
+    font-size: var(--_selector-trigger-font-size);
     font-weight: 400;
     line-height: 1.23;
     transition: all 0.2s ease-in-out;
@@ -463,35 +468,35 @@
     position: relative;
     width: 100%;
     background-color: var(--color-bg-block-primary-default);
-    padding: var(--ui3n-selector-body-padding);
+    padding: var(--_selector-body-padding);
     box-shadow: 0 4px 12px var(--shadow-close);
-    border: 1px solid var(--color-border-control-tritery-default);
-    border-radius: 8px;
+    border: 1px solid var(--_selector-body-border-color);
+    border-radius: var(--ui3n-selector-body-border-radius, 8px);
 
     .noData {
       display: flex;
-      min-height: var(--ui3n-selector-item-min-height);
+      min-height: var(--_selector-item-min-height);
       justify-content: flex-start;
       align-items: center;
-      padding: var(--ui3n-selector-item-padding) calc(var(--ui3n-selector-item-padding) * 2);
-      font-size: var(--ui3n-selector-item-font-size);
+      padding: var(--_selector-item-padding) calc(var(--_selector-item-padding) * 2);
+      font-size: var(--_selector-item-font-size);
       line-height: 1.33;
       font-weight: 500;
       color: var(--color-text-control-primary-default);
-      border-radius: var(--ui3n-selector-item-border-radius);
+      border-radius: var(--_selector-item-border-radius);
     }
 
     .item {
       display: flex;
-      min-height: var(--ui3n-selector-item-min-height);
+      min-height: var(--_selector-item-min-height);
       justify-content: flex-start;
       align-items: center;
-      padding: var(--ui3n-selector-item-padding) calc(var(--ui3n-selector-item-padding) * 2);
-      font-size: var(--ui3n-selector-item-font-size);
+      padding: var(--_selector-item-padding) calc(var(--_selector-item-padding) * 2);
+      font-size: var(--_selector-item-font-size);
       line-height: 1.33;
       font-weight: 500;
       color: var(--color-text-control-primary-default);
-      border-radius: var(--ui3n-selector-item-border-radius);
+      border-radius: var(--_selector-item-border-radius);
       user-select: none;
       cursor: pointer;
 

package/src/components/ui3n-slider/ui3n-slider.vue

@@ -3,6 +3,7 @@
   import cloneDeep from 'lodash/cloneDeep';
   import Ui3nTooltip from '../ui3n-tooltip/ui3n-tooltip.vue';
   import { round } from '../../utils';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Nullable } from '../../types';
   import type { UI3nSliderProps, UI3nSliderEmits, UI3nSliderExpose } from './types';
 
@@ -13,11 +14,6 @@
     labelVisible: 'normal',
     labelColor: 'var(--color-bg-block-tritery-default)',
     labelTextColor: 'var(--color-text-block-darkery-default)',
-    activeColor: 'var(--color-bg-control-accent-default)',
-    trackColor: 'var(--color-bg-control-secondary-default)',
-    trackHeight: 8,
-    thumbSize: 16,
-    thumbColor: 'var(--color-bg-control-accent-default)',
   });
   const emits = defineEmits<UI3nSliderEmits>();
 
@@ -35,7 +31,6 @@
   const innerValue = ref<number | [number, number]>(0);
   const selectedPointer = ref<Nullable<1 | 2>>(null);
 
-  const thumbSizeCss = computed(() => `${props.thumbSize}px`);
   const diff = computed(() => Number(props.max) - Number(props.min));
   const innerStep = computed(() => (props.step ? Number(props.step) : diff.value / 100));
 
@@ -100,20 +95,34 @@
     return props.transformValueMethod ? props.transformValueMethod(val) : `${val}`;
   });
 
+  /* sizes and colours default in CSS; a prop, when given, wins as an inline variable */
   const sliderStyle = computed(() => {
-    const height = Math.max(Number(props.trackHeight), Number(props.thumbSize));
-    return {
-      '--ui3n-slider-height': `${height}px`,
-      '--ui3n-slider-label-color': props.labelColor,
-      '--ui3n-slider-label-text-color': props.labelTextColor,
-      '--ui3n-slider-active-color': props.activeColor,
-      '--ui3n-slider-track-color': props.trackColor,
-      '--ui3n-slider-track-height': `${props.trackHeight}px`,
-      '--ui3n-slider-thumb-size': `${props.thumbSize}px`,
-      '--ui3n-slider-thumb-color': props.thumbColor,
+    const styles: Record<string, string> = {
       '--ui3n-slider-pointer1-position': pointer1PositionCss.value,
       '--ui3n-slider-pointer2-position': pointer2PositionCss.value,
     };
+
+    if (props.activeColor) {
+      styles['--ui3n-slider-active-color'] = props.activeColor;
+    }
+
+    if (props.trackColor) {
+      styles['--ui3n-slider-track-color'] = props.trackColor;
+    }
+
+    if (props.thumbColor) {
+      styles['--ui3n-slider-thumb-color'] = props.thumbColor;
+    }
+
+    if (props.trackHeight !== undefined) {
+      styles['--ui3n-slider-track-height'] = toCssLength(props.trackHeight);
+    }
+
+    if (props.thumbSize !== undefined) {
+      styles['--ui3n-slider-thumb-size'] = toCssLength(props.thumbSize);
+    }
+
+    return styles;
   });
 
   function onMouseenter(pointer: 1 | 2) {
@@ -262,6 +271,7 @@
   <div
     ref="sliderEl"
     :id="id"
+    data-ui3n="slider"
     :style="sliderStyle"
     :class="[$style.ui3nSlider, disabled && $style.disabled]"
     @click.stop.prevent="onTimelineClick"
@@ -346,9 +356,18 @@
 
 <style lang="scss" module>
   .ui3nSlider {
+    --_slider-track-height: var(--ui3n-slider-track-height, 8px);
+    --_slider-thumb-size: var(--ui3n-slider-thumb-size, 16px);
+    --_slider-thumb-color: var(--ui3n-slider-thumb-color, var(--color-bg-control-accent-default));
+    --_slider-track-color: var(--ui3n-slider-track-color, var(--color-bg-control-secondary-default));
+    --_slider-active-color: var(--ui3n-slider-active-color, var(--color-bg-control-accent-default));
+
+    /* the slider is as tall as the taller of the track and the thumb */
+    --_slider-height: var(--ui3n-slider-height, max(var(--_slider-track-height), var(--_slider-thumb-size)));
+
     position: relative;
     width: 100%;
-    height: var(--ui3n-slider-height);
+    height: var(--_slider-height);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -362,25 +381,25 @@
   .track {
     position: relative;
     width: 100%;
-    height: var(--ui3n-slider-track-height);
-    background-color: var(--ui3n-slider-track-color);
-    border-radius: var(--ui3n-slider-track-height);
+    height: var(--_slider-track-height);
+    background-color: var(--_slider-track-color);
+    border-radius: var(--_slider-track-height);
     cursor: pointer;
   }
 
   .active {
     position: absolute;
-    height: var(--ui3n-slider-track-height);
-    background-color: var(--ui3n-slider-active-color);
-    border-radius: var(--ui3n-slider-track-height);
+    height: var(--_slider-track-height);
+    background-color: var(--_slider-active-color);
+    border-radius: var(--_slider-track-height);
   }
 
   .pointerWrapper {
     position: absolute;
-    //top: calc(var(--ui3n-slider-track-height) / 2 * -1);
-    top: calc(var(--ui3n-slider-track-height) * -1);
-    width: var(--ui3n-slider-thumb-size);
-    height: var(--ui3n-slider-thumb-size);
+    //top: calc(var(--_slider-track-height) / 2 * -1);
+    top: calc(var(--_slider-track-height) * -1);
+    width: var(--_slider-thumb-size);
+    height: var(--_slider-thumb-size);
     border-radius: 50%;
     background-color: transparent;
     cursor: pointer;
@@ -394,34 +413,34 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-color: var(--ui3n-slider-thumb-color);
+    background-color: var(--_slider-thumb-color);
     touch-action: none;
     z-index: 5;
 
     &:hover {
-      background-color: oklch(from var(--ui3n-slider-thumb-color) calc(l + 0.1) c h);
+      background-color: oklch(from var(--_slider-thumb-color) calc(l + 0.1) c h);
     }
 
     &.selected::before {
       position: absolute;
       content: '';
-      width: calc(var(--ui3n-slider-thumb-size) * 2);
-      height: calc(var(--ui3n-slider-thumb-size) * 2);
+      width: calc(var(--_slider-thumb-size) * 2);
+      height: calc(var(--_slider-thumb-size) * 2);
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       border-radius: 50%;
       opacity: 0.2;
       transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-      background-color: var(--ui3n-slider-thumb-color);
+      background-color: var(--_slider-thumb-color);
     }
   }
 
   .pointer1 {
-    left: var(--ui3n-slider-pointer1-position);
+    left: var(--ui3n-slider-pointer1-position, 0);
   }
 
   .pointer2 {
-    left: var(--ui3n-slider-pointer2-position);
+    left: var(--ui3n-slider-pointer2-position, 0);
   }
 </style>

package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue

@@ -13,6 +13,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="step-line-bar"
     :class="$style.ui3nStepLineBar"
   >
     <div :class="$style.label">
@@ -31,6 +32,9 @@
 
 <style lang="scss" module>
   .ui3nStepLineBar {
+    /* the step height doubles as its border radius */
+    --_step-line-bar-step-height: var(--ui3n-step-line-bar-step-height, 4px);
+
     position: relative;
     width: 100%;
   }
@@ -39,11 +43,11 @@
     position: relative;
     width: 100%;
     text-align: center;
-    font-size: var(--font-14);
+    font-size: var(--ui3n-step-line-bar-label-font-size, 14px);
     font-weight: 500;
-    line-height: var(--font-20);
+    line-height: var(--ui3n-step-line-bar-label-line-height, 20px);
     color: var(--color-text-block-accent-default);
-    margin-bottom: var(--spacing-m);
+    margin-bottom: var(--ui3n-step-line-bar-label-offset, 16px);
   }
 
   .body {
@@ -51,14 +55,14 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    gap: var(--spacing-s);
+    gap: var(--ui3n-step-line-bar-gap, 8px);
   }
 
   .step {
     position: relative;
     flex: 1;
-    height: var(--spacing-xs);
-    border-radius: var(--spacing-xs);
+    height: var(--_step-line-bar-step-height);
+    border-radius: var(--_step-line-bar-step-height);
     background-color: var(--color-bg-control-secondary-default);
   }
 

package/src/components/ui3n-switch/ui3n-switch.vue

@@ -61,6 +61,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="switch"
     :style="switchStyle"
     :tabindex="disabled ? -1 : 0"
     :class="[
@@ -95,12 +96,12 @@
 
 <style lang="scss" module>
   .ui3nSwitch {
-    --ui3n-switch-size: 16px;
-    --ui3n-switch-color: var(--color-icon-control-accent-default);
-    --ui3n-switch-off-color: var(--color-bg-table-cell-pressed);
-    --ui3n-switch-font-size: 12px;
-    --ui3n-switch-font-color: var(--color-text-control-primary-default);
-    --ui3n-switch-font-weight: 500;
+    --_switch-size: var(--ui3n-switch-size, 16px);
+    --_switch-color: var(--ui3n-switch-color, var(--color-icon-control-accent-default));
+    --_switch-off-color: var(--ui3n-switch-off-color, var(--color-bg-table-cell-pressed));
+    --_switch-font-size: var(--ui3n-switch-font-size, 12px);
+    --_switch-font-color: var(--ui3n-switch-font-color, var(--color-text-control-primary-default));
+    --_switch-font-weight: var(--ui3n-switch-font-weight, 500);
 
     position: relative;
     display: inline-flex;
@@ -118,20 +119,20 @@
 
   .body {
     position: relative;
-    background-color: var(--ui3n-switch-off-color);
-    height: var(--ui3n-switch-size);
-    width: calc(var(--ui3n-switch-size) * 2);
-    border-radius: var(--ui3n-switch-size);
+    background-color: var(--_switch-off-color);
+    height: var(--_switch-size);
+    width: calc(var(--_switch-size) * 2);
+    border-radius: var(--_switch-size);
     transition: background-color 0.2s ease;
   }
 
   .checked {
     .body {
-      background-color: var(--ui3n-switch-color);
+      background-color: var(--_switch-color);
     }
 
     .dot {
-      border-color: var(--ui3n-switch-color);
+      border-color: var(--_switch-color);
     }
   }
 
@@ -140,30 +141,30 @@
   }
 
   .dot {
-    --ui3n-switch-dot-size: calc(var(--ui3n-switch-size) / 4 * 3);
-    --ui3n-switch-dot-margin: calc(var(--ui3n-switch-size) / 8);
+    --_switch-dot-size: var(--ui3n-switch-dot-size, calc(var(--_switch-size) / 4 * 3));
+    --_switch-dot-margin: var(--ui3n-switch-dot-margin, calc(var(--_switch-size) / 8));
 
     position: absolute;
-    width: var(--ui3n-switch-dot-size);
-    height: var(--ui3n-switch-dot-size);
+    width: var(--_switch-dot-size);
+    height: var(--_switch-dot-size);
     border-radius: 50%;
     background-color: var(--color-bg-control-primary-default);
-    top: var(--ui3n-switch-dot-margin);
+    top: var(--_switch-dot-margin);
     transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .left {
-    left: var(--ui3n-switch-dot-margin);
+    left: var(--_switch-dot-margin);
   }
 
   .right {
-    left: calc(100% - var(--ui3n-switch-dot-size) - var(--ui3n-switch-dot-margin));
+    left: calc(100% - var(--_switch-dot-size) - var(--_switch-dot-margin));
   }
 
   .label {
-    font-size: var(--ui3n-switch-font-size);
-    font-weight: var(--ui3n-switch-font-weight);
-    color: var(--ui3n-switch-font-color);
+    font-size: var(--_switch-font-size);
+    font-weight: var(--_switch-font-weight);
+    color: var(--_switch-font-color);
     user-select: none;
   }