@v1nt1248/3nclient-lib 0.3.51 → 0.4.1

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

@@ -132,6 +132,7 @@
   >
     <div
       ref="tableEl"
+      data-ui3n="table"
       :style="tableStyle"
       :class="[$style.ui3nTable, $style.ui3nTableInsideScrollbar, stickyColumnsActive && $style.stickyColumns]"
     >
@@ -316,6 +317,7 @@
   <div
     v-else
     ref="tableEl"
+    data-ui3n="table"
     :style="tableStyle"
     :class="[$style.ui3nTable, stickyColumnsActive && $style.stickyColumns]"
   >
@@ -505,21 +507,21 @@
   }
 
   .ui3nTable {
-    --ui3n-table-columns-width: auto;
-    --ui3n-table-base-head-height: 36px;
-    --ui3n-table-group-actions-height: 48px;
-    --ui3n-table-body-row-height: 28px;
-    --ui3n-table-group-actions-bg-color: var(--color-bg-block-primary-default);
-    --ui3n-table-header-bg-color: var(--color-bg-table-header-default);
-    --ui3n-table-header-color: var(--color-text-table-primary-default);
-    --ui3n-table-header-font-size: 14px;
-    --ui3n-table-padding-inline: 16px;
-    --ui3n-table-row-color: var(--color-text-table-primary-default);
-    --ui3n-table-row-bg-color-selected: var(--color-bg-control-primary-hover);
-    --ui3n-table-row-checkbox-width: 16px;
-    --ui3n-table-cell-font-size: 12px;
-    --ui3n-table-nodata-height: 48px;
-    --ui3n-table-nodata-color: var(--color-text-control-secondary-default);
+    --_table-columns-width: var(--ui3n-table-columns-width, auto);
+    --_table-base-head-height: var(--ui3n-table-base-head-height, 36px);
+    --_table-group-actions-height: var(--ui3n-table-group-actions-height, 48px);
+    --_table-body-row-height: var(--ui3n-table-body-row-height, 28px);
+    --_table-group-actions-bg-color: var(--ui3n-table-group-actions-bg-color, var(--color-bg-block-primary-default));
+    --_table-header-bg-color: var(--ui3n-table-header-bg-color, var(--color-bg-table-header-default));
+    --_table-header-color: var(--ui3n-table-header-color, var(--color-text-table-primary-default));
+    --_table-header-font-size: var(--ui3n-table-header-font-size, 14px);
+    --_table-padding-inline: var(--ui3n-table-padding-inline, 16px);
+    --_table-row-color: var(--ui3n-table-row-color, var(--color-text-table-primary-default));
+    --_table-row-bg-color-selected: var(--ui3n-table-row-bg-color-selected, var(--color-bg-control-primary-hover));
+    --_table-row-checkbox-width: var(--ui3n-table-row-checkbox-width, 16px);
+    --_table-cell-font-size: var(--ui3n-table-cell-font-size, 12px);
+    --_table-nodata-height: var(--ui3n-table-nodata-height, 48px);
+    --_table-nodata-color: var(--ui3n-table-nodata-color, var(--color-text-control-secondary-default));
 
     position: relative;
     width: 100%;
@@ -561,22 +563,22 @@
     position: sticky;
     top: 0;
     width: 100%;
-    min-height: var(--ui3n-table-base-head-height);
-    height: var(--ui3n-table-base-head-height);
+    min-height: var(--_table-base-head-height);
+    height: var(--_table-base-head-height);
     display: grid;
-    grid-template-columns: var(--ui3n-table-columns-width);
-    background-color: var(--ui3n-table-header-bg-color);
-    padding-left: var(--ui3n-table-padding-inline);
+    grid-template-columns: var(--_table-columns-width);
+    background-color: var(--_table-header-bg-color);
+    padding-left: var(--_table-padding-inline);
     z-index: 5;
 
     &.withGroupActions {
-      height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
-      min-height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
-      padding-top: var(--ui3n-table-group-actions-height);
+      height: calc(var(--_table-base-head-height) + var(--_table-group-actions-height));
+      min-height: calc(var(--_table-base-head-height) + var(--_table-group-actions-height));
+      padding-top: var(--_table-group-actions-height);
     }
 
     .headerItemWrapper:not(:first-child) {
-      padding: 0 calc(var(--ui3n-table-padding-inline) / 4);
+      padding: 0 calc(var(--_table-padding-inline) / 4);
     }
   }
 
