@v1nt1248/3nclient-lib 0.1.2 → 0.1.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -34,6 +34,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.4",
     "@iconify-icons/ic": "1.2.13",
     "@iconify/vue": "4.1.2",
     "dayjs": "1.11.12",

package/src/components/index.ts

@@ -40,8 +40,8 @@ import type {
   Ui3nDialogProps,
   Ui3nDialogEvent,
 } from './ui3n-dialog.vue';
-import Ui3nMenu from './ui3n-menu.vue';
-import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue';
+import Ui3nMenu from './ui3n-menu/ui3n-menu.vue';
+import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu/types';
 import Ui3nList from './ui3n-list.vue';
 import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list.vue';
 import Ui3nVirtualScroll from './ui3n-virtual-scroll.vue';

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

@@ -0,0 +1,23 @@
+import { VNode } from 'vue';
+
+export interface Ui3nMenuProps {
+  positionStrategy?: 'absolute' | 'fixed';
+  offsetX?: number;
+  offsetY?: number;
+  closeOnClick?: boolean;
+  closeOnClickOutside?: boolean;
+  disabled?: boolean;
+}
+
+export interface Ui3nMenuEmits {
+  (ev: 'open'): void;
+  (ev: 'opened'): void;
+  (ev: 'close'): void;
+  (ev: 'closed'): void;
+  (ev: 'click-outside'): void;
+}
+
+export interface Ui3nMenuSlots {
+  default: () => VNode;
+  menu?: () => VNode;
+}

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

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
+import { default as vClickOutside } from '../../directives/ui3n-click-outside';
+import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots } from './types';
+
+const props = withDefaults(defineProps<Ui3nMenuProps>(), {
+  positionStrategy: 'absolute',
+  offsetX: 0,
+  offsetY: 0,
+  closeOnClick: true,
+  closeOnClickOutside: true,
+  disabled: false,
+});
+const emits = defineEmits<Ui3nMenuEmits>();
+defineSlots<Ui3nMenuSlots>();
+
+const menuElement = ref<HTMLDivElement | null>(null);
+const menuTriggerElement = ref<HTMLDivElement | null>(null);
+const menuContentElement = ref<HTMLDivElement | null>(null);
+const isShow = ref(false);
+
+const { floatingStyles, isPositioned } = useFloating(
+  menuTriggerElement,
+  menuContentElement,
+  {
+    placement: 'bottom-start',
+    strategy: props.positionStrategy,
+    middleware: [
+      offset({
+        mainAxis: props.offsetY,
+        crossAxis: props.offsetX + 2,
+      }),
+      flip({
+        fallbackAxisSideDirection: 'end',
+        flipAlignment: false,
+        fallbackPlacements: ['bottom-end'],
+      }),
+      shift(),
+    ],
+    whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+  },
+);
+
+function toggleMenu() {
+  isShow.value = !isShow.value;
+  isShow.value ? emits('open') : emits('close');
+}
+
+function onContentClick() {
+  isShow.value = false;
+  emits('close');
+}
+
+function onClickOutside() {
+  emits('click-outside');
+  if (props.closeOnClickOutside) {
+    isShow.value = false;
+    emits('close');
+  }
+}
+
+watch(
+  isPositioned,
+  (val) => {
+    val ? emits('opened') : emits('closed');
+  },
+);
+</script>
+
+<template>
+  <div ref="menuElement" :class="$style.menu">
+    <div
+      ref="menuTriggerElement"
+      :class="$style.trigger"
+      @click.stop="toggleMenu"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-if="isShow"
+      ref="menuContentElement"
+      v-click-outside="onClickOutside"
+      :style="floatingStyles"
+      :class="$style.content"
+      v-on="props.closeOnClick ? { click: onContentClick } : {}"
+    >
+      <slot name="menu" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@import "../../assets/styles/mixins";
+
+.menu {
+  --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
+
+  position: relative;
+  max-width: max-content;
+  overflow: visible;
+}
+
+.trigger {
+  position: relative;
+  max-width: max-content;
+}
+
+.content {
+  position: absolute;
+  border-radius: 4px;
+  background-color: var(--ui3n-menu-content-bg);
+  z-index: 1000;
+  @include elevation(3);
+}
+</style>

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

@@ -13,8 +13,8 @@ export type Ui3nTableConfig<T extends Ui3nTableBodyBaseItem, K extends keyof T =
   tableName?: string;
   sortOrder?: Ui3nTableSort<T>;
   selectable?: 'single' | 'multiple';
-  // draggebleRows?: boolean; // ToDo this will be done in the next version
-  // draggebleColumns?: boolean; // ToDo this will be done in the next version
+  // draggableRows?: boolean; // ToDo this will be done in the next version
+  // draggableColumns?: boolean; // ToDo this will be done in the next version
   columnStyle?: { [P in Omit<K, 'id'> as string | number]: Record<string, string> };
   fieldAsRowKey?: keyof T;
 };

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

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends Ui3nTableBodyBaseItem">
 import { useTable } from './composables/useTable';
