@v1nt1248/3nclient-lib 0.1.0 → 0.1.2

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+export interface Ui3nStepLineBarProps {
+  label: string;
+  current: number;
+  steps: number;
+}
+
+withDefaults(
+  defineProps<Ui3nStepLineBarProps>(),
+  {
+    current: 1,
+  },
+);
+</script>
+
+<template>
+  <div :class="$style.stepLineBar">
+    <div :class="$style.label">
+      {{ label }}
+    </div>
+
+    <div :class="$style.body">
+      <div v-for="step in steps" :class="[$style.step, step <= current && $style.active]" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.stepLineBar {
+  --ui3n-step-line-bar-steps: v-bind(steps);
+
+  position: relative;
+  width: 100%;
+}
+
+.label {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  font-size: var(--font-14);
+  font-weight: 500;
+  line-height: var(--font-20);
+  color: var(--color-text-block-accent-default);
+  margin-bottom: var(--spacing-m);
+}
+
+.body {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-s);
+}
+
+.step {
+  position: relative;
+  width: calc((100% - (calc(var(--ui3n-step-line-bar-steps) - 1) * var(--spacing-s))) / var(--ui3n-step-line-bar-steps));
+  height: var(--spacing-xs);
+  border-radius: var(--spacing-xs);
+  background-color: var(--color-bg-control-secondary-default);
+}
+
+.active {
+  background-color: var(--color-bg-control-accent-default);
+}
+</style>

package/src/components/ui3n-table/composables/useTable.ts