@@ -605,9 +607,9 @@
 
   .headerText {
     display: block;
-    font-size: var(--ui3n-table-header-font-size);
+    font-size: var(--_table-header-font-size);
     font-weight: 500;
-    color: var(--ui3n-table-header-color);
+    color: var(--_table-header-color);
     @include mixins.text-overflow-ellipsis();
   }
 
@@ -623,11 +625,11 @@
     left: 0;
     display: flex;
     width: 100%;
-    height: var(--ui3n-table-group-actions-height);
-    padding: 0 var(--ui3n-table-padding-inline);
+    height: var(--_table-group-actions-height);
+    padding: 0 var(--_table-padding-inline);
     justify-content: space-between;
     align-items: center;
-    background-color: var(--ui3n-table-group-actions-bg-color);
+    background-color: var(--_table-group-actions-bg-color);
     border-left: 1px solid var(--color-border-block-primary-default);
     border-top: 1px solid var(--color-border-block-primary-default);
     border-right: 1px solid var(--color-border-block-primary-default);
@@ -636,7 +638,7 @@
   .groupActionsBody {
     display: flex;
     height: 100%;
-    padding: 0 calc(var(--ui3n-table-padding-inline) / 2);
+    padding: 0 calc(var(--_table-padding-inline) / 2);
     flex-grow: 1;
   }
 
