@vc-shell/framework 1.0.53 → 1.0.54

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

@@ -32,8 +32,14 @@
       </div>
 
       <!-- Show back link when more than one blade is opened -->
-      <VcLink v-else-if="blades.length > 1" @click="$emit('backlink:click')">
-        <VcIcon icon="fas fa-chevron-left" size="s"></VcIcon>
+      <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>
@@ -43,7 +49,10 @@
 
     <!-- Toolbar container -->
     <div class="tw-flex tw-h-full tw-box-border">
-      <template v-for="(item, index) in buttons" :key="index">
+      <template
+        v-for="(item, index) in buttons"
+        :key="index"
+      >
         <template v-if="item.isVisible === undefined || item.isVisible">
           <!-- Draw custom component is it is passed -->
           <component
@@ -99,12 +108,7 @@ withDefaults(defineProps<Props>(), {
   buttons: () => [],
 });
 
-defineEmits([
-  "logo:click",
-  "backlink:click",
-  "toolbarbutton:click",
-  "menubutton:click",
-]);
+defineEmits(["logo:click", "backlink:click", "toolbarbutton:click", "menubutton:click"]);
 </script>
 
 <style lang="scss">

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

@@ -11,10 +11,19 @@
       class="vc-app-menu-item__handler"
       :class="{ 'vc-app-menu-item__handler_enabled': !sticky }"
     >
-      <VcIcon icon="fas fa-ellipsis-v" size="m" />
+      <VcIcon
+        icon="fas fa-ellipsis-v"
+        size="m"
+      />
     </div>
-    <div v-if="icon" class="vc-app-menu-item__icon">
-      <VcIcon :icon="icon" size="m" />
+    <div
+      v-if="icon"
+      class="vc-app-menu-item__icon"
+    >
+      <VcIcon
+        :icon="icon"
+        size="m"
+      />
     </div>
     <div class="vc-app-menu-item__title">
       {{ title }}

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

@@ -1,7 +1,11 @@
 <template>
   <div>
     <template v-if="component && component.url">
-      <router-link :to="component.url" custom v-slot="{ isActive, navigate }">
+      <router-link
+        :to="component.url"
+        custom
+        v-slot="{ isActive, navigate }"
+      >
         <vc-app-menu-link
           :isActive="isActive"
           :children="children"
@@ -23,8 +27,14 @@
       />
 
       <!-- Nested menu items -->
-      <div class="vc-app-menu-item__child" v-if="isOpened">
-        <template v-for="(nested, i) in children" :key="i">
+      <div
+        class="vc-app-menu-item__child"
+        v-if="isOpened"
+      >
+        <template
+          v-for="(nested, i) in children"
+          :key="i"
+        >
           <router-link
             :to="nested.component.url"
             custom
@@ -39,9 +49,7 @@
               ]"
               v-if="nested.isVisible === undefined || nested.isVisible"
               :key="i"
-              @click="
-                $emit('child:click', { item: nested, navigationCb: navigate })
-              "
+              @click="$emit('child:click', { item: nested, navigationCb: navigate })"
             >
               {{ nested.title }}
             </div>
