bfg-common 1.3.74 → 1.3.76

package/components/common/diagramMain/network/Contents.vue

@@ -12,22 +12,28 @@
 
     <a
       :id="`network-${testId}`"
+      style="text-decoration: none"
       cursor="pointer"
       data-title="network-name-link"
       @click="onSelectNetwork(props.network.id)"
     >
-      <title>{{ props.network.title }}</title>
-      <text
+      <foreignObject
         data-title="network-name-text"
-        dy="14px"
-        font-size="14"
-        font-weight="500"
+        height="22"
+        width="206"
         x="50"
-        :y="props.network.titlePosition"
+        :title="props.network.title"
+        :y="networkTitlePosition"
         class="diagram__heading"
       >
-        {{ networkTitle }}
-      </text>
+        <span
+          class="text-ellipsis"
+          :title="props.network.title"
+          :id="`network_${props.network.id}`"
+        >
+          {{ props.network.title }}
+        </span>
+      </foreignObject>
     </a>
 
     <foreignObject
@@ -184,12 +190,9 @@ const closedPortsLinePosition = computed<number>(
   () => props.network.portsPosition + 7.5
 )
 
-const networkTitle = computed<string>(() => {
-  if (props.network.title.length > 16) {
-    return `${props.network.title.slice(0, 16)}...`
-  }
-  return props.network.title
-})
+const networkTitlePosition = computed<number>(
+  () => props.network.titlePosition - 5
+)
 
 const onSelectNetwork = (networkId: string): void => {
   emits('select-network', networkId)
@@ -218,6 +221,15 @@ const onTogglePorts = (
   .port-group-header {
     fill: #c1cdd4;
   }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 2px;
+    }
+  }
 }
 
 .diagram {
@@ -258,4 +270,20 @@ const onTogglePorts = (
     transform: rotate(180deg);
   }
 }
+
+.text-ellipsis {
+  display: block;
+  max-width: 206px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 500;
+  font-size: 14px;
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 2px;
+  }
+}
 </style>

package/components/common/diagramMain/port/Port.vue

@@ -25,17 +25,22 @@
       cursor="pointer"
       @click="onSelectPort(props.network.id, props.port.id)"
     >
-      <title>{{ props.port.name }}</title>
-      <text
-        dy="11px"
-        font-size="12"
-        font-weight="400"
+      <foreignObject
+        data-title="network-name-text"
+        height="20"
+        width="206"
         x="42"
-        :y="props.port.portPosition"
+        :y="portTitlePosition"
         class="diagram__values"
       >
-        {{ portTitle }}
-      </text>
+        <span
+          class="text-ellipsis"
+          :title="props.port.name"
+          :id="`port_${props.port.id}`"
+        >
+          {{ props.port.name }}
+        </span>
+      </foreignObject>
     </a>
 
     <text
@@ -145,6 +150,8 @@ const emits = defineEmits<{
   ): void
 }>()
 
+const portTitlePosition = computed<number>(() => props.port.portPosition - 5)
+
 const isVmKernel = computed<boolean>(
   () => props.network.networkType === UI_E_NetworkType.VMkernel
 )
@@ -282,6 +289,15 @@ const onSelectPort = (networkId: string, portId: string): void => {
   .diagram__values {
     fill: #c1cdd4;
   }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 1px;
+    }
+  }
 }
 
 .diagram {
@@ -325,4 +341,20 @@ const onSelectPort = (networkId: string, portId: string): void => {
 .small {
   font: normal 9px Metropolis;
 }
+
+.text-ellipsis {
+  display: block;
+  max-width: 206px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 1px;
+  }
+}
 </style>

package/lib/models/table/interfaces.ts

@@ -1,38 +1,38 @@
-import type { UI_T_Schema } from '~/lib/models/table/types'
-
-export interface API_UI_I_DataTable<T> {
-  total_items: number
-  total_pages: number
-  items: T
-}
-
-export interface UI_I_TableQuery {
-  page: number
-  page_size: number
-  sortBy?: string
-  filter?: string
-}
-
-export interface UI_I_TableQueryWidthSchema extends UI_I_TableQuery {
-  schema: UI_T_Schema
-}
-
-export interface UI_I_Pagination {
-  page: number
-  pageSize: number
-}
-
-export interface UI_I_DataTableQuery extends UI_I_Pagination {
-  sortBy?: string
-  filter?: string
-}
-
-export interface UI_I_SchemaTablePayload {
-  schema: UI_T_Schema
-}
-
-export interface UI_I_TablePayload extends UI_I_SchemaTablePayload {
-  pagination: UI_I_Pagination
-  type: any
-  sortBy: string | null
-}
+import type { UI_T_Schema } from '~/lib/models/table/types'
+
+export interface API_UI_I_DataTable<T> {
+  total_items: number
+  total_pages: number
+  items: T
+}
+
+export interface UI_I_TableQuery {
+  page: number
+  page_size: number
+  sortBy?: string
+  search?: string
+}
+
+export interface UI_I_TableQueryWidthSchema extends UI_I_TableQuery {
+  schema: UI_T_Schema
+}
+
+export interface UI_I_Pagination {
+  page: number
+  pageSize: number
+}
+
+export interface UI_I_DataTableQuery extends UI_I_Pagination {
+  sortBy?: string
+  filter?: string
+}
+
+export interface UI_I_SchemaTablePayload {
+  schema: UI_T_Schema
+}
+
+export interface UI_I_TablePayload extends UI_I_SchemaTablePayload {
+  pagination: UI_I_Pagination
+  type: any
+  sortBy: string | null
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.74",
+  "version": "1.3.76",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",