@v1nt1248/3nclient-lib 0.1.1 → 0.1.3

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

@@ -0,0 +1,319 @@
+<script setup lang="ts" generic="T extends Ui3nTableBodyBaseItem">
+import { useTable } from './composables/useTable';
+import type {
+  Ui3nTableBodyBaseItem,
+  Ui3nTableEmits,
+  Ui3nTableProps,
+  Ui3nTableSlots,
+} from './types';
+import Ui3nButton from '../ui3n-button.vue';
+import Ui3nCheckbox from '../ui3n-checkbox.vue';
+import Ui3nTableSortIcon from '../ui3n-table-sort-icon.vue';
+
+const props = defineProps<Ui3nTableProps<T>>();
+const emits = defineEmits<Ui3nTableEmits<T>>();
+defineSlots<Ui3nTableSlots<T, string & keyof T>>();
+
+const {
+  tableEl,
+  currentConfig,
+  visibleColumns,
+  showGroupActionsRow,
+  selectedRowsArray,
+  selectedRowsSize,
+  closeGroupActionsRow,
+  getRowKey,
+  isRowSelected,
+  getRowStyle,
+  processSelection,
+  toggleSelectedRows,
+  changeSortOrder,
+} = useTable(props, emits);
+
+const eventsHandlers = {
+  select: processSelection,
+};
+</script>
+
+<template>
+  <div ref="tableEl" :class="$style.table">
+    <div :class="[$style.header, showGroupActionsRow && $style.withGroupActions]">
+      <!-- group actions -->
+      <div v-if="showGroupActionsRow" :class="$style.groupActions">
+        <ui3n-checkbox
+          :indeterminate="selectedRowsSize < body.content.length && selectedRowsSize !== 0"
+          :model-value="selectedRowsSize === body.content.length"
+          @change="toggleSelectedRows"
+        >
+          Selected: {{ selectedRowsSize }}
+        </ui3n-checkbox>
+
+        <div :class="$style.groupActionsBody">
+          <slot name="group-actions" :selected-rows="selectedRowsArray" />
+        </div>
+
+        <ui3n-button
+          type="secondary"
+          @click="closeGroupActionsRow"
+        >
+          Cancel
+        </ui3n-button>
+      </div>
+      <!-- table header  -->
+      <template
+        v-for="h in visibleColumns"
+        :key="h.key"
+      >
+        <div
+          :class="[
+            $style.headerItemWrapper,
+            h.sortable && $style.sortable,
+            h.sortable && currentConfig.sortOrder?.field === h.key && $style.sortableActive,
+          ]"
+          :style="h.headCellStyle"
+        >
+          <div
+            :class="$style.headerItem"
+            :style="h.headCellStyle"
+            v-on="h.sortable ? { click: () => changeSortOrder(h.key) }: {}"
+          >
+            <slot :name="`header-cell-${h.key as string & keyof T}`">
+              <span :class="$style.headerText">
+                {{ h.text }}
+              </span>
+            </slot>
+            <ui3n-table-sort-icon
+              v-if="h.sortable && currentConfig.sortOrder?.field === h.key"
+              :value="currentConfig.sortOrder?.direction"
+              size="16"
+            />
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- table body -->
+    <div :class="$style.body">
+      <template v-if="$slots['row']">
+        <div
+          v-for="(row, rowIndex) in body.content"
+          :class="[
+            $style.row,
+            isRowSelected(row) && $style.selected,
+            config.selectable && $style.selectable,
+          ]"
+          :key="getRowKey(row, rowIndex)"
+        >
+          <slot
+            name="body-row"
+            :row="row"
+            :row-style="getRowStyle(row)"
+            :row-index="rowIndex"
+            :events="eventsHandlers"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <div
+          v-for="(row, rowIndex) in body.content"
+          :class="[
+            $style.row,
+            isRowSelected(row) && $style.selected,
+            config.selectable && $style.selectable,
+          ]"
+          :key="getRowKey(row, rowIndex)"
+          :style="getRowStyle(row)"
+        >
+          <div
+            v-if="config.selectable"
+            :class="$style.rowCheckbox"
+          >
+            <ui3n-checkbox
+              :model-value="isRowSelected(row)"
+              @change="processSelection(row)"
+            />
+          </div>
+
+          <template
+            v-for="(col, colIndex) in visibleColumns"
+            :key="col.key"
+          >
+            <div :class="[$style.bodyItem, colIndex === 0 && $style.bodyItemFirst]">
+              <slot
+                :name="`body-row-cell-${(col.key as string & keyof T)}`"
+                :row="row"
+                :row-index="rowIndex"
+                :cell="row[col.key]"
+              >
+                <span :class="$style.cell">
+                  {{ row[col.key] }}
+                </span>
+              </slot>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@import "../../assets/styles/mixins.scss";
+
+.table {
+  --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);
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  overflow-y: auto;
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  min-height: var(--ui3n-table-header-height);
+  height: var(--ui3n-table-base-head-height);
+  display: grid;
+  grid-template-columns: var(--ui3n-table-columns-width);
+  background-color: var(--color-bg-table-header-default);
+  padding-left: var(--spacing-m);
+  z-index: 5;
+
+  &.withGroupActions {
+    height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
+    padding-top: var(--ui3n-table-group-actions-height);
+  }
+
+  .headerItemWrapper:not(:first-child) {
+    padding: 0 var(--spacing-xs);
+  }
+}
+
+.headerItemWrapper {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headerItem {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  user-select: none;
+}
+
+.sortable {
+  .headerItem {
+    cursor: pointer;
+  }
+}
+
+.headerText {
+  display: block;
+  font-size: var(--font-14);
+  font-weight: 500;
+  color: var(--color-text-table-primary-default);
+  @include text-overflow-ellipsis;
+}
+
+.sortableActive {
+  .headerItem {
+    gap: var(--spacing-s);
+  }
+}
+
+.groupActions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: var(--ui3n-table-group-actions-height);
+  padding: 0 var(--spacing-m);
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--ui3n-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);
+}
+
+.groupActionsBody {
+  display: flex;
+  height: 100%;
+  padding: 0 var(--spacing-s);
+  flex-grow: 1;
+}
+
+.body {
+  position: relative;
+  width: 100%;
+}
+
+.row {
+  position: relative;
+  width: 100%;
+  min-height: var(--ui3n-table-body-row-height);
+  display: grid;
+  grid-template-columns: var(--ui3n-table-columns-width);
+  padding-left: var(--spacing-m);
+  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;
+
+  &.selectable {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(--color-bg-control-primary-hover);
+  }
+}
+
+.selected {
+  background-color: var(--color-bg-control-primary-hover);
+}
+
+.rowCheckbox {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  width: var(--spacing-m);
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  z-index: 1;
+}
+
+.bodyItem {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  &.bodyItemFirst {
+    padding-left: var(--spacing-ml);
+  }
+}
+
+.cell {
+  font-size: var(--font-12);
+  font-weight: 400;
+  color: var(--color-text-table-primary-default);
+}
+</style>

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