@@ -0,0 +1,206 @@
+import { computed, onMounted, type Ref, ref, watch, UnwrapRef } from 'vue';
+import { get, isEmpty, size } from 'lodash';
+import {
+  Ui3nTableBodyBaseItem,
+  Ui3nTableConfig,
+  Ui3nTableEmits,
+  Ui3nTableProps,
+  Ui3nTableSort,
+} from '@/components/ui3n-table/types';
+import type { Ui3nCheckboxValue } from '../../ui3n-checkbox.vue';
+
+export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<T>, emits: Ui3nTableEmits<T>) {
+  const tableEl = ref<HTMLDivElement | null>(null);
+  const currentConfig = ref<Pick<Ui3nTableConfig<T>, 'sortOrder' | 'fieldAsRowKey'>>({
+    sortOrder: setInitialSortOrder(),
+    fieldAsRowKey: setFieldAsRowKey(),
+  });
+  const selectedRows: Ref<Set<T> | Array<T[keyof T]>> = !!currentConfig.value?.fieldAsRowKey
+    ? ref([])
+    : (ref(new Set()) as Ref<Set<T>>);
+  const hasGroupActionsRow = ref(false);
+
+  const isRowKeyUsed = computed(() => !!currentConfig.value.fieldAsRowKey);
+  const visibleColumns = computed(() => props.head.filter(h => !h.hidden));
+  const selectedRowsArray = computed(() =>
+    isRowKeyUsed.value
+      ? props.body.content.filter(row =>
+          (selectedRows.value as Array<T[keyof T]>).includes(row[currentConfig.value.fieldAsRowKey as keyof T]),
+        )
+      : Array.from(selectedRows.value as Set<T>),
+  );
+  const selectedRowsSize = computed(() =>
+    isRowKeyUsed.value ? size(selectedRows.value) : (selectedRows.value as Set<T>).size,
+  );
+  const showGroupActionsRow = computed(() => props.config?.selectable === 'multiple' && hasGroupActionsRow.value);
+
+  onMounted(() => {
+    tableEl.value && setColumnWidth(tableEl.value);
+  });
+
+  function setColumnWidth(el: HTMLDivElement) {
+    const { config = {}, head } = props;
+    const { columnStyle } = config;
+    const keys = head.map(h => h.key);
+    const columnsWidthValue = keys.reduce((res, key, index) => {
+      const width = get(columnStyle, [key, 'width'], '1fr');
+      res = index === 0 ? `${width}` : `${res} ${width}`;
+      return res;
+    }, '');
+    el && el.style.setProperty('--ui3n-table-columns-width', columnsWidthValue);
+  }
+
+  function setFieldAsRowKey() {
+    const { config = {}, body } = props;
+    const { fieldAsRowKey } = config;
+    if (fieldAsRowKey && fieldAsRowKey in get(body, ['content', 0], {})) return fieldAsRowKey;
+
+    if ('id' in get(body, ['content', 0], {})) return 'id';
+
+    return undefined;
+  }
+
+  function setInitialSortOrder(): Ui3nTableSort<T> {
+    const { config = {}, head } = props;
+    const { sortOrder } = config;
+    if (!isEmpty(sortOrder)) {
+      return sortOrder;
+    }
+
+    for (const h of head) {
+      const { key, sortable } = h;
+      if (sortable) {
+        return {
+          field: key,
+          direction: 'desc',
+        };
+      }
+    }
+
+    return {} as Ui3nTableSort<T>;
+  }
+
+  function getRowKey(row: T, index: number) {
+    return isRowKeyUsed.value ? (row[currentConfig.value.fieldAsRowKey as keyof T] as string | number) : index;
+  }
+
+  function isRowSelected(row: T): boolean {
+    if (isRowKeyUsed.value) {
+      return !!(selectedRows.value as Array<T[keyof T]>).find(
+        keyValue => keyValue === row[currentConfig.value.fieldAsRowKey as keyof T],
+      );
+    }
+
+    return (selectedRows.value as Set<T>).has(row);
+  }
+
+  function getRowStyle(row: T): Record<string, string> {
+    if (isEmpty(props.body.rowsStyle) || !isRowKeyUsed.value) return {};
+
+    const rowKey = row[currentConfig.value.fieldAsRowKey as keyof T] as string | number;
+    return get(props, ['body', 'rowsStyle', rowKey], {});
+  }
+
+  function closeGroupActionsRow() {
+    hasGroupActionsRow.value = false;
+    toggleSelectedRows(false);
+  }
+
+  function selectInSingleMode(row: T) {
+    if (isRowSelected(row)) {
+      isRowKeyUsed.value && ((selectedRows.value as Array<T[keyof T]>) = []);
+      !isRowKeyUsed.value && (selectedRows.value as Set<T>).clear();
+    } else {
+      if (isRowKeyUsed.value) {
+        (selectedRows.value as Array<T[keyof T]>) = [row[currentConfig.value?.fieldAsRowKey as keyof T]];
+      } else {
+        (selectedRows.value as Set<T>).clear();
+        (selectedRows.value as Set<T>).add(row);
+      }
+    }
+  }
+
+  function selectInMultipleMode(row: T) {
+    if (isRowSelected(row)) {
+      if (!isRowKeyUsed.value) {
+        (selectedRows.value as Set<T>).delete(row);
+      } else {
+        const index = (selectedRows.value as Array<T[keyof T]>).findIndex(
+          keyValue => keyValue === row[currentConfig.value.fieldAsRowKey as keyof T],
+        );
+        (selectedRows.value as Array<T[keyof T]>).splice(index, 1);
+      }
+    } else {
+      isRowKeyUsed.value &&
+        (selectedRows.value as Array<T[keyof T]>).push(row[currentConfig.value.fieldAsRowKey as keyof T]);
+      !isRowKeyUsed.value && (selectedRows.value as Set<T>).add(row);
+    }
+  }
+
+  function processSelection(row: T, withoutEvents?: boolean) {
+    const { selectable } = props.config;
+
+    if (selectable === 'single') {
+      selectInSingleMode(row);
+    } else {
+      selectInMultipleMode(row);
+    }
+
+    !withoutEvents && emits('select:row', selectedRowsArray.value);
+  }
+
+  function toggleSelectedRows(val: Ui3nCheckboxValue) {
+    if (props.config.selectable !== 'multiple') return;
+
+    if (!!val) {
+      for (const item of props.body.content) {
+        if (!isRowSelected(item)) {
+          processSelection(item, true);
+        }
+      }
+    } else {
+      isRowKeyUsed.value && ((selectedRows.value as Array<T[keyof T]>) = []);
+      !isRowKeyUsed.value && (selectedRows.value as Set<T>).clear();
+    }
+
+    emits('select:row', selectedRowsArray.value);
+  }
+
+  function changeSortOrder(field: keyof T) {
+    if (currentConfig.value.sortOrder?.field === field) {
+      currentConfig.value.sortOrder.direction = currentConfig.value.sortOrder?.direction === 'asc' ? 'desc' : 'asc';
+    } else {
+      currentConfig.value.sortOrder!.field = field as UnwrapRef<keyof T>;
+      currentConfig.value.sortOrder!.direction = 'desc';
+    }
+
+    currentConfig.value.sortOrder?.field && emits('change:sort', currentConfig.value.sortOrder as Ui3nTableSort<T>);
+  }
+
+  watch(
+    () => selectedRowsSize.value,
+    (val, oldVal) => {
+      if (val && val > oldVal && props.config.selectable === 'multiple' && !showGroupActionsRow.value) {
+        hasGroupActionsRow.value = true;
+      }
+    },
+  );
+
+  return {
+    tableEl,
+    currentConfig,
+    visibleColumns,
+    hasGroupActionsRow,
+    showGroupActionsRow,
+    selectedRows,
+    selectedRowsArray,
+    selectedRowsSize,
+    closeGroupActionsRow,
+    getRowKey,
+    isRowSelected,
+    getRowStyle,
+    processSelection,
+    toggleSelectedRows,
+    changeSortOrder,
+  };
+}

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