@@ -54,10 +62,10 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from "vue";
-import {IBladeToolbar, IMenuItems} from "./../../../../../../../../core/types";
+import { IBladeToolbar, IMenuItems } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { NavigationFailure, useRoute } from "vue-router";
-import {ExtendedComponent} from "./../../../../../../../../shared";
+import { ExtendedComponent } from "./../../../../../../../../shared";
 
 export interface Props {
   sticky?: boolean;
@@ -104,18 +112,12 @@ const isOpened = ref(false);
 const isHomePage = computed(() => route.path === "/");
 
 onMounted(() => {
-  if (
-    props.children &&
-    props.children.length &&
-    props.children.find((x) => x.component?.url === route?.path)
-  ) {
+  if (props.children && props.children.length && props.children.find((x) => x.component?.url === route?.path)) {
     isOpened.value = true;
   }
 });
 
-function onMenuItemClick(
-  navigationCb?: () => Promise<void | NavigationFailure>
-) {
+function onMenuItemClick(navigationCb?: () => Promise<void | NavigationFailure>) {
   if (!props.children?.length) {
     emit("click", navigationCb);
   } else {

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

@@ -27,7 +27,10 @@
       </div>
 
       <!-- Show scrollable area with menu items -->
-      <VcContainer :noPadding="true" class="tw-grow tw-basis-0">
+      <VcContainer
+        :noPadding="true"
+        class="tw-grow tw-basis-0"
+      >
         <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4 tw-h-full">
           <template
             v-for="(item, index) in mobileMenuItems"
@@ -42,7 +45,10 @@
               ></component>
             </template>
           </template>
-          <template v-for="(item, index) in items" :key="index">
+          <template
+            v-for="(item, index) in items"
+            :key="index"
+          >
             <VcAppMenuItem
               v-if="item.isVisible === undefined || item.isVisible"
               v-bind="item"

package/ui/components/organisms/vc-app/index.ts

@@ -1,6 +1,6 @@
 import { ComponentPublicInstance } from "vue";
-import { VcAppProps } from "./vc-app-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcAppEmits, VcAppProps } from "./vc-app-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import App from "./vc-app.vue";
-export const VcApp: ComponentConstructor<ComponentPublicInstance<VcAppProps>> =
-  App;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcApp: ComponentConstructor<ComponentPublicInstance<VcAppProps, any, any, any, any, VcAppEmits>> = App;

package/ui/components/organisms/vc-app/vc-app-model.ts

@@ -1,23 +1,61 @@
 import { ExtendedComponent, IBladeElement, IOpenBlade } from "./../../../../shared";
 import { IBladeToolbar, IMenuItems } from "./../../../../core/types";
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isObject, isNumber } from "./../../../utils";
 
-export interface VcAppProps {
-  pages?: ExtendedComponent[] | undefined;
-  menuItems?: IMenuItems[] | undefined;
-  mobileMenuItems?: IMenuItems[] | undefined;
-  toolbarItems?: IBladeToolbar[] | undefined;
-  isReady?: boolean | undefined;
-  isAuthorized?: boolean | undefined;
-  logo?: string | undefined;
-  version?: string | undefined;
-  theme?: "light" | "dark" | undefined;
-  bladesRefs?: IBladeElement[] | undefined;
-  title?: string | undefined;
-  onOpen?: (args: IOpenBlade) => void;
-  onClose?: (index: number) => void;
-  "onBacklink:click"?: (index: number) => void;
-}
+export const appProps = {
+  pages: {
+    type: Array as PropType<ExtendedComponent[]>,
+    default: () => [],
+  },
+  menuItems: {
+    type: Array as PropType<IMenuItems[]>,
+    default: () => [],
+  },
+  mobileMenuItems: {
+    type: Array as PropType<IMenuItems[]>,
+    default: () => [],
+  },
+  toolbarItems: {
+    type: Array as PropType<IBladeToolbar[]>,
+    default: () => [],
+  },
+  isReady: {
+    type: Boolean,
+    default: false,
+  },
+  isAuthorized: {
+    type: Boolean,
+    default: false,
+  },
+  logo: {
+    type: String,
+    default: undefined,
+  },
+  version: {
+    type: String,
+    default: undefined,
+  },
+  theme: {
+    type: String as PropType<"light" | "dark">,
+    default: "light",
+  },
+  bladesRefs: {
+    type: Array as PropType<IBladeElement[]>,
+    default: () => [],
+  },
+  title: String,
+};
+
+export const appEmits = {
+  open: (args: IOpenBlade) => isObject(args),
+  close: (index: number) => isNumber(index),
+  "backlink:click": (index: number) => isNumber(index),
+};
+
+export type VcAppProps = ExtractTypes<typeof appProps>;
+export type VcAppEmits = typeof appEmits;
 
 export interface VcAppSlots {
   appSwitcher: () => VNode[];

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

@@ -17,11 +17,7 @@
       :blades="bladesRefs"
       :buttons="toolbarItems"
       @toolbarbutton:click="onToolbarButtonClick"
-      @menubutton:click="
-        (
-          $refs.menu as Record<'isMobileVisible', boolean>
-        ).isMobileVisible = true
-      "
+      @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
       @logo:click="openDashboard"
       :title="title"
@@ -43,9 +39,7 @@
       ></VcAppMenu>
 
       <!-- Workspace blades -->
-      <div
-        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0"
-      >
+      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0">
         <slot name="bladeNavigation"></slot>
       </div>
 
@@ -74,22 +68,11 @@ import { useRouter } from "vue-router";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import { IMenuClickEvent } from "./../../../../shared";
-import { VcAppProps } from "./vc-app-model";
-
-withDefaults(defineProps<VcAppProps>(), {
-  pages: () => [],
-  menuItems: () => [],
-  mobileMenuItems: () => [],
-  toolbarItems: () => [],
-  isReady: false,
-  isAuthorized: false,
-  logo: undefined,
-  version: undefined,
-  theme: "light",
-  bladesRefs: () => [],
-});
+import { appEmits, appProps } from "./vc-app-model";
+
+defineProps(appProps);
 
-const emit = defineEmits(["open", "close", "backlink:click"]);
+const emit = defineEmits(appEmits);
 
 console.debug("vc-app: Init vc-app");
 
@@ -132,8 +115,8 @@ defineExpose({
 
 <style lang="scss">
 :root {
-  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%),
-    linear-gradient(0deg, #e8f2f3, #e8f2f3), #eef2f8;
+  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%), linear-gradient(0deg, #e8f2f3, #e8f2f3),
+    #eef2f8;
 }
 
 .vc-app {

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -6,15 +6,17 @@
       v-if="icon"
       class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3"
     >
-      <VcIcon :icon="icon" size="xxl"></VcIcon>
+      <VcIcon
+        :icon="icon"
+        size="xxl"
+      ></VcIcon>
     </div>
 
     <div class="tw-overflow-hidden tw-grow tw-basis-0">
       <div
         class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg tw-truncate"
         :class="{
-          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium':
-            !subtitle,
+          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium': !subtitle,
         }"
       >
         {{ title }}
@@ -31,17 +33,30 @@
       <slot name="actions"></slot>
     </div>
 
-    <div v-if="!$isMobile.value" class="tw-flex tw-items-center">
+    <div
+      v-if="!$isMobile.value"
+      class="tw-flex tw-items-center"
+    >
       <template v-if="expandable">
         <div
           v-if="expanded"
           class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onCollapse"
         >
-          <VcIcon icon="fas fa-window-minimize" size="s"></VcIcon>
+          <VcIcon
+            icon="fas fa-window-minimize"
+            size="s"
+          ></VcIcon>
         </div>
-        <div v-else class="vc-blade-header__button" @click="onExpand">
-          <VcIcon icon="fas fa-window-maximize" size="s"></VcIcon>
+        <div
+          v-else
+          class="vc-blade-header__button"
+          @click="onExpand"
+        >
+          <VcIcon
+            icon="fas fa-window-maximize"
+            size="s"
+          ></VcIcon>
         </div>
       </template>
       <div

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -6,13 +6,19 @@
     :title="title as string"
   >
     <div ref="dropButtonRef">
-      <div class="vc-blade-toolbar-button__wrap" ref="bladeDropToggle">
+      <div
+        class="vc-blade-toolbar-button__wrap"
+        ref="bladeDropToggle"
+      >
         <VcIcon
           class="vc-blade-toolbar-button__icon"
           :icon="icon as string"
           size="m"
         ></VcIcon>
-        <div v-if="isExpanded" class="vc-blade-toolbar-button__title">
+        <div
+          v-if="isExpanded"
+          class="vc-blade-toolbar-button__title"
+        >
           {{ title }}
         </div>
       </div>
@@ -51,10 +57,16 @@ export default defineComponent({
 <script lang="ts" setup>
 import { VcIcon } from "./../../../../../../../components";
 import { createPopper, Instance } from "@popperjs/core";
-import { IBladeDropdownItem, IBladeToolbar } from "./../../../../../../../../core/types";
+import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 
-export interface Props extends IBladeToolbar {
+export interface Props {
   isExpanded: boolean;
+  icon?: string | (() => string);
+  title?: string | unknown;
+  bladeOptions?: Record<string, unknown>;
+  disabled?: boolean;
+  dropdownItems?: { id: number; title: string; icon?: string; clickHandler?(): void }[];
+  clickHandler?(): void;
 }
 
 export interface Emits {
@@ -140,15 +152,9 @@ function handleDropItemClick(item: IBladeDropdownItem) {
   --blade-toolbar-button-icon-color-hover: #257fad;
   --blade-toolbar-button-icon-color-disabled: #d2d4d7;
 
-  --blade-toolbar-button-background-color: var(
-    --blade-toolbar-background-color
-  );
-  --blade-toolbar-button-background-color-hover: var(
-    --blade-toolbar-background-color
-  );
-  --blade-toolbar-button-background-color-disabled: var(
-    --blade-toolbar-background-color
-  );
+  --blade-toolbar-button-background-color: var(--blade-toolbar-background-color);
+  --blade-toolbar-button-background-color-hover: var(--blade-toolbar-background-color);
+  --blade-toolbar-button-background-color-disabled: var(--blade-toolbar-background-color);
 }
 
 .vc-blade-toolbar-button {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -4,14 +4,20 @@
     class="tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:#eaedf3] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0"
     :class="{ '!tw-h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
   >
-    <div
-      class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2"
-    >
-      <template v-for="item in items" :key="item.id">
+    <div class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2">
+      <template
+        v-for="item in items"
+        :key="item.id"
+      >
         <VcBladeToolbarButton
           v-if="item.isVisible === undefined || item.isVisible"
-          v-bind="item"
           :isExpanded="isExpanded"
+          :icon="item.icon"
+          :title="item.title"
+          :bladeOptions="item.bladeOptions"
+          :disabled="item.disabled as boolean"
+          :dropdownItems="item.dropdownItems"
+          :clickHandler="item.clickHandler"
         />
       </template>
     </div>
@@ -38,18 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isExpanded = ref(true);
 try {
-  isExpanded.value =
-    localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
+  isExpanded.value = localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
 } catch (err) {
   isExpanded.value = true;
 }
 
 function toggleToolbar() {
   isExpanded.value = !isExpanded.value;
-  localStorage.setItem(
-    "VC_BLADE_TOOLBAR_IS_EXPANDED",
-    isExpanded.value.toString()
-  );
+  localStorage.setItem("VC_BLADE_TOOLBAR_IS_EXPANDED", isExpanded.value.toString());
 }
 
 function isToolbarVisible() {

package/ui/components/organisms/vc-blade/index.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcBladeProps } from "./vc-blade-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcBladeEmits, VcBladeProps } from "./vc-blade-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Blade from "./vc-blade.vue";
-export const VcBlade: ComponentConstructor<
-  ComponentPublicInstance<VcBladeProps>
-> = Blade;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcBlade: ComponentConstructor<ComponentPublicInstance<VcBladeProps, any, any, any, any, VcBladeEmits>> =
+  Blade;

package/ui/components/organisms/vc-blade/vc-blade-model.ts

@@ -1,16 +1,35 @@
 import { IBladeToolbar } from "./../../../../core/types";
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcBladeProps {
-  icon?: string | undefined;
-  title?: string | undefined;
-  subtitle?: string | undefined;
-  width?: number | string | undefined;
-  expanded?: boolean | undefined;
-  closable?: boolean | undefined;
-  toolbarItems?: IBladeToolbar[] | undefined;
-  onClose?: () => void;
-}
+export const bladeProps = {
+  icon: String,
+  title: String,
+  subtitle: String,
+  width: {
+    type: [Number, String],
+    default: "30%",
+  },
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  toolbarItems: {
+    type: Array as PropType<IBladeToolbar[]>,
+    default: () => [],
+  },
+};
+
+export const bladeEmits = {
+  close: () => true,
+};
+
+export type VcBladeProps = ExtractTypes<typeof bladeProps>;
+export type VcBladeEmits = typeof bladeEmits;
 
 export interface VcBladeSlots {
   actions: () => VNode[];

package/ui/components/organisms/vc-blade/vc-blade.stories.ts

@@ -19,8 +19,7 @@ const Template: Story = (args) => ({
   setup() {
     return { args };
   },
-  template:
-    '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
+  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
 });
 
 export const Blade = Template.bind({});

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

@@ -2,10 +2,7 @@
   <div
     class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[
-      $attrs.class,
-      { '!tw-w-full !tw-shrink': $isMobile.value || expanded },
-    ]"
+    :class="[$attrs.class, { '!tw-w-full !tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
@@ -18,13 +15,19 @@
       :subtitle="subtitle"
       @close="$emit('close')"
     >
-      <template v-slot:actions v-if="$slots['actions']">
+      <template
+        v-slot:actions
+        v-if="$slots['actions']"
+      >
         <slot name="actions"></slot>
       </template>
     </VcBladeHeader>
 
     <!-- Set up blade toolbar -->
-    <VcBladeToolbar class="tw-shrink-0" :items="toolbarItems"></VcBladeToolbar>
+    <VcBladeToolbar
+      class="tw-shrink-0"
+      :items="toolbarItems"
+    ></VcBladeToolbar>
 
     <slot></slot>
   </div>
@@ -41,16 +44,11 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcBladeProps } from "./vc-blade-model";
+import { bladeEmits, bladeProps } from "./vc-blade-model";
 
-withDefaults(defineProps<VcBladeProps>(), {
-  width: "30%",
-  expanded: false,
-  closable: true,
-  toolbarItems: () => [],
-});
+defineProps(bladeProps);
 
-defineEmits(["close"]);
+defineEmits(bladeEmits);
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,7 +1,5 @@
 import { ComponentPublicInstance } from "vue";
 import { VcDynamicPropertyProps } from "./vc-dynamic-property-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import DynamicProperty from "./vc-dynamic-property.vue";
-export const VcDynamicProperty: ComponentConstructor<
-  ComponentPublicInstance<VcDynamicPropertyProps>
-> = DynamicProperty;
+export const VcDynamicProperty: ComponentConstructor<ComponentPublicInstance<VcDynamicPropertyProps>> = DynamicProperty;