@v1nt1248/3nclient-lib 0.2.66 → 0.2.67

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.66",
+  "version": "0.2.67",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -27,29 +27,6 @@
     "./style.css": "./dist/style.css",
     "./variables.css": "./dist/variables.css"
   },
-  "scripts": {
-    "dev": "LIB_NAME=all vite",
-    "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
-    "copy:dts": "cp ./src/types.d.ts ./dist",
-    "copy:css": "cp ./src/assets/styles/variables.css ./dist",
-    "copy:icons:css": "cp ./src/assets/styles/icons.css ./dist",
-    "clean:dist": "rm -rf dist/",
-    "build:components": "LIB_NAME=lib vite build",
-    "build:plugins": "LIB_NAME=plugins vite build",
-    "build:utils": "LIB_NAME=utils vite build",
-    "build": "pnpm clean:dist && pnpm build:plugins && pnpm build:utils && pnpm build:components && pnpm copy:css",
-    "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
-    "preview": "vite preview",
-    "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
-    "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss,css}'",
-    "linter": "eslint -c eslint.config.js --ext .js,.vue,.ts, src",
-    "linter:fix": "eslint -c eslint.config.js --fix --ext .js,.vue,.ts, src",
-    "lint": "pnpm linter && pnpm stylelint",
-    "lint:fix": "pnpm linter:fix && pnpm stylelint:fix",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/vue": "1.1.9",
@@ -107,17 +84,27 @@
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "3.1.3"
   },
-  "packageManager": "pnpm@10.18.2",
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search",
-        "search-insights"
-      ]
-    },
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "vue-demi"
-    ]
+  "scripts": {
+    "dev": "LIB_NAME=all vite",
+    "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
+    "copy:dts": "cp ./src/types.d.ts ./dist",
+    "copy:css": "cp ./src/assets/styles/variables.css ./dist",
+    "copy:icons:css": "cp ./src/assets/styles/icons.css ./dist",
+    "clean:dist": "rm -rf dist/",
+    "build:components": "LIB_NAME=lib vite build",
+    "build:plugins": "LIB_NAME=plugins vite build",
+    "build:utils": "LIB_NAME=utils vite build",
+    "build": "pnpm clean:dist && pnpm build:plugins && pnpm build:utils && pnpm build:components && pnpm copy:css",
+    "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
+    "preview": "vite preview",
+    "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
+    "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss,css}'",
+    "linter": "eslint -c eslint.config.js --ext .js,.vue,.ts, src",
+    "linter:fix": "eslint -c eslint.config.js --fix --ext .js,.vue,.ts, src",
+    "lint": "pnpm linter && pnpm stylelint",
+    "lint:fix": "pnpm linter:fix && pnpm stylelint:fix",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   }
-}
+}

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

@@ -1,4 +1,4 @@
-import { computed, onMounted, type Ref, ref, watch, UnwrapRef } from 'vue';
+import { computed, type Ref, ref, watch, UnwrapRef } from 'vue';
 import { get, isEmpty, size } from 'lodash';
 import {
   Ui3nTableBodyBaseItem,
@@ -34,21 +34,20 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
   );
   const showGroupActionsRow = computed(() => props.config?.selectable === 'multiple' && hasGroupActionsRow.value);
 
-  onMounted(() => {
-    tableEl.value && setColumnWidth(tableEl.value);
-  });
+  const tableColumnWidth = computed(() => {
+    if (!tableEl.value) {
+      return '100%';
+    }
 
-  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) => {
+    return 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;
@@ -186,6 +185,17 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     currentConfig.value.sortOrder?.field && emits('change:sort', currentConfig.value.sortOrder as Ui3nTableSort<T>);
   }
 
+  watch(
+    tableColumnWidth,
+    (val, oVal) => {
+      if (val && val !== oVal) {
+        tableEl.value && tableEl.value.style.setProperty('--ui3n-table-columns-width', val);
+      }
+    }, {
+      immediate: true,
+    }
+  );
+
   watch(
     () => selectedRowsSize.value,
     (val, oldVal) => {