diff --git a/nuxt.config.ts b/nuxt.config.ts index 083010c..14c3377 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -29,6 +29,7 @@ export default defineNuxtConfig({ '@nuxtjs/tailwindcss', '@primevue/nuxt-module', '@pinia/nuxt', + '@vueuse/nuxt', 'nuxt-icons', ], css: [ 'primeicons/primeicons.css', '~/assets/css/base.css', '~/assets/css/global.css' ], diff --git a/package.json b/package.json index f49a515..79a966e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "@pinia/nuxt": "^0.5.4", "@primevue/nuxt-module": "^4.0.7", "@primevue/themes": "^4.0.7", + "@vueuse/core": "^11.1.0", + "@vueuse/nuxt": "^11.1.0", "chart.js": "^4.4.4", "eslint-plugin-import": "^2.30.0", "lodash": "^4.17.21", diff --git a/pages/probes.vue b/pages/probes.vue index 65bdaf7..ccce6f4 100644 --- a/pages/probes.vue +++ b/pages/probes.vue @@ -57,14 +57,16 @@ @@ -236,17 +238,19 @@ }); const getAllTags = (probe: Probe) => { - const NUMBER_OF_TAGS_TO_SHOW = 5; const systemTags = probe.systemTags; const userTags = probe.tags.map(({ prefix, value }) => `u-${prefix}-${value}`); - const allTags = systemTags.concat(userTags); - const tagsToShow = allTags.slice(0, NUMBER_OF_TAGS_TO_SHOW); - const remainingTagsNumber = allTags.length - NUMBER_OF_TAGS_TO_SHOW; - return { id: probe.id, tagsToShow, remainingTagsNumber: remainingTagsNumber > 0 ? remainingTagsNumber : 0 }; + const allTags = userTags.concat(systemTags); + return { id: probe.id, allTags }; }; - // PROBE DETAILS + // Calculate the number of tags to show, based on the expected average tag width <= 200px. + const tagsHeaderContentRef = ref(null); + const tagsHeaderRef = useParentElement(tagsHeaderContentRef); + const { width: tagsColumnWidth } = useElementSize(tagsHeaderRef); + const numberOfTagsToShow = computed(() => Math.max(Math.floor(tagsColumnWidth.value / 100), 1)); + // PROBE DETAILS onMounted(async () => { const probeId = route.params.id as string; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0f69692..379c321 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,6 +34,12 @@ importers: '@primevue/themes': specifier: ^4.0.7 version: 4.0.7 + '@vueuse/core': + specifier: ^11.1.0 + version: 11.1.0(vue@3.5.8(typescript@5.5.4)) + '@vueuse/nuxt': + specifier: ^11.1.0 + version: 11.1.0(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.5.5)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(meow@9.0.0)(optionator@0.9.4)(rollup@4.22.4)(sass@1.77.0)(stylelint@14.16.1)(terser@5.33.0)(typescript@5.5.4)(vite@5.4.7(@types/node@22.5.5)(sass@1.77.0)(terser@5.33.0))(vue-tsc@2.1.6(typescript@5.5.4))(webpack-sources@3.2.3))(rollup@4.22.4)(vue@3.5.8(typescript@5.5.4))(webpack-sources@3.2.3) chart.js: specifier: ^4.4.4 version: 4.4.4 @@ -1261,6 +1267,9 @@ packages: '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} + '@types/web-bluetooth@0.0.20': + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + '@typescript-eslint/eslint-plugin@7.18.0': resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==} engines: {node: ^18.18.0 || >=20.0.0} @@ -1473,6 +1482,20 @@ packages: '@vue/shared@3.5.8': resolution: {integrity: sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==} + '@vueuse/core@11.1.0': + resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==} + + '@vueuse/metadata@11.1.0': + resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==} + + '@vueuse/nuxt@11.1.0': + resolution: {integrity: sha512-ZPYigcqgPPe9vk9nBHLF8p0zshX8qvWV/ox1Y4GdV4k2flPiw7+2THNTpU2NZDBXSOXlhB2sao+paGCsvJm/Qw==} + peerDependencies: + nuxt: ^3.0.0 + + '@vueuse/shared@11.1.0': + resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==} + abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} @@ -6290,6 +6313,8 @@ snapshots: '@types/resolve@1.20.2': {} + '@types/web-bluetooth@0.0.20': {} + '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)': dependencies: '@eslint-community/regexpp': 4.11.1 @@ -6627,6 +6652,41 @@ snapshots: '@vue/shared@3.5.8': {} + '@vueuse/core@11.1.0(vue@3.5.8(typescript@5.5.4))': + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 11.1.0 + '@vueuse/shared': 11.1.0(vue@3.5.8(typescript@5.5.4)) + vue-demi: 0.14.10(vue@3.5.8(typescript@5.5.4)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + '@vueuse/metadata@11.1.0': {} + + '@vueuse/nuxt@11.1.0(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.5.5)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(meow@9.0.0)(optionator@0.9.4)(rollup@4.22.4)(sass@1.77.0)(stylelint@14.16.1)(terser@5.33.0)(typescript@5.5.4)(vite@5.4.7(@types/node@22.5.5)(sass@1.77.0)(terser@5.33.0))(vue-tsc@2.1.6(typescript@5.5.4))(webpack-sources@3.2.3))(rollup@4.22.4)(vue@3.5.8(typescript@5.5.4))(webpack-sources@3.2.3)': + dependencies: + '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.4)(webpack-sources@3.2.3) + '@vueuse/core': 11.1.0(vue@3.5.8(typescript@5.5.4)) + '@vueuse/metadata': 11.1.0 + local-pkg: 0.5.0 + nuxt: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.5.5)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(meow@9.0.0)(optionator@0.9.4)(rollup@4.22.4)(sass@1.77.0)(stylelint@14.16.1)(terser@5.33.0)(typescript@5.5.4)(vite@5.4.7(@types/node@22.5.5)(sass@1.77.0)(terser@5.33.0))(vue-tsc@2.1.6(typescript@5.5.4))(webpack-sources@3.2.3) + vue-demi: 0.14.10(vue@3.5.8(typescript@5.5.4)) + transitivePeerDependencies: + - '@vue/composition-api' + - magicast + - rollup + - supports-color + - vue + - webpack-sources + + '@vueuse/shared@11.1.0(vue@3.5.8(typescript@5.5.4))': + dependencies: + vue-demi: 0.14.10(vue@3.5.8(typescript@5.5.4)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + abbrev@1.1.1: {} abort-controller@3.0.0: