@vc-shell/framework 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "main": "./dist/framework.js",
   "module": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -28,7 +28,8 @@
   "scripts": {
     "build": "vite build",
     "development": "vite build --watch -m development",
-    "watch": "vite build --watch"
+    "watch": "vite build --watch",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.0",
@@ -50,8 +51,8 @@
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rollup/plugin-commonjs": "^21.0.2",
-    "@vc-shell/api-client-generator": "^1.0.43",
-    "@vc-shell/config-generator": "^1.0.43",
+    "@vc-shell/api-client-generator": "^1.0.45",
+    "@vc-shell/config-generator": "^1.0.45",
     "@vue-macros/volar": "^0.5.7",
     "sass": "^1.49.0",
     "typescript": "^4.6.2",
@@ -67,5 +68,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "18cd3e491a2ea3fc5ecdd4d434fe6f1601f0f2ca"
+  "gitHead": "f62c07e94d9486d3228c70855385cc7fad68274d"
 }

package/shared/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-ml-2 tw-mr-[15px] tw-shrink-0"
+    class="tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-mx-2 tw-shrink-0"
     v-click-outside="onClose"
   >
     <button

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -3,56 +3,41 @@
     class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-pl-4"
   >
     <slot name="appSwitcher"></slot>
-    <!-- Logo container for mobile devices -->
-    <template v-if="$isMobile.value">
-      <!-- Show logo on mobile dashboard -->
+
+    <template v-if="!$isMobile.value || blades.length === 0">
+      <!-- Logo -->
       <img
-        v-if="blades.length === 0"
-        class="h-3/6 tw-cursor-pointer"
+        class="tw-h-1/2 tw-cursor-pointer tw-mx-3"
         alt="logo"
         :src="logo"
         @click="$emit('logo:click')"
       />
 
+      <!-- Title -->
+      <div
+        class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium"
+        v-if="title"
+      >
+        {{ title }}
+      </div>
+    </template>
+
+    <template v-if="$isMobile.value">
       <!-- Show blades name when at least one blade is opened -->
       <div
-        v-else-if="blades.length === 1"
+        v-if="blades.length === 1"
         class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
       >
         {{ blades[0].title }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
-      <VcLink v-else @click="$emit('backlink:click')">
+      <VcLink v-else-if="blades.length > 1" @click="$emit('backlink:click')">
         <VcIcon icon="fas fa-chevron-left" size="s"></VcIcon>
         <span class="tw-ml-2 tw-text-lg">{{ $t("Back") }}</span>
       </VcLink>
     </template>
 
-    <!-- Logo container for desktop devices -->
-    <template v-else>
-      <img
-        class="tw-h-3/6 tw-cursor-pointer"
-        :src="logo"
-        alt="logo"
-        @click="$emit('logo:click')"
-      />
-      <div
-        class="tw-text-[color:var(--app-bar-version-color)] tw-text-xs tw-ml-[30px]"
-        @click="$emit('version:click')"
-      >
-        {{ version }}
-      </div>
-    </template>
-
-    <!-- Product name slot -->
-    <div
-      class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium tw-ml-[30px]"
-      v-if="title"
-    >
-      {{ title }}
-    </div>
-
     <!-- Additional spacer -->
     <div class="tw-grow tw-basis-0 tw-basis-0"></div>
 
@@ -103,7 +88,6 @@ import { IBladeElement } from "@/shared";
 
 export interface Props {
   logo: string;
-  version: string;
   blades: IBladeElement[];
   buttons: IBladeToolbar[];
   title?: string;
@@ -111,7 +95,6 @@ export interface Props {
 
 withDefaults(defineProps<Props>(), {
   logo: "",
-  version: "",
   blades: () => [],
   buttons: () => [],
 });
@@ -119,7 +102,6 @@ withDefaults(defineProps<Props>(), {
 defineEmits([
   "logo:click",
   "backlink:click",
-  "version:click",
   "toolbarbutton:click",
   "menubutton:click",
 ]);
@@ -135,7 +117,6 @@ defineEmits([
   --app-bar-button-background-color: var(--app-bar-background-color);
   --app-bar-button-color-hover: #34414f;
   --app-bar-button-background-color-hover: var(--app-bar-background-color);
-  --app-bar-version-color: #838d9a;
   --app-bar-product-name-color: #34414f;
   --app-bar-product-name-size: 20px;
 }

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -28,7 +28,7 @@
 
       <!-- Show scrollable area with menu items -->
       <VcContainer :noPadding="true" class="tw-grow tw-basis-0">
-        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4">
+        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4 tw-h-full">
           <template
             v-for="(item, index) in mobileMenuItems"
             :key="`info_item_${index}`"
@@ -38,7 +38,7 @@
                 v-if="item.component"
                 :is="item.component"
                 v-bind="item.bladeOptions"
-                class="tw-p-0 tw-mb-2 tw-w-full"
+                class="tw-p-0 tw-mb-2 tw-w-full tw-h-auto"
               ></component>
             </template>
           </template>
@@ -60,6 +60,12 @@
               "
             />
           </template>
+          <div
+            class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
+            @click="$emit('version:click')"
+          >
+            {{ version }}
+          </div>
         </div>
       </VcContainer>
     </div>
@@ -76,15 +82,18 @@ import { IMenuClickEvent } from "@/shared";
 export interface Props {
   items?: IMenuItems[];
   mobileMenuItems?: IMenuItems[];
+  version: string;
 }
 
 export interface Emits {
   (event: "item:click", { item, navigationCb }: IMenuClickEvent): void;
+  (event: "version:click"): void;
 }
 
 withDefaults(defineProps<Props>(), {
   items: () => [],
   mobileMenuItems: () => [],
+  version: "",
 });
 
 defineEmits<Emits>();
@@ -100,6 +109,7 @@ defineExpose({
 :root {
   --app-menu-width: 230px;
   --app-menu-background-color: #ffffff;
+  --app-menu-version-color: #838d9a;
 }
 
 .vc-app-menu {

package/ui/components/organisms/vc-app/vc-app.vue

@@ -15,7 +15,6 @@
       class="tw-shrink-0"
       :logo="logo"
       :blades="bladesRefs"
-      :version="version"
       :buttons="toolbarItems"
       @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="$refs.menu.isMobileVisible = true"
@@ -34,6 +33,7 @@
         ref="menu"
         class="tw-shrink-0"
         :items="menuItems"
+        :version="version"
         :mobileMenuItems="mobileMenuItems"
         @item:click="onMenuItemClick"
       ></VcAppMenu>

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -65,7 +65,10 @@
   </template>
 
   <!-- Status icon cell -->
-  <div v-else-if="cell.type === 'status-icon'" class= "tw-flex tw-justify-center">
+  <div
+    v-else-if="cell.type === 'status-icon'"
+    class="tw-flex tw-justify-center"
+  >
     <VcStatusIcon :status="value"></VcStatusIcon>
   </div>
 
@@ -102,12 +105,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const locale = window.navigator.language;
-const value = computed(() =>
-  (props.cell.field || props.cell.id)
+const value = computed(() => {
+  return (props.cell.field || props.cell.id)
     .split(".")
-    .reduce(
-      (p: { [x: string]: unknown }, c: string) => (p && p[c]) || null,
-      props.item
-    )
-);
+    .reduce((p: { [x: string]: unknown }, c: string) => {
+      if (p && Array.isArray(p) && p.length) {
+        return (p && p[0][c]) || null;
+      }
+      return (p && p[c]) || null;
+    }, props.item);
+});
 </script>