@xen-orchestra/web-core 0.20.0 → 0.21.0

package/lib/assets/zoom.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Zoom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.13 396.85">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #eaea92;
+      }
+
+      .cls-2, .cls-3, .cls-4 {
+        fill: #8f84ff;
+      }
+
+      .cls-2, .cls-5 {
+        opacity: .3;
+      }
+
+      .cls-6, .cls-5 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        opacity: .14;
+      }
+
+      .cls-7 {
+        fill: #181849;
+      }
+
+      .cls-8 {
+        fill: #1a1b38;
+      }
+    </style>
+  </defs>
+  <path class="cls-4" d="M129.55,173.68c-6.44,2.53-12.65,5.45-18.79,8.51-6.13,3.06-12.16,6.31-18.12,9.68-5.96,3.37-11.83,6.88-17.56,10.64-2.87,1.87-5.7,3.82-8.49,5.83-2.79,2.02-5.54,4.09-8.18,6.36-1.46,1.25-1.62,3.44-.37,4.9.95,1.11,2.47,1.47,3.78,1.02,3.29-1.14,6.47-2.48,9.62-3.87,3.14-1.4,6.25-2.86,9.31-4.4,6.13-3.06,12.13-6.36,18.04-9.82,5.91-3.45,11.75-7.02,17.48-10.78,5.73-3.76,11.39-7.66,16.81-11.95,1.55-1.22,1.81-3.47.59-5.02-1-1.26-2.68-1.67-4.11-1.11Z"/>
+  <path class="cls-3" d="M194.07,50.23c74.01-2.19,138.12,51.52,147.8,121.98,10.59,77.04-47.69,146.36-119.41,157.46-89.2,13.81-175.73-66.08-167.96-152.75,5.85-65.3,64.33-124.47,139.57-126.69Z"/>
+  <path class="cls-8" d="M90.67,198.68c.14.05.25.11.35.19.1.02.2.04.3.06.46.09.46.85,0,.93-.1.02-.2.04-.3.06-.1.08-.21.14-.35.19-.46.16-.93-.25-.93-.71,0-.46.47-.87.93-.71Z"/>
+  <path class="cls-4" d="M162.94,225.43h0c-1.62-2.75-4.97-4.27-8.07-3.67l-48.48,9.41c-3.68.71-5.75,4.14-4.62,7.64l32.93,102.68c1.12,3.51,5.02,5.77,8.7,5.06l153.84-29.87c3.68-.71,5.75-4.14,4.62-7.64l-27.66-86.24c-1.12-3.51-5.02-5.77-8.7-5.06l-83.71,16.25c-7.25,1.41-15.06-2.14-18.85-8.56Z"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 108.5 236.07 269.23 204.87 299.39 311.24"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 111.03 235.58 269.23 204.87 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 111.46 231.94 272.2 200.73 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 114.8 231.29 272.2 200.73 299.39 311.24"/>
+  <polygon class="cls-1" points="299.39 280.37 138.65 311.57 115.44 197.14 276.18 165.94 299.39 280.37"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 120.12 229.37 279.82 198.36 299.39 311.24"/>
+  <polygon class="cls-6" points="300.96 307.85 138.65 342.45 121.79 229.06 282.81 198.64 300.96 307.85"/>
+  <polygon class="cls-1" points="299.39 311.24 138.65 342.45 124.91 231.07 285.65 199.87 299.39 311.24"/>
+  <polygon class="cls-6" points="299.39 311.24 138.65 342.45 126.31 231.78 287.04 200.57 299.39 311.24"/>
+  <path class="cls-4" d="M199.21,225.47h0c-.69-3-3.38-4.71-6.48-4.1l-48.48,9.41c-3.68.71-6.66,4.39-6.67,8.21l-.11,101.8c0,3.82,2.97,6.33,6.65,5.62l153.84-29.87c3.68-.71,6.66-4.39,6.67-8.21l.09-83.92c0-3.82-2.97-6.33-6.65-5.62l-83.71,16.25c-7.25,1.41-13.53-2.57-15.15-9.58Z"/>
+  <path class="cls-2" d="M153.88,195.95c26.94,15.96,61.72,7.06,77.68-19.88,15.96-26.94,7.06-61.72-19.88-77.68-26.94-15.96-61.72-7.07-77.68,19.87-15.96,26.94-7.06,61.72,19.88,77.68Z"/>
+  <path class="cls-5" d="M181.76,90.48l27.36,106.91c.76-.4,1.52-.82,2.26-1.25,4.76-2.77,9.13-6.25,12.98-10.41h0s-23.63-92.34-23.63-92.34c-6.21-2.08-12.62-3.03-18.97-2.91Z"/>
+  <path class="cls-5" d="M147.71,102.6l25.72,100.51c8.64,1.45,17.42.84,25.66-1.64l-28.09-109.76c-8.42,1.78-16.41,5.47-23.3,10.89Z"/>
+  <path class="cls-4" d="M212.83,199.46c-28.88,16.6-65.74,6.64-82.34-22.24-16.6-28.88-6.64-65.74,22.24-82.34,28.88-16.6,65.74-6.64,82.34,22.24,16.6,28.88,6.64,65.75-22.23,82.34ZM210.38,195.19c26.52-15.24,35.66-49.09,20.42-75.62-15.24-26.51-49.09-35.66-75.61-20.42-26.52,15.24-35.66,49.09-20.42,75.61,15.24,26.52,49.09,35.67,75.61,20.43Z"/>
+  <path class="cls-4" d="M133.07,179.81c-5.43,4.3-11.08,8.19-16.81,11.95-5.74,3.76-11.58,7.33-17.49,10.78-.95.56-1.91,1.11-2.87,1.66-4.98,2.86-10.02,5.59-15.17,8.16-3.06,1.54-6.17,3-9.31,4.4-3.15,1.39-6.33,2.73-9.62,3.87-1.3.45-2.82.09-3.77-1.02-1.25-1.46-1.08-3.65.37-4.9,2.65-2.27,5.4-4.34,8.19-6.36,2.79-2.01,5.61-3.96,8.48-5.83,5.74-3.76,11.61-7.28,17.57-10.65,1.23-.69,2.46-1.38,3.7-2.07,4.75-2.63,9.55-5.18,14.42-7.61,6.13-3.06,12.34-5.98,18.78-8.51,1.43-.56,3.12-.15,4.11,1.11,1.23,1.55.97,3.8-.58,5.02Z"/>
+  <path class="cls-6" d="M278.46,132.05l-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3-3,1.68,1.68,3,51.04-28.52-1.68-3-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3-3,1.68-1.68-3,6.01-3.36-1.68-3,6.01-3.36-1.68-3,3-1.68-3.35-6-3,1.68-1.68-3-6.01,3.36,1.68,3-6.01,3.36,1.68,3-3,1.68-6.71-12.01-3,1.68-3,1.68,1.68,3Z"/>
+  <rect class="cls-8" x="259.33" y="166.05" width="58.47" height="3.44" transform="translate(-45.17 162.06) rotate(-29.19)"/>
+  <rect class="cls-8" x="264.16" y="174.79" width="3.44" height="3.44" transform="translate(-52.32 152.1) rotate(-29.19)"/>
+  <rect class="cls-8" x="265.48" y="170.11" width="3.44" height="3.44" transform="translate(-49.87 152.15) rotate(-29.19)"/>
+  <rect class="cls-8" x="266.81" y="165.43" width="3.44" height="3.44" transform="translate(-47.42 152.2) rotate(-29.19)"/>
+  <rect class="cls-8" x="268.13" y="160.75" width="3.44" height="3.44" transform="translate(-44.97 152.26) rotate(-29.19)"/>
+  <rect class="cls-8" x="269.46" y="156.07" width="3.44" height="3.44" transform="translate(-42.52 152.31) rotate(-29.19)"/>
+  <rect class="cls-8" x="270.78" y="151.39" width="3.44" height="3.44" transform="translate(-40.07 152.36) rotate(-29.19)"/>
+  <rect class="cls-8" x="272.11" y="146.71" width="3.44" height="3.44" transform="translate(-37.62 152.41) rotate(-29.19)"/>
+  <rect class="cls-8" x="273.43" y="142.03" width="3.44" height="3.44" transform="translate(-35.16 152.46) rotate(-29.19)"/>
+  <rect class="cls-8" x="274.76" y="137.35" width="3.44" height="3.44" transform="translate(-32.71 152.52) rotate(-29.19)"/>
+  <rect class="cls-8" x="276.08" y="132.67" width="3.44" height="3.44" transform="translate(-30.26 152.57) rotate(-29.19)"/>
+  <rect class="cls-8" x="277.41" y="127.99" width="3.44" height="3.44" transform="translate(-27.81 152.62) rotate(-29.19)"/>
+  <rect class="cls-8" x="283.77" y="125.44" width="3.44" height="17.19" transform="translate(-29.11 156.27) rotate(-29.19)"/>
+  <rect class="cls-8" x="290.12" y="136.64" width="3.44" height="3.44" transform="translate(-30.42 159.92) rotate(-29.19)"/>
+  <rect class="cls-8" x="295.15" y="145.65" width="3.44" height="3.44" transform="translate(-34.17 163.52) rotate(-29.19)"/>
+  <rect class="cls-8" x="296.26" y="140.13" width="6.88" height="3.44" transform="translate(-31.12 164.2) rotate(-29.19)"/>
+  <rect class="cls-8" x="300.59" y="133.77" width="6.88" height="3.44" transform="translate(-27.47 165.5) rotate(-29.19)"/>
+  <rect class="cls-8" x="304.3" y="125.04" width="3.44" height="6.88" transform="translate(-23.79 165.58) rotate(-29.19)"/>
+  <rect class="cls-8" x="291.23" y="131.13" width="6.88" height="3.44" transform="translate(-27.37 160.6) rotate(-29.19)"/>
+  <rect class="cls-8" x="295.56" y="124.77" width="6.88" height="3.44" transform="translate(-23.72 161.9) rotate(-29.19)"/>
+  <rect class="cls-8" x="299.83" y="146.97" width="3.44" height="3.44" transform="translate(-34.22 165.97) rotate(-29.19)"/>
+  <rect class="cls-8" x="304.51" y="148.3" width="3.44" height="3.44" transform="translate(-34.27 168.42) rotate(-29.19)"/>
+  <rect class="cls-8" x="309.19" y="149.62" width="3.44" height="3.44" transform="translate(-34.33 170.87) rotate(-29.19)"/>
+  <polygon class="cls-7" points="173.4 252.35 171.52 258.69 165.18 260.57 171.52 262.45 173.4 268.79 175.28 262.45 181.62 260.57 175.28 258.69 173.4 252.35"/>
+  <polygon class="cls-7" points="283.94 292.49 282.82 296.27 279.05 297.39 282.82 298.51 283.94 302.28 285.06 298.51 288.84 297.39 285.06 296.27 283.94 292.49"/>
+  <polygon class="cls-7" points="244.55 182.48 242.67 188.82 236.33 190.7 242.67 192.58 244.55 198.92 246.43 192.58 252.77 190.7 246.43 188.82 244.55 182.48"/>
+  <path class="cls-6" d="M222.84,291.45c.62.17,1.24.34,1.85.5-6.22,2.4-12.01,4.07-16.61,4.88-5.54.98-9.34.71-10.07-1.05-.72-1.73,1.57-4.54,6.04-7.74.07.37.13.76.23,1.13-3.52,2.54-5.25,4.66-4.7,5.96.55,1.32,3.47,1.51,7.85.77,4.11-.7,9.5-2.23,15.42-4.45Z"/>
+  <path class="cls-6" d="M247.13,280.34c-4.49,3.29-11.25,6.99-19.08,10.26-.52.22-1.04.43-1.56.64-.61-.15-1.23-.32-1.85-.48.98-.38,1.98-.79,2.98-1.2,8.13-3.39,15.07-7.18,19.31-10.34,3.21-2.39,4.88-4.43,4.36-5.67-.51-1.22-3.06-1.48-6.92-.91-.19-.32-.39-.64-.6-.95,5-.77,8.4-.43,9.08,1.21.7,1.67-1.53,4.38-5.72,7.45Z"/>
+  <path class="cls-6" d="M253.1,292.89c-.49,1.74-3.92,2.49-9.11,2.3-5.1-.19-11.91-1.29-19.31-3.23-.61-.16-1.23-.33-1.85-.5-.06-.02-.12-.03-.18-.05-7.81-2.19-14.68-4.89-19.52-7.5-4.95-2.67-7.77-5.24-7.25-7.07.51-1.8,4.05-2.59,9.54-2.32-.17.33-.37.68-.52,1.03-4.33-.19-7,.4-7.39,1.76-.39,1.38,1.79,3.34,5.68,5.47,4.62,2.53,11.67,5.28,19.76,7.55.56.16,1.11.31,1.66.46.62.17,1.24.33,1.85.48,7.1,1.79,13.5,2.8,18.05,2.93,4,.12,6.57-.45,6.94-1.74.36-1.28-1.48-3.06-4.86-5.01.05-.37.09-.74.12-1.11,4.4,2.49,6.85,4.87,6.37,6.58Z"/>
+  <path class="cls-6" d="M232.63,304.23c-11.71,3.96-24.46-2.36-28.41-14.07-3.95-11.71,2.36-24.46,14.07-28.41,11.71-3.96,24.46,2.36,28.41,14.07,3.95,11.71-2.36,24.46-14.07,28.41ZM218.74,263.1c-10.97,3.7-16.88,15.64-13.17,26.61,3.7,10.97,15.64,16.88,26.6,13.17,10.97-3.7,16.88-15.64,13.17-26.61-3.7-10.97-15.64-16.88-26.6-13.17Z"/>
+  <path class="cls-6" d="M248.48,286.34c.29-1.97.33-3.99.1-6.02,4.16-3.22,5.87-5.83,5.06-7.76-.77-1.86-3.62-2.5-8.47-1.94-5.59-8.92-16.77-13.2-27.17-9.69-6.43,2.17-11.29,6.9-13.84,12.67-5.46-.11-8.52.9-9.11,2.99-.62,2.19,1.8,4.81,7.16,7.78.07,1.19.23,2.39.49,3.58-4.5,3.38-6.36,6.12-5.5,8.16.87,2.08,4.33,2.65,10.29,1.68,5.97,7.23,16.01,10.42,25.41,7.25,5-1.69,9.05-4.92,11.8-8.98,2.85.06,5.06-.17,6.61-.69,1.46-.49,2.34-1.25,2.62-2.25.54-1.94-1.29-4.21-5.45-6.78ZM206.39,289.43c-.37-1.11-.62-2.22-.8-3.34,4.12,1.95,9.09,3.83,14.46,5.45-3.99,1.4-7.77,2.49-10.97,3.16-1.13-1.57-2.05-3.34-2.7-5.26ZM242.76,293.22c-3.78-.26-8.45-1.02-13.52-2.19,6.28-2.67,11.96-5.65,16.33-8.56.1,3.82-.92,7.54-2.82,10.75ZM250.48,273.88c.15.35-.26,1.46-2.47,3.36-.15-.57-.31-1.14-.5-1.7-.27-.79-.57-1.55-.91-2.29,2.73-.18,3.74.29,3.88.62ZM219.02,263.92c10.51-3.55,21.96,2.11,25.51,12.63.31.93.53,1.87.7,2.81-4.39,3.05-10.83,6.43-17.96,9.4-.88.37-1.79.73-2.7,1.09-.46-.12-.91-.25-1.37-.38-6.82-1.91-13.19-4.27-17.85-6.58.05-8.36,5.32-16.16,13.67-18.98ZM198.35,277.52c.13-.45,1.31-1.13,4.8-1.16-.47,1.57-.78,3.19-.91,4.85-3.29-1.99-4.01-3.26-3.89-3.69ZM200.37,294.8c-.18-.44.34-1.73,3.16-3.98.57,1.59,1.29,3.08,2.15,4.46-3.79.48-5.15-.07-5.32-.48ZM231.89,302.06c-7.53,2.54-15.53.34-20.77-4.97,2.79-.63,5.82-1.5,9.01-2.57,1.5-.51,3.04-1.06,4.6-1.66,5.84,1.52,11.44,2.55,16.17,2.98-2.3,2.78-5.36,4.99-9.02,6.22ZM250.63,292.2c-.11.38-1.18,1.02-4.32,1.11.65-1.31,1.17-2.67,1.56-4.08,2.34,1.59,2.86,2.61,2.76,2.97Z"/>
+</svg>