@@ -0,0 +1,80 @@
+import { VNode } from 'vue';
+
+export interface Ui3nTableBodyBaseItem {
+  id?: string | number | symbol;
+}
+
+export type Ui3nTableSort<T extends Ui3nTableBodyBaseItem> = {
+  field: keyof T;
+  direction: 'asc' | 'desc';
+};
+
+export type Ui3nTableConfig<T extends Ui3nTableBodyBaseItem, K extends keyof T = 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
+  columnStyle?: { [P in Omit<K, 'id'> as string | number]: Record<string, string> };
+  fieldAsRowKey?: keyof T;
+};
+
+export type Ui3nTableHeadProps<T extends Ui3nTableBodyBaseItem> = {
+  key: keyof T;
+  text: string;
+  sortable?: boolean;
+  headCellStyle?: Record<string, string>;
+  format?: (content: unknown) => string;
+  hidden?: boolean;
+  index?: number;
+};
+
+export type Ui3nTableBodyProps<T extends Ui3nTableBodyBaseItem, K extends keyof T = keyof T> = {
+  content: T[];
+  rowsStyle?: { [P in T[K] as string | number]: Record<string, string> };
+};
+
+export interface Ui3nTableProps<T extends Ui3nTableBodyBaseItem> {
+  config: Ui3nTableConfig<T>;
+  head: Ui3nTableHeadProps<T>[];
+  body: Ui3nTableBodyProps<T>;
+}
+
+export interface Ui3nTableEmits<T extends Ui3nTableBodyBaseItem> {
+  (ev: 'change:sort', val: Ui3nTableSort<T>): void;
+  (ev: 'select:row', val: T[]): void;
+}
+
+export type Ui3nTableGroupActionsSlot = {
+  'group-actions': () => VNode;
+};
+
+export type Ui3nTableHeaderCellSlot<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = {
+  [p in `header-cell-${K}`]: () => VNode;
+};
+
+export type Ui3nTableBodyRowSlotScope<T extends Ui3nTableBodyBaseItem> = {
+  row: T;
+  rowStyle?: Record<string, string>;
+  rowIndex: number;
+  events?: Record<string, (value: unknown) => unknown>;
+};
+
+export type Ui3nTableBodyRowSlot<T extends Ui3nTableBodyBaseItem> = {
+  'body-row': (scope: Ui3nTableBodyRowSlotScope<T>) => VNode;
+};
+
+export type Ui3nTableBodyRowCellSlotScope<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = {
+  row: T;
+  rowIndex: number;
+  cell: T[K];
+};
+
+export type Ui3nTableBodyRowCellSlot<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = {
+  [p in `body-row-cell-${K}`]: (scope: Ui3nTableBodyRowCellSlotScope<T, K>) => VNode;
+};
+
+export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = Ui3nTableGroupActionsSlot &
+  Ui3nTableHeaderCellSlot<T, K> &
+  Ui3nTableBodyRowSlot<T> &
+  Ui3nTableBodyRowCellSlot<T, K>;

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 {
+  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.vue → ui3n-table-simple.vue}

@@ -11,7 +11,6 @@ export interface Ui3nTableProps {
 
 export interface Ui3nTableEmits {
   (ev: 'go', name: string): void;
-
   (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
 }
 
@@ -268,11 +267,11 @@ const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntr
   color: var(--color-icon-control-accent-unselected);
 }
 
-.rowBookmark{
+.rowBookmark {
   left: 2px;
 }
 
-.rowRename{
+.rowRename {
   right: calc(var(--spacing-l) * 4);
 }
 
@@ -324,6 +323,6 @@ const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntr
   line-height: var(--font-20);
   color: var(--color-text-control-secondary-default);
   text-align: center;
-  padding: 56px 0 ;
+  padding: 56px 0;
 }
 </style>