@xen-orchestra/web-core 0.0.1 → 0.0.3

package/lib/components/table/UiTable.vue

@@ -0,0 +1,58 @@
+<template>
+  <table :class="{ 'vertical-border': verticalBorder }" class="ui-table typo p2-regular">
+    <slot />
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { provide } from 'vue'
+
+const props = defineProps<{
+  name?: string
+  verticalBorder?: boolean
+}>()
+
+provide('tableName', props.name)
+</script>
+
+<style lang="postcss" scoped>
+.ui-table {
+  width: 100%;
+  border-spacing: 0;
+  background-color: var(--background-color-primary);
+  line-height: 2.4rem;
+  color: var(--color-grey-200);
+
+  :deep(th),
+  :deep(td) {
+    padding: 1rem;
+    border-top: 0.1rem solid var(--color-grey-500);
+    text-align: left;
+  }
+
+  :deep(th) {
+    font-weight: 700;
+  }
+
+  :deep(thead) {
+    th,
+    td {
+      color: var(--color-purple-base);
+      font-size: 1.4rem;
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+  }
+
+  &.vertical-border {
+    :deep(th),
+    :deep(td) {
+      border-right: 0.1rem solid var(--color-grey-500);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

package/lib/components/tooltip/TooltipList.vue

@@ -11,5 +11,3 @@ import { storeToRefs } from 'pinia'
 const tooltipStore = useTooltipStore()
 const { tooltips } = storeToRefs(tooltipStore)
 </script>
-
-<style scoped></style>

package/lib/components/tree/TreeItemLabel.vue

@@ -51,6 +51,10 @@ import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineProps<{
   icon?: IconDefinition
   route: RouteLocationRaw

package/lib/composables/tree/types.ts

@@ -1,9 +1,9 @@
-import { useTree } from '@core/composables/tree.composable'
 import type { Branch } from '@core/composables/tree/branch'
 import type { BranchDefinition } from '@core/composables/tree/branch-definition'
 import type { Leaf } from '@core/composables/tree/leaf'
 import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
 import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { useTree } from '@core/composables/tree.composable'
 
 export type TreeNodeId = string | number
 

package/lib/i18n.ts

@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 interface Locales {
   [key: string]: {
@@ -27,6 +27,15 @@ export default createI18n({
   locale: localStorage.getItem('lang') ?? 'en',
   fallbackLocale: 'en',
   messages,
+  missing: (locale, key, vm) => {
+    if (!import.meta.env.DEV) {
+      return key
+    }
+
+    console.warn(`i18n key not found: ${key}`, `Used in ${vm?.type.__name ?? 'unknown component'}`)
+
+    return `🌎❗⟨${key}⟩`
+  },
   datetimeFormats: {
     en: {
       date_short: {
@@ -155,4 +164,27 @@ export default createI18n({
       },
     },
   },
+  numberFormats: {
+    en: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    fr: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    de: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+  },
 })

package/lib/layouts/CoreLayout.vue

@@ -16,7 +16,7 @@
     <div class="container">
       <div
         v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
-        class="sidebar-overlay"
+        class="sidebar-close-backdrop"
         @click="sidebarStore.toggleExpand(false)"
       />
       <LayoutSidebar class="sidebar">
@@ -30,30 +30,9 @@
           <slot name="sidebar-footer" />
         </template>
       </LayoutSidebar>
-      <div class="main-container">
-        <header>
-          <slot name="content-header" />
-        </header>
-        <main class="main">
-          <div class="content">
-            <slot name="content" />
-          </div>
-          <div v-if="isPanelVisible" :class="{ mobile: uiStore.isMobile }" class="panel">
-            <header v-if="$slots['panel-header'] || uiStore.isMobile" class="panel-header">
-              <UiButtonIcon
-                v-if="uiStore.isMobile"
-                :icon="faAngleLeft"
-                class="panel-close-icon"
-                @click="panelStore.close()"
-              />
-              <slot name="panel-header" />
-            </header>
-            <div v-if="$slots['panel-content']" class="panel-content">
-              <slot name="panel-content" />
-            </div>
-          </div>
-        </main>
-      </div>
+      <main class="main-container">
+        <slot name="content" />
+      </main>
     </div>
   </div>
 </template>
@@ -62,39 +41,14 @@
 import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
 import LayoutSidebar from '@core/components/layout/LayoutSidebar.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { usePanelStore } from '@core/stores/panel.store'
 import { useSidebarStore } from '@core/stores/sidebar.store'
-import { useUiStore } from '@core/stores/ui.store'
-import { faAngleDoubleLeft, faAngleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
 
 const sidebarStore = useSidebarStore()
-const panelStore = usePanelStore()
-const uiStore = useUiStore()
-
-const slots = defineSlots<{
-  'app-logo'(): any
-  'app-header'(): any
-  'sidebar-header'(): any
-  'sidebar-content'(): any
-  'sidebar-footer'(): any
-  'content-header'(): any
-  content(): any
-  'panel-header'(): any
-  'panel-content'(): any
-}>()
-
-const isPanelVisible = computed(() => {
-  if (!slots['panel-header'] && !slots['panel-content']) {
-    return false
-  }
-
-  return panelStore.isExpanded
-})
 </script>
 
 <style lang="postcss" scoped>
-.sidebar-overlay {
+.sidebar-close-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -132,51 +86,6 @@ const isPanelVisible = computed(() => {
   overflow: auto;
   display: flex;
   flex-direction: column;
-}
-
-.main {
-  background-color: var(--background-color-secondary);
-  display: flex;
-  flex: 1;
-}
-
-.content {
-  padding: 0.8rem;
-  flex: 1;
-  border-right: 0.1rem solid var(--color-grey-500);
-}
-
-.panel {
-  display: flex;
-  flex-direction: column;
-  width: 40rem;
   background-color: var(--background-color-secondary);
-
-  &.mobile {
-    width: 100%;
-    position: fixed;
-    inset: 0 0 0 auto;
-    z-index: 1000;
-  }
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 0.4rem 1.6rem;
-  background-color: var(--background-color-primary);
-  border-bottom: 0.1rem solid var(--color-grey-500);
-  min-height: 4.8rem;
-}
-
-.panel-close-icon {
-  margin-right: auto;
-}
-
-.panel-content {
-  flex: 1;
-  padding: 0.8rem;
-  overflow: auto;
-  min-height: 0;
 }
 </style>

package/lib/locales/de.json

@@ -1,6 +1,33 @@
 {
-  "core": {
-    "close": "Schließen",
-    "log-out": "Abmelden"
-  }
+  "alarms": "Alarme",
+
+  "bytes.ki": "KiB",
+  "bytes.mi": "MiB",
+  "bytes.gi": "GiB",
+
+  "coming-soon": "Bald verfügbar!",
+  "console": "Konsole",
+
+  "core.close": "Schließen",
+
+  "core.select.all": "Alles auswählen",
+  "core.select.none": "Alle abwählen",
+
+  "dark-mode.enable": "Aktivieren Sie den Dunkelmodus",
+  "dark-mode.disable": "Deaktivieren Sie den Dunkelmodus",
+  "dark-mode.auto": "Automatischer Dunkelmodus",
+
+  "dashboard": "Dashboard",
+  "documentation-name": "{name} Dokumentation",
+  "loading-in-progress": "Ladevorgang läuft…",
+  "log-out": "Abmelden",
+  "master": "Primärer Host",
+  "network": "Netzwerk",
+  "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
+  "stats": "Statistiken",
+  "storage": "Speicher",
+  "support-name": "{name} pro support",
+  "system": "System",
+  "tasks": "Aufgaben"
 }

package/lib/locales/en.json

@@ -1,15 +1,47 @@
 {
-  "core": {
-    "close": "Close",
-    "log-out": "Log out",
-    "master": "Primary host",
-    "open": "Open",
-    "quick-actions": "Quick actions",
-    "sidebar": {
-      "close": "Close sidebar",
-      "lock": "Lock sidebar open",
-      "open": "Open sidebar",
-      "unlock": "Unlock sidebar"
-    }
-  }
+  "alarms": "Alarms",
+
+  "bytes.ki": "KiB",
+  "bytes.mi": "MiB",
+  "bytes.gi": "GiB",
+
+  "coming-soon": "Coming soon!",
+  "console": "Console",
+
+  "core.close": "Close",
+  "core.current": "Current",
+  "core.filter": "Filter",
+  "core.group": "Group",
+  "core.hide": "Hide",
+  "core.open": "Open",
+  "core.quick-actions": "Quick actions",
+
+  "core.select.all": "Select all",
+  "core.select.none": "Select none",
+
+  "core.sidebar.close": "Close sidebar",
+  "core.sidebar.lock": "Lock sidebar open",
+  "core.sidebar.open": "Open sidebar",
+  "core.sidebar.unlock": "Unlock sidebar",
+
+  "core.sort.ascending": "Sort ascending",
+  "core.sort.descending": "Sort descending",
+
+  "dark-mode.enable": "Enable dark mode",
+  "dark-mode.disable": "Disable dark mode",
+  "dark-mode.auto": "Auto dark mode",
+
+  "dashboard": "Dashboard",
+  "documentation-name": "{name} documentation",
+  "loading-in-progress": "Loading in progress…",
+  "log-out": "Log out",
+  "master": "Primary host",
+  "network": "Network",
+  "object-not-found": "Object {id} can't be found…",
+  "power-on-for-console": "Power on your VM to access its console",
+  "stats": "Stats",
+  "storage": "Storage",
+  "support-name": "{name} pro support",
+  "system": "System",
+  "tasks": "Tasks"
 }

package/lib/locales/fr.json

@@ -1,15 +1,47 @@
 {
-  "core": {
-    "close": "Fermer",
-    "log-out": "Se déconnecter",
-    "master": "Hôte primaire",
-    "open": "Ouvrir",
-    "quick-actions": "Actions rapides",
-    "sidebar": {
-      "close": "Fermer la barre latérale",
-      "lock": "Verrouiller la barre latérale",
-      "open": "Ouvrir la barre latérale",
-      "unlock": "Déverrouiller la barre latérale"
-    }
-  }
+  "alarms": "Alarmes",
+
+  "bytes.ki": "Kio",
+  "bytes.mi": "Mio",
+  "bytes.gi": "Gio",
+
+  "coming-soon": "Bientôt disponible !",
+  "console": "Console",
+
+  "core.close": "Fermer",
+  "core.current": "Actuel",
+  "core.filter": "Filtrer",
+  "core.group": "Grouper",
+  "core.hide": "Masquer",
+  "core.open": "Ouvrir",
+  "core.quick-actions": "Actions rapides",
+
+  "core.select.all": "Tout sélectionner",
+  "core.select.none": "Tout désélectionner",
+
+  "core.sidebar.close": "Fermer la barre latérale",
+  "core.sidebar.lock": "Verrouiller la barre latérale",
+  "core.sidebar.open": "Ouvrir la barre latérale",
+  "core.sidebar.unlock": "Déverrouiller la barre latérale",
+
+  "core.sort.ascending": "Trier par ordre croissant",
+  "core.sort.descending": "Trier par ordre décroissant",
+
+  "dark-mode.enable": "Activer le mode sombre",
+  "dark-mode.disable": "Désactiver le mode sombre",
+  "dark-mode.auto": "Mode sombre automatique",
+
+  "dashboard": "Tableau de bord",
+  "documentation-name": "Documentation {name}",
+  "loading-in-progress": "Chargement en cours…",
+  "log-out": "Se déconnecter",
+  "master": "Hôte primaire",
+  "network": "Réseau",
+  "object-not-found": "L'objet {id} est introuvable…",
+  "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "stats": "Stats",
+  "storage": "Stockage",
+  "support-name": "Support pro {name}",
+  "system": "Système",
+  "tasks": "Tâches"
 }

package/lib/types/iterable-backoff.d.ts

@@ -0,0 +1 @@
+declare module 'iterable-backoff'

package/lib/types/utility.type.ts

@@ -1 +1,3 @@
 export type MaybeArray<T> = T | T[]
+
+export type Noop = () => void

package/lib/utils/if-else.utils.ts

@@ -1,4 +1,4 @@
-import type { MaybeArray } from '@core/types/utility.type'
+import type { MaybeArray, Noop } from '@core/types/utility.type'
 import { toArray } from '@core/utils/to-array.utils'
 import { watch, type WatchOptions, type WatchSource } from 'vue'
 
@@ -6,8 +6,8 @@ export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
 
 export function ifElse(
   source: WatchSource<boolean>,
-  onTrue: MaybeArray<VoidFunction>,
-  onFalse: MaybeArray<VoidFunction>,
+  onTrue: MaybeArray<Noop>,
+  onFalse: MaybeArray<Noop>,
   options?: IfElseOptions
 ) {
   const onTrueFunctions = toArray(onTrue)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "exports": {
     "./*": {
@@ -9,17 +9,30 @@
       "import": "./lib/*"
     }
   },
-  "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+  "dependencies": {
+    "@fontsource/poppins": "^5.0.14",
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@types/lodash-es": "^4.17.12",
-    "@vue/tsconfig": "^0.5.1",
+    "@novnc/novnc": "^1.4.0",
     "@vueuse/core": "^10.7.1",
+    "@vueuse/shared": "^10.7.1",
+    "iterable-backoff": "^0.1.0",
     "lodash-es": "^4.17.21",
+    "placement.js": "^1.0.0-beta.5"
+  },
+  "peerDependencies": {
+    "pinia": "^2.1.7",
+    "vue": "^3.4.13",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/novnc__novnc": "^1.3.5",
+    "@vue/tsconfig": "^0.5.1",
     "pinia": "^2.1.7",
-    "placement.js": "^1.0.0-beta.5",
     "vue": "^3.4.13",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5"