package/lib/components/backup-state/VtsBackupState.vue

@@ -1,29 +1,32 @@
 <template>
-  <VtsIcon :accent="color" :icon class="vts-backup-state" />
+  <UiInfo :accent="state.accent" class="vts-backup-state">
+    {{ state.text }}
+  </UiInfo>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { useMapper } from '@core/packages/mapper'
+import { useI18n } from 'vue-i18n'
 
-export type BackupState = 'success' | 'failure' | 'partial'
-
-type Props = {
+const { state: _state } = defineProps<{
   state: BackupState
-}
+}>()
 
-const props = defineProps<Props>()
+const { t } = useI18n()
 
-const states: Record<Props['state'], { icon: IconDefinition; color: 'success' | 'warning' | 'danger' }> = {
-  success: { icon: faCheckCircle, color: 'success' },
-  partial: { icon: faCircleMinus, color: 'warning' },
-  failure: { icon: faCircleXmark, color: 'danger' },
-}
+type BackupState = 'success' | 'failure' | 'skipped' | 'interrupted'
 
-const icon = computed(() => states[props.state].icon)
-const color = computed(() => states[props.state].color)
+const state = useMapper<BackupState, { text: string; accent: InfoAccent }>(
+  () => _state,
+  {
+    success: { text: t('success'), accent: 'success' },
+    failure: { text: t('failure'), accent: 'danger' },
+    skipped: { text: t('skipped'), accent: 'warning' },
+    interrupted: { text: t('interrupted'), accent: 'danger' },
+  },
+  'failure'
+)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/cell-object/VtsCellObject.vue

