@v1nt1248/3nclient-lib 0.1.1 → 0.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -36,7 +36,7 @@
   "dependencies": {
     "@iconify-icons/ic": "1.2.13",
     "@iconify/vue": "4.1.2",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.12",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
     "sanitize-html": "2.13.0",
@@ -44,47 +44,48 @@
     "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
-    "pinia": "2.1.7",
-    "vue": "3.4.27"
+    "pinia": "2.2.1",
+    "vue": "3.4.37"
   },
   "devDependencies": {
     "@types/lodash": "4.17.5",
     "@types/node": "20.14.2",
     "@types/sanitize-html": "2.11.0",
-    "@typescript-eslint/eslint-plugin": "7.13.0",
-    "@typescript-eslint/parser": "7.13.0",
-    "@vitejs/plugin-vue": "5.0.5",
-    "@vue/compiler-core": "3.4.27",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
+    "@vitejs/plugin-vue": "5.1.2",
+    "@vue/compiler-core": "3.4.37",
     "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/runtime-core": "3.4.27",
+    "@vue/runtime-core": "3.4.37",
     "@vuedx/typescript-plugin-vue": "0.7.6",
-    "eslint": "9.4.0",
+    "eslint": "9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "6.2.0",
-    "eslint-plugin-vue": "9.26.0",
-    "jackspeak": "3.4.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "7.1.0",
+    "eslint-plugin-vue": "9.27.0",
+    "jackspeak": "4.0.1",
     "path": "0.12.7",
-    "pinia": "2.1.7",
+    "pinia": "2.2.1",
     "postcss-html": "1.7.0",
     "prettier": "^3.3.3",
-    "sass": "1.77.5",
-    "stylelint": "16.6.1",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "sass": "1.77.8",
+    "stylelint": "16.8.1",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-config-recommended-vue": "1.5.0",
-    "stylelint-config-standard": "36.0.0",
-    "stylelint-scss": "6.3.1",
-    "typescript": "5.4.5",
-    "vite": "5.2.13",
+    "stylelint-config-standard": "36.0.1",
+    "stylelint-scss": "6.5.0",
+    "typescript": "5.5.4",
+    "vite": "5.4.0",
     "vite-plugin-css-injected-by-js": "3.5.1",
-    "vite-plugin-dts": "3.9.1",
-    "vitepress": "1.2.3",
-    "vue": "3.4.27",
-    "vue-tsc": "2.0.21"
+    "vite-plugin-dts": "4.0.2",
+    "vite-plugin-vue-devtools": "^7.3.7",
+    "vitepress": "1.3.2",
+    "vue": "3.4.37",
+    "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@9.7.0",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

package/src/components/index.ts

@@ -17,10 +17,29 @@ import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './
 import Ui3nNotification from './ui3n-notification.vue';
 import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
 import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue';
-import Ui3nTable from './ui3n-table.vue';
-import type { Ui3nTableProps, Ui3nTableEmits } from './ui3n-table.vue';
+import Ui3nTable from './ui3n-table/ui3n-table.vue';
+import type {
+  Ui3nTableSort,
+  Ui3nTableConfig,
+  Ui3nTableHeadProps,
+  Ui3nTableBodyProps,
+  Ui3nTableGroupActionsSlot,
+  Ui3nTableHeaderCellSlot,
+  Ui3nTableBodyRowSlotScope,
+  Ui3nTableBodyRowSlot,
+  Ui3nTableBodyRowCellSlotScope,
+  Ui3nTableBodyRowCellSlot,
+  Ui3nTableSlots,
+  Ui3nTableProps,
+  Ui3nTableEmits,
+} from './ui3n-table/types';
 import Ui3nDialog from './ui3n-dialog.vue';
-import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent } from './ui3n-dialog.vue';
+import type {
+  Ui3nDialogComponentProps,
+  Ui3nDialogComponentEmits,
+  Ui3nDialogProps,
+  Ui3nDialogEvent,
+} from './ui3n-dialog.vue';
 import Ui3nMenu from './ui3n-menu.vue';
 import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue';
 import Ui3nList from './ui3n-list.vue';
@@ -75,6 +94,17 @@ export {
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,
   Ui3nTable,
+  Ui3nTableSort,
+  Ui3nTableConfig,
+  Ui3nTableHeadProps,
+  Ui3nTableBodyProps,
+  Ui3nTableGroupActionsSlot,
+  Ui3nTableHeaderCellSlot,
+  Ui3nTableBodyRowSlotScope,
+  Ui3nTableBodyRowSlot,
+  Ui3nTableBodyRowCellSlotScope,
+  Ui3nTableBodyRowCellSlot,
+  Ui3nTableSlots,
   Ui3nTableProps,
   Ui3nTableEmits,
   Ui3nDialog,
@@ -115,4 +145,4 @@ export {
   Ui3nProgressLinearProps,
   Ui3nProgressCircular,
   Ui3nProgressCircularProps,
-}
+};

package/src/components/ui3n-checkbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue';
 
-type Ui3nCheckboxValue = boolean | string | number;
+export type Ui3nCheckboxValue = boolean | string | number;
 
 export interface Ui3nCheckboxProps {
   modelValue: Ui3nCheckboxValue;

package/src/components/ui3n-dialog.vue

@@ -36,10 +36,15 @@ export interface Ui3nDialogComponentProps {
 
 export interface Ui3nDialogComponentEmits {
   (ev: 'open', value?: any): void;
+
   (ev: 'before-close', value?: any): void;
+
   (ev: 'close', value?: any): void;
+
   (ev: 'confirm', value?: any): void;
+
   (ev: 'cancel', value?: any): void;
+
   (ev: 'click-overlay', value?: any): void;
 }
 
@@ -52,7 +57,7 @@ const data = ref(null);
 const isValid = ref(true);
 const dialogElement = ref<HTMLDivElement | null>(null);
 
-const dialogProps = computed<Ui3nDialogProps>(() => ({
+const dialogProps = computed<Required<Omit<Ui3nDialogProps, 'onClose' | 'onConfirm' | 'onCancel'>>>(() => ({
   teleport: props.dialogProps?.teleport ?? 'body',
   title: props.dialogProps?.title ?? '',
   width: props.dialogProps?.width ?? 380,

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>;