@@ -15,10 +15,13 @@
 </script>
 
 <template>
-  <ui3n-icon
-    :icon="props.value === 'asc' ? 'arrow-downward' : 'arrow-upward'"
-    :width="iconSize"
-    :height="iconSize"
-    :color="iconColor"
-  />
+  <transition mode="out-in" name="fade">
+    <ui3n-icon
+      :key="value === 'asc' ? 'arrow-downward' : 'arrow-upward'"
+      :icon="value === 'asc' ? 'arrow-downward' : 'arrow-upward'"
+      :width="iconSize"
+      :height="iconSize"
+      :color="iconColor"
+    />
+  </transition>
 </template>

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/dist/components/ui3n-table.vue.d.ts

@@ -1,36 +0,0 @@
-import { ListingEntryTypeExtended, EntityAction } from '../constants';
-
-export interface Ui3nTableProps {
-    items: ListingEntryTypeExtended[];
-    textIfEmpty?: string;
-}
-export interface Ui3nTableEmits {
-    (ev: 'go', name: string): void;
-    (ev: 'action', value: {
-        action: EntityAction;
-        entity: ListingEntryTypeExtended;
-    }): void;
-}
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Ui3nTableProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    go: (name: string) => void;
-    action: (value: {
-        action: EntityAction;
-        entity: ListingEntryTypeExtended;
-    }) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Ui3nTableProps>>> & {
-    onGo?: ((name: string) => any) | undefined;
-    onAction?: ((value: {
-        action: EntityAction;
-        entity: ListingEntryTypeExtended;
-    }) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};