@@ -15,7 +15,7 @@
           accent="brand"
           @click="copy(id)"
         >
-          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+          {{ copied ? t('core.copied') : t('core.copy-id') }}
         </UiButton>
       </template>
     </div>
@@ -27,12 +27,15 @@ import UiButton from '@core/components/ui/button/UiButton.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCopy } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   id?: string
   copiableId?: boolean
 }>()
 
+const { t } = useI18n()
+
 const { isSupported, copy, copied } = useClipboard()
 </script>
 

package/lib/components/console/VtsActionsConsole.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
+  <UiCardTitle>{{ t('console-actions') }}</UiCardTitle>
   <UiButton
     class="button"
     accent="brand"
@@ -8,7 +8,7 @@
     :left-icon="isFullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter"
     @click="toggleFullScreen"
   >
-    {{ $t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
+    {{ t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
   </UiButton>
   <UiButton
     class="button"
@@ -18,7 +18,7 @@
     :left-icon="faArrowUpRightFromSquare"
     @click="openInNewTab"
   >
-    {{ $t('open-console-in-new-tab') }}
+    {{ t('open-console-in-new-tab') }}
   </UiButton>
   <UiButton
     class="button"
@@ -28,7 +28,7 @@
     :left-icon="faKeyboard"
     @click="sendCtrlAltDel"
   >
-    {{ $t('send-ctrl-alt-del') }}
+    {{ t('send-ctrl-alt-del') }}
   </UiButton>
 </template>
 
@@ -45,12 +45,15 @@ import {
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 defineProps<{
   sendCtrlAltDel: () => void
 }>()
 
+const { t } = useI18n()
+
 const router = useRouter()
 const uiStore = useUiStore()
 

package/lib/components/console/VtsClipboardConsole.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="vts-clipboard-console">
-    <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
-    <UiTextarea v-tooltip="$t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
+    <UiCardTitle>{{ t('console-clipboard') }}</UiCardTitle>
+    <UiTextarea v-tooltip="t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
     <div class="buttons-container">
-      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
-        {{ $t('send') }}
+      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
+        {{ t('send') }}
       </UiButton>
-      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
-        {{ $t('receive') }}
+      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
+        {{ t('receive') }}
       </UiButton>
     </div>
   </div>
@@ -19,8 +19,11 @@ import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiTextarea from '@core/components/ui/text-area/UiTextarea.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const modelValue = ref('')
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -1,29 +1,22 @@
 <template>
-  <UiButtonIcon v-tooltip="copied && $t('core.copied')" :icon size="medium" accent="brand" @click="copyToClipboard()" />
+  <UiButtonIcon v-tooltip="copied && t('core.copied')" :icon size="medium" accent="brand" @click="copy()" />
 </template>
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCheckCircle, faCopy } from '@fortawesome/free-solid-svg-icons'
-import { useClipboard, useTimeoutFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { value } = defineProps<{
   value: string
 }>()
 
-const { copy, copied } = useClipboard()
+const { t } = useI18n()
 
-const icon = ref(faCopy)
+const { copy, copied } = useClipboard({ source: () => value })
 
-const { start: changeIcon } = useTimeoutFn(() => {
-  icon.value = faCopy
-}, 1_500) // 1.5s is time to toltips is visible
-
-function copyToClipboard() {
-  copy(value)
-  icon.value = faCheckCircle
-  changeIcon()
-}
+const icon = computed(() => (copied.value ? faCheckCircle : faCopy))
 </script>

package/lib/components/dropdown/DropdownTitle.vue

@@ -10,10 +10,10 @@
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
       <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">
-        {{ $t('core.select.all') }}
+        {{ t('core.select.all') }}
       </span>
       <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">
-        {{ $t('core.select.none') }}
+        {{ t('core.select.none') }}
       </span>
     </div>
   </div>
@@ -22,6 +22,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useI18n } from 'vue-i18n'
 
 withDefaults(
   defineProps<{
@@ -35,6 +36,8 @@ withDefaults(
 const emit = defineEmits<{
   toggleSelectAll: [value: boolean]
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/icon/NewVtsIcon.vue

@@ -0,0 +1,49 @@
+<template>
+  <DisplayIcon v-if="icon" class="vts-icon" :class="className" :icon />
+</template>
+
+<script lang="ts" setup>
+import { type IconName, icons } from '@core/icons'
+import { DisplayIcon } from '@core/packages/icon'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+export type IconSize = 'small' | 'medium' | 'large' | 'current'
+
+const { size, name } = defineProps<{
+  size: IconSize
+  name: IconName
+}>()
+
+const className = computed(() =>
+  toVariants({
+    size: size === 'current' ? undefined : size,
+  })
+)
+
+const icon = computed(() => {
+  const icon = icons[name]
+
+  if (icon === undefined) {
+    console.warn(`Icon "${name}" not found.`)
+  }
+
+  return icon
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-icon {
+  &.size--small {
+    font-size: 1.2rem;
+  }
+
+  &.size--medium {
+    font-size: 1.6rem;
+  }
+
+  &.size--large {
+    font-size: 2rem;
+  }
+}
+</style>

package/lib/components/input-group/VtsInputGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="vts-input-group">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.vts-input-group {
+  display: flex;
+  align-items: center;
+
+  :slotted(> .ui-input),
+  :slotted(> .vts-select) {
+    &:hover {
+      z-index: 1;
+    }
+
+    &:focus-within {
+      z-index: 2;
+    }
+
+    &:not(:first-child) {
+      margin-left: -1px;
+
+      &,
+      .ui-input {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      &,
+      .ui-input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}
+</style>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -20,8 +20,8 @@
 <script lang="ts" setup>
 import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
-import { useMapper } from '@core/composables/mapper.composable'
 import { useRanked } from '@core/composables/ranked.composable.ts'
+import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import type { MaybeArray } from '@core/types/utility.type'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toArray } from '@core/utils/to-array.utils'
@@ -70,7 +70,7 @@ const labelAccent = useMapper<InfoAccent, LabelAccent>(
     danger: 'danger',
     muted: 'neutral',
   },
-  'neutral'
+  'info'
 )
 
 const wrapperController = reactive({

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -6,12 +6,12 @@
     <div v-if="!ui.isMobile" class="lock">
       <UiButtonIcon
         v-tooltip="{
-          content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
+          content: sidebar.isLocked ? t('core.sidebar.unlock') : t('core.sidebar.lock'),
           placement: 'right',
         }"
         accent="brand"
         size="medium"
-        :icon="sidebar.isLocked ? faLock : faLockOpen"
+        :icon="sidebar.isLocked ? faThumbTackSlash : faThumbTack"
         @click="sidebar.toggleLock()"
       />
     </div>
@@ -38,7 +38,8 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
-import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+import { faThumbTack, faThumbTackSlash } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
 
 const slots = defineSlots<{
   default(): any
@@ -46,6 +47,8 @@ const slots = defineSlots<{
   footer?(): any
 }>()
 
+const { t } = useI18n()
+
 const sidebar = useSidebarStore()
 const ui = useUiStore()
 </script>

package/lib/components/linear-chart/VtsLinearChart.vue

@@ -29,6 +29,10 @@ const valueFormatter = computed<ValueFormatter>(() => {
   const formatter = _valueFormatter
 
   return value => {
+    if (value === null) {
+      return ''
+    }
+
     if (formatter === undefined) {
       return value.toString()
     }

package/lib/components/object-icon/VtsObjectIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <NewVtsIcon :name="iconName" :size />
+</template>
+
+<script generic="TType extends ObjectIconType" lang="ts" setup>
+import NewVtsIcon, { type IconSize } from '@core/components/icon/NewVtsIcon.vue'
+import type { ObjectIconName } from '@core/icons'
+import { computed } from 'vue'
+
+export type ObjectIconType = ObjectIconName extends `object:${infer TType}:${string}` ? TType : never
+
+export type ObjectIconState<TType extends ObjectIconType> =
+  Extract<ObjectIconName, `object:${TType}:${string}`> extends `object:${TType}:${infer TState}` ? TState : never
+
+const { type, state } = defineProps<{
+  type: TType
+  state: ObjectIconState<TType>
+  size: IconSize
+}>()
+
+const iconName = computed(() => `object:${type}:${state}` as ObjectIconName)
+</script>

package/lib/components/quick-info-card/VtsQuickInfoCard.vue

@@ -1,6 +1,6 @@
 <template>
   <UiCard class="vts-quick-info-card">
-    <UiCardTitle>{{ $t('quick-info') }}</UiCardTitle>
+    <UiCardTitle>{{ t('quick-info') }}</UiCardTitle>
     <VtsLoadingHero v-if="loading" type="card" />
     <div v-else class="info-container">
       <slot />
@@ -12,10 +12,13 @@
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   loading: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/select/VtsOption.vue

@@ -1,24 +1,28 @@
 <template>
   <UiDropdown
     ref="elementRef"
-    :checkbox="option.properties.multiple"
+    :accent
+    :checkbox="isMultiple"
     :disabled="option.properties.disabled"
     :hover="option.flags.active"
     :selected="option.flags.selected"
-    accent="normal"
   >
     <slot>{{ option.properties.label }}</slot>
   </UiDropdown>
 </template>
 
-<script generic="TOption extends FormOption" lang="ts" setup>
-import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
-import type { FormOption } from '@core/packages/form-select/types.ts'
-import { useFormOptionController } from '@core/packages/form-select/use-form-option-controller.ts'
+<script generic="TOption extends FormOption<{ accent?: DropdownAccent }>" lang="ts" setup>
+import UiDropdown, { type DropdownAccent } from '@core/components/ui/dropdown/UiDropdown.vue'
+import { type FormOption, IK_FORM_SELECT_CONTROLLER, useFormOptionController } from '@core/packages/form-select'
+import { computed, inject } from 'vue'
 
 const { option } = defineProps<{
   option: TOption
 }>()
 
+const accent = computed(() => option.properties.accent ?? 'normal')
+
 const { elementRef } = useFormOptionController(() => option)
+
+const { isMultiple } = inject(IK_FORM_SELECT_CONTROLLER)!
 </script>