-import {
+import type {
   Ui3nTableBodyBaseItem,
   Ui3nTableEmits,
   Ui3nTableProps,

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

@@ -0,0 +1,41 @@
+import { VNode } from 'vue';
+
+export type Ui3nTooltipPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';
+
+export interface Ui3nTooltipProps {
+  modelValue?: boolean;
+  content?: string;
+  color?: string;
+  textColor?: string;
+  placement?: Ui3nTooltipPlacement;
+  positionStrategy?: 'absolute' | 'fixed';
+  offsetX?: string | number;
+  offsetY?: string | number;
+  trigger?: 'click' | 'hover' | 'manual';
+  disabled?: boolean;
+}
+
+export interface Ui3nTooltipEmits {
+  (ev: 'open'): void;
+  (ev: 'opened'): void;
+  (ev: 'close'): void;
+  (ev: 'closed'): void;
+  (ev: 'update:modelValue', value: boolean): void;
+}
+
+export interface Ui3nTooltipSlots {
+  default: () => VNode;
+  content?: () => VNode;
+}

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

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { useFloating, offset, autoUpdate, arrow } from '@floating-ui/vue';
+import type { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots } from './types';
+
+const baseOffset = 5;
+
+const props = withDefaults(
+  defineProps<Ui3nTooltipProps>(),
+  {
+    color: 'var(--color-bg-control-secondary-default)',
+    textColor: 'var(--color-text-control-primary-default)',
+    placement: 'top',
+    positionStrategy: 'absolute',
+    offsetX: 0,
+    offsetY: 0,
+    trigger: 'hover',
+  },
+);
+
+const emits = defineEmits<Ui3nTooltipEmits>();
+defineSlots<Ui3nTooltipSlots>();
+
+const referenceElEventHandler = {
+  ...(props.trigger === 'hover' && !props.disabled && {
+    mouseenter: () => handleMouseEvents(true),
+    mouseleave: () => handleMouseEvents(false),
+  }),
+  ...(props.trigger === 'click' && !props.disabled && {
+    click: () => handleMouseEvents(!showTooltip.value),
+  }),
+};
+
+const showTooltip = ref(false);
+const referenceEl = ref(null);
+const floatingEl = ref(null);
+const floatingArrowEl = ref(null);
+
+const baseOffsetCssValue = computed(() => `${-baseOffset}px`);
+const arrowSizeCssValue = computed(() => `${baseOffset}px`);
+const mainPlacement = computed(() => {
+  const [part1, _] = props.placement.split('-');
+  return part1;
+});
+const offsetOptions = computed(() => {
+  const options = {
+    mainAxis: 0,
+    crossAxis: 0,
+  };
+  switch (mainPlacement.value) {
+    case 'top':
+      options.mainAxis = -1 * Number(props.offsetY) + baseOffset;
+      options.crossAxis = Number(props.offsetX);
+      break;
+    case 'bottom':
+      options.mainAxis = Number(props.offsetY) + baseOffset;
+      options.crossAxis = Number(props.offsetX);
+      break;
+    case 'left':
+      options.mainAxis = -1 * Number(props.offsetX) + baseOffset;
+      options.crossAxis = Number(props.offsetY);
+      break;
+    case 'right':
+      options.mainAxis = Number(props.offsetX) + baseOffset;
+      options.crossAxis = Number(props.offsetY);
+      break;
+  }
+  return options;
+});
+
+const { floatingStyles, isPositioned, middlewareData } = useFloating(referenceEl, floatingEl, {
+  open: showTooltip,
+  placement: props.placement,
+  strategy: props.positionStrategy,
+  middleware: [
+    offset(offsetOptions.value),
+    arrow({ element: floatingArrowEl, padding: 8 }),
+  ],
+  whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+});
+
+function handleMouseEvents(val: boolean) {
+  showTooltip.value = val;
+  val ? emits('open') : emits('close');
+  emits('update:modelValue', val);
+}
+
+watch(
+  () => props.modelValue,
+  (val) => props.trigger === 'manual' && (showTooltip.value = val),
+  { immediate: true },
+);
+
+watch(
+  isPositioned,
+  (val) => {
+    val ? emits('opened') : emits('closed');
+  },
+);
+</script>
+
+<template>
+  <div :class="$style.tooltip">
+    <div
+      ref="referenceEl"
+      :class="$style.reference"
+      v-on="referenceElEventHandler"
+    >
+      <slot name="default" />
+    </div>
+
+    <div ref="floatingEl" :class="$style.floating" :style="floatingStyles" v-if="showTooltip">
+      <slot name="content">
+        <div :class="$style.content">
+          {{ props.content }}
+          <div
+            ref="floatingArrowEl"
+            :class="[$style.arrow, $style[`arrow-${mainPlacement}`]]"
+            :style="{
+              left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
+              top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
+            }"
+          />
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tooltip {
+  --ui3n-tooltip-bg-color: v-bind(color);
+  --ui3n-tooltip-text-color: v-bind(textColor);
+
+  position: relative;
+  width: max-content;
+}
+
+.reference {
+  position: relative;
+}
+
+.floating {
+  width: max-content;
+  z-index: 5;
+}
+
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+
+  &-top,
+  &-bottom {
+    border-style: solid;
+    border-width: 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
+    border-color: transparent transparent var(--ui3n-tooltip-bg-color) transparent;
+  }
+
+  &-top {
+    bottom: v-bind(baseOffsetCssValue);
+    transform: rotate(180deg);
+  }
+
+  &-bottom {
+    top: v-bind(baseOffsetCssValue);
+    transform: rotate(0deg);
+  }
+
+  &-left,
+  &-right {
+    border-style: solid;
+    border-width: v-bind(arrowSizeCssValue) 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
+    border-color: transparent transparent transparent var(--ui3n-tooltip-bg-color);
+  }
+
+  &-left {
+    right: v-bind(baseOffsetCssValue);
+    transform: rotate(0deg);
+  }
+
+  &-right {
+    left: v-bind(baseOffsetCssValue);
+    transform: rotate(180deg);
+  }
+}
+
+.content {
+  position: relative;
+  max-width: 400px;
+  padding: var(--spacing-xs) var(--spacing-s);
+  border-radius: var(--spacing-xs);
+  font-size: var(--font-11);
+  line-height: var(--font-12);
+  font-weight: 400;
+  background-color: var(--ui3n-tooltip-bg-color);
+  color: var(--ui3n-tooltip-text-color);
+}
+</style>