@@ -649,16 +651,16 @@
   .row {
     position: relative;
     width: 100%;
-    min-height: var(--ui3n-table-body-row-height);
+    min-height: var(--_table-body-row-height);
     border-left: 1px solid var(--color-border-table-primary-default);
     border-right: 1px solid var(--color-border-table-primary-default);
     border-bottom: 1px solid var(--color-border-block-primary-default);
     background-color: transparent;
 
     &:not(.customRow) {
-      padding-left: var(--ui3n-table-padding-inline);
+      padding-left: var(--_table-padding-inline);
       display: grid;
-      grid-template-columns: var(--ui3n-table-columns-width);
+      grid-template-columns: var(--_table-columns-width);
     }
 
     &.selectable {
@@ -671,14 +673,14 @@
   }
 
   .selected {
-    background-color: var(--ui3n-table-row-bg-color-selected);
+    background-color: var(--_table-row-bg-color-selected);
   }
 
   .rowCheckbox {
     position: absolute;
     top: 0;
     left: 16px;
-    width: var(--ui3n-table-row-checkbox-width);
+    width: var(--_table-row-checkbox-width);
     height: 100%;
     display: flex;
     justify-content: flex-start;
@@ -694,27 +696,27 @@
     align-items: center;
 
     &.bodyItemFirst {
-      padding-left: calc(var(--ui3n-table-padding-inline) * 1.5);
+      padding-left: calc(var(--_table-padding-inline) * 1.5);
     }
   }
 
   .cell {
-    font-size: var(--ui3n-table-cell-font-size);
+    font-size: var(--_table-cell-font-size);
     font-weight: 400;
-    color: var(--ui3n-table-row-color);
+    color: var(--_table-row-color);
   }
 
   .noData {
     position: relative;
     width: 100%;
-    height: var(--ui3n-table-nodata-height);
+    height: var(--_table-nodata-height);
     padding-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: var(--ui3n-table-cell-font-size);
+    font-size: var(--_table-cell-font-size);
     font-weight: 600;
-    color: var(--ui3n-table-nodata-color);
+    color: var(--_table-nodata-color);
   }
 
   .unusedPlace {
@@ -729,7 +731,7 @@
       width: max-content;
       min-width: 100%;
       display: grid;
-      grid-template-columns: var(--ui3n-table-columns-width);
+      grid-template-columns: var(--_table-columns-width);
     }
 
     .header {
@@ -746,15 +748,15 @@
 
     .headerItemSticky {
       position: sticky;
-      background-color: var(--ui3n-table-header-bg-color);
+      background-color: var(--_table-header-bg-color);
     }
 
     .headerItemFirst.headerItemSticky {
-      padding-left: var(--ui3n-table-padding-inline);
+      padding-left: var(--_table-padding-inline);
     }
 
     .headerItemWrapper:not(.headerItemFirst) {
-      padding: 0 calc(var(--ui3n-table-padding-inline) / 4);
+      padding: 0 calc(var(--_table-padding-inline) / 4);
     }
 
     .bodyItemSticky {
@@ -763,7 +765,7 @@
     }
 
     .bodyItemFirst.bodyItemSticky {
-      padding-left: calc(var(--ui3n-table-padding-inline) + var(--ui3n-table-padding-inline) * 1.5);
+      padding-left: calc(var(--_table-padding-inline) + var(--_table-padding-inline) * 1.5);
     }
 
     .row:hover .bodyItemSticky {
@@ -771,12 +773,12 @@
     }
 
     .row.selected .bodyItemSticky {
-      background-color: var(--ui3n-table-row-bg-color-selected);
+      background-color: var(--_table-row-bg-color-selected);
     }
 
     .rowCheckbox {
       position: sticky;
-      left: var(--ui3n-table-padding-inline);
+      left: var(--_table-padding-inline);
       z-index: 3;
     }
 

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

@@ -2,13 +2,10 @@
   import { computed, nextTick, onMounted, ref, watch, useCssModule } from 'vue';
   import type { Ui3nTabsEmits, Ui3nTabsProps, Ui3nTabsSlots } from './types';
 
+  /* colours and the indicator size keep their defaults in CSS */
   const props = withDefaults(defineProps<Ui3nTabsProps>(), {
     modelValue: 0,
     itemDirection: 'horizontal',
-    activeColor: 'var(--color-text-control-accent-default)',
-    inactiveColor: 'var(--color-text-control-primary-default)',
-    indicatorColor: 'var(--color-border-control-accent-default)',
-    indicatorSize: 2,
     indicatorPosition: 'normal',
   });
   const emits = defineEmits<Ui3nTabsEmits>();
@@ -19,13 +16,29 @@
   const tabs = ref<HTMLDivElement | null>(null);
   const activeIndex = ref(props.modelValue);
 
-  const tabsStyle = computed(() => ({
-    '--ui3n-tabs-active-color': props.activeColor,
-    '--ui3n-tabs-inactive-color': props.inactiveColor,
-    '--ui3n-tabs-indicator-color': props.indicatorColor,
-    '--ui3n-tabs-indicator-size': `${props.indicatorSize}px`,
-    '--ui3n-tabs-indicator-position': props.indicatorPosition === 'reverse' ? '100%' : '0',
-  }));
+  const tabsStyle = computed(() => {
+    const styles: Record<string, string> = {
+      '--ui3n-tabs-indicator-position': props.indicatorPosition === 'reverse' ? '100%' : '0',
+    };
+
+    if (props.activeColor) {
+      styles['--ui3n-tabs-active-color'] = props.activeColor;
+    }
+
+    if (props.inactiveColor) {
+      styles['--ui3n-tabs-inactive-color'] = props.inactiveColor;
+    }
+
+    if (props.indicatorColor) {
+      styles['--ui3n-tabs-indicator-color'] = props.indicatorColor;
+    }
+
+    if (props.indicatorSize !== undefined) {
+      styles['--ui3n-tabs-indicator-size'] = `${props.indicatorSize}px`;
+    }
+
+    return styles;
+  });
 
   function updateChildrenAttributes(): void {
     if (tabs.value?.children) {
@@ -89,6 +102,7 @@
   <div
     ref="tabs"
     :id="id"
+    data-ui3n="tabs"
     :style="tabsStyle"
     :class="[$style.ui3nTabs, itemDirection === 'vertical' && $style.vertical]"
     @click="onClick"
@@ -99,10 +113,14 @@
 
 <style lang="scss" module>
   .ui3nTabs {
-    --ui3n-tabs-height: 48px;
+    --_tabs-height: var(--ui3n-tabs-height, 48px);
+    --_tabs-active-color: var(--ui3n-tabs-active-color, var(--color-text-control-accent-default));
+    --_tabs-inactive-color: var(--ui3n-tabs-inactive-color, var(--color-text-control-primary-default));
+    --_tabs-indicator-color: var(--ui3n-tabs-indicator-color, var(--color-border-control-accent-default));
+    --_tabs-indicator-size: var(--ui3n-tabs-indicator-size, 2px);
 
     position: relative;
-    height: var(--ui3n-tabs-height);
+    height: var(--_tabs-height);
     display: flex;
     justify-content: center;
     align-items: stretch;
@@ -113,7 +131,7 @@
     cursor: pointer;
     position: relative;
     user-select: none;
-    color: var(--ui3n-tabs-inactive-color);
+    color: var(--_tabs-inactive-color);
 
     &:hover {
       background-color: var(--color-bg-control-secondary-default);
@@ -124,8 +142,8 @@
       content: '';
       left: 0;
       width: 100%;
-      bottom: var(--ui3n-tabs-indicator-position);
-      height: var(--ui3n-tabs-indicator-size);
+      bottom: var(--ui3n-tabs-indicator-position, 0);
+      height: var(--_tabs-indicator-size);
       background-color: transparent;
       transition: background-color 250ms ease-in-out;
     }
@@ -138,10 +156,10 @@
   }
 
   .active {
-    color: var(--ui3n-tabs-active-color);
+    color: var(--_tabs-active-color);
 
     &::after {
-      background-color: var(--ui3n-tabs-indicator-color);
+      background-color: var(--_tabs-indicator-color);
       transition: background-color 250ms ease-in-out;
     }
   }
@@ -152,8 +170,8 @@
 
     .item {
       &::after {
-        left: var(--ui3n-tabs-indicator-position);
-        width: var(--ui3n-tabs-indicator-size);
+        left: var(--ui3n-tabs-indicator-position, 0);
+        width: var(--_tabs-indicator-size);
         bottom: 0;
         height: 100%;
       }

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

@@ -141,6 +141,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="text"
     :class="[
       $style.ui3nText,
       disabled && $style.disabled,
@@ -187,22 +188,22 @@
 
 <style lang="scss" module>
   .ui3nText {
-    --ui3n-text-border-radius: 4px;
-    --ui3n-text-label-font-size: 12px;
-    --ui3n-text-font-size: 13px;
-    --ui3n-text-padding-inline: 8px;
-    --ui3n-text-padding-block: 8px;
+    --_text-border-radius: var(--ui3n-text-border-radius, 4px);
+    --_text-label-font-size: var(--ui3n-text-label-font-size, 12px);
+    --_text-font-size: var(--ui3n-text-font-size, 13px);
+    --_text-padding-inline: var(--ui3n-text-padding-inline, 8px);
+    --_text-padding-block: var(--ui3n-text-padding-block, 8px);
 
     position: relative;
     width: 100%;
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     padding: 1px;
   }
 
   .label {
     display: block;
     width: 100%;
-    font-size: var(--ui3n-text-label-font-size);
+    font-size: var(--_text-label-font-size);
     line-height: 1.33;
     font-weight: 600;
     color: var(--color-text-control-primary-default);
@@ -212,9 +213,9 @@
   .body {
     position: relative;
     width: 100%;
-    padding: var(--ui3n-text-padding-block) 0;
+    padding: var(--_text-padding-block) 0;
     background-color: var(--color-bg-control-secondary-default);
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     transition: all 0.2s ease-in-out;
 
     &:hover {
@@ -239,11 +240,11 @@
     box-sizing: border-box;
     position: relative;
     width: 100%;
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     background-color: var(--color-bg-control-secondary-default);
-    padding: 0 var(--ui3n-text-padding-inline);
-    font-family: var(--ui3n-font-family);
-    font-size: var(--ui3n-text-font-size);
+    padding: 0 var(--_text-padding-inline);
+    font-family: inherit;
+    font-size: var(--_text-font-size);
     line-height: 1.23;
     font-weight: 400;
     color: var(--color-text-control-primary-default);
@@ -252,7 +253,7 @@
     &::placeholder {
       color: var(--color-text-control-secondary-default);
       font-style: italic;
-      font-size: var(--ui3n-text-font-size);
+      font-size: var(--_text-font-size);
       line-height: 1.23;
       font-weight: 400;
     }

package/src/components/ui3n-tooltip/types.ts

@@ -1,4 +1,5 @@
 import { VNode } from 'vue';
+import type { Ui3nVirtualElement } from '../ui3n-menu/types';
 
 /**
  * Tooltip placement types
@@ -49,9 +50,14 @@ export interface Ui3nTooltipProps {
    * Tooltip placement
    */
   placement?: Ui3nTooltipPlacement;
+  /**
+   * External element the tooltip is positioned against.
+   * When set, this node is the floating-ui reference and receives hover/click listeners.
+   */
+  triggerElement?: HTMLElement | Ui3nVirtualElement;
   /**
    * Position strategy
-   * @default 'absolute'
+   * @default 'absolute' (or 'fixed' when triggerElement is set)
    */
   positionStrategy?: 'absolute' | 'fixed';
   /**
@@ -107,7 +113,7 @@ export interface Ui3nTooltipSlots {
   /**
    * Default slot
    */
-  default: () => VNode;
+  default?: () => VNode;
   /**
    * Content slot
    */

package/src/components/ui3n-tooltip/ui3n-tooltip-container.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Ui3nTooltip from './ui3n-tooltip.vue';
+  import type { TooltipInstance, Ui3nTooltipShowOptions } from '../../plugins/tooltips/types';
+
+  const items = ref<TooltipInstance[]>([]);
+
+  function add(item: TooltipInstance) {
+    items.value.push(item);
+  }
+
+  function remove(id: string) {
+    items.value = items.value.filter(item => item.id !== id);
+  }
+
+  function removeByKind(kind: 'show' | 'attach') {
+    items.value = items.value.filter(item => item.kind !== kind);
+  }
+
+  function removeByTarget(target: HTMLElement) {
+    items.value = items.value.filter(item => !(item.kind === 'attach' && item.target === target));
+  }
+
+  function update(id: string, patch: Partial<Ui3nTooltipShowOptions>) {
+    const item = items.value.find(entry => entry.id === id);
+    if (item) {
+      Object.assign(item, patch);
+    }
+  }
+
+  function clearAll() {
+    items.value = [];
+  }
+
+  function tooltipBind(item: TooltipInstance) {
+    return {
+      id: item.id,
+      content: item.content,
+      maxContentWidth: item.maxContentWidth,
+      color: item.color,
+      textColor: item.textColor,
+      placement: item.placement,
+      positionStrategy: item.positionStrategy ?? 'fixed',
+      offsetX: item.offsetX,
+      offsetY: item.offsetY,
+      trigger: item.trigger,
+      modelValue: item.modelValue,
+      disabled: item.disabled,
+      triggerElement: item.target,
+    };
+  }
+
+  defineExpose({ add, remove, removeByKind, removeByTarget, update, clearAll });
+</script>
+
+<template>
+  <div
+    id="ui3n-tooltips-container"
+    data-ui3n="tooltip-container"
+    :class="$style.container"
+  >
+    <ui3n-tooltip
+      v-for="item in items"
+      :key="item.id"
+      v-bind="tooltipBind(item)"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+  .container {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 2000;
+  }
+</style>