package/src/components/ui3n-menu.vue

@@ -1,136 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { computed, onMounted, ref } from 'vue';
-import { default as vClickOutside } from '../directives/ui3n-click-outside';
-
-export interface Ui3nMenuProps {
-  offsetX?: number;
-  offsetY?: number;
-  closeOnClick?: boolean;
-  closeOnClickOutside?: boolean;
-  disabled?: boolean;
-}
-
-export interface Ui3nMenuEmits {
-  (ev: 'open'): void;
-  (ev: 'opened'): void;
-  (ev: 'close'): void;
-  (ev: 'closed'): void;
-  (ev: 'click-outside'): void;
-}
-
-export interface Ui3nMenuSlots {
-  default: () => any;
-  menu?: () => any;
-}
-
-const props = withDefaults(defineProps<Ui3nMenuProps>(), {
-  offsetX: 0,
-  offsetY: 0,
-  closeOnClick: true,
-  closeOnClickOutside: true,
-  disabled: false,
-});
-const emits = defineEmits<Ui3nMenuEmits>();
-defineSlots<Ui3nMenuSlots>();
-
-const menuElement = ref<HTMLDivElement | null>(null);
-const menuTriggerElement = ref<HTMLDivElement | null>(null);
-const isShow = ref(false);
-const defaultAnimationDuration = 400;
-const menuContentStyle = computed(() => {
-  if (!props.offsetX && !props.offsetY) {
-    return {};
-  }
-  return {
-    ...(props.offsetX && { left: `${props.offsetX}px` }),
-    ...(props.offsetY && { top: `${menuTriggerElement.value!.clientHeight + props.offsetY}px` }),
-  };
-});
-
-onMounted(() => {
-  menuElement.value!.style.setProperty('--ui3n-menu-animation-duration', `${defaultAnimationDuration}ms`);
-});
-
-function toggleMenu() {
-  isShow.value = !isShow.value;
-}
-
-function onContentClick() {
-  isShow.value = false;
-}
-
-function onClickOutside() {
-  emits('click-outside');
-  if (props.closeOnClickOutside) {
-    isShow.value = false;
-  }
-}
-</script>
-
-<template>
-  <div ref="menuElement" :class="$style.menu">
-    <div
-      ref="menuTriggerElement"
-      :class="$style.trigger"
-      @click.stop="toggleMenu"
-    >
-      <slot />
-    </div>
-
-    <transition
-      name="menu"
-      :duration="defaultAnimationDuration"
-      @before-enter="emits('open')"
-      @after-enter="emits('opened')"
-      @before-leave="emits('close')"
-      @after-leave="emits('closed')"
-    >
-      <div
-        v-if="isShow"
-        v-click-outside="onClickOutside"
-        :style="menuContentStyle"
-        :class="$style.content"
-        v-on="props.closeOnClick ? { click: onContentClick } : {}"
-      >
-        <slot name="menu" />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style lang="scss" module>
-@import "../assets/styles/mixins";
-
-.menu {
-  --ui3n-menu-animation-duration: 400ms;
-  --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
-
-  position: relative;
-  overflow: visible;
-}
-
-.trigger {
-  position: relative;
-}
-
-.content {
-  position: absolute;
-  border-radius: 4px;
-  background-color: var(--ui3n-menu-content-bg);
-  z-index: 1000;
-  @include elevation(3);
-}
-</style>
-
-<style lang="scss" scoped>
-.menu-enter-active,
-.menu-leave-active {
-  transition: opacity var(--ui3n-menu-animation-duration);
-}
-
-.menu-enter-from,
-.menu-leave-to {
-  opacity: 0;
-}
-</style>