@vc-shell/framework 1.0.53 → 1.0.56

package/ui/components/molecules/vc-slider/index.ts

@@ -1,7 +1,12 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSliderProps } from "./vc-slider-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Slider from "./vc-slider.vue";
-export const VcSlider: ComponentConstructor<
-  ComponentPublicInstance<VcSliderProps>
-> = Slider;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcSliderSlots = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default?: (args: { slide: Record<string, unknown> | any }) => VNode[];
+  prevBtn?: () => VNode[];
+  nextBtn?: () => VNode[];
+};
+
+export const VcSlider: GlobalComponentConstructor<typeof Slider, VcSliderSlots> = Slider;

package/ui/components/molecules/vc-slider/vc-slider.vue

@@ -48,17 +48,23 @@ import SwiperCore, { Navigation } from "swiper";
 import "swiper/swiper-bundle.min.css";
 import "swiper/swiper.min.css";
 import "swiper/components/navigation/navigation.min.css";
-import { VcSliderProps } from "./vc-slider-model";
-SwiperCore.use([Navigation]);
 
-withDefaults(defineProps<VcSliderProps>(), {
+export interface Props {
+  slides?: Record<string, unknown>[] | unknown[];
+  navigation?: boolean;
+  overflow?: boolean;
+  slidesPerView?: string | "auto";
+  spaceBetweenSlides?: number;
+}
+
+withDefaults(defineProps<Props>(), {
   slides: () => [],
-  navigation: false,
-  overflow: false,
   slidesPerView: "auto",
   spaceBetweenSlides: 10,
 });
 
+SwiperCore.use([Navigation]);
+
 const buttonsList = computed(() => ({
   nextEl: ".vc-slider__next",
   prevEl: ".vc-slider__prev",

package/ui/components/molecules/vc-textarea/index.ts

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcTextareaProps } from "./vc-textarea-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Textarea from "./vc-textarea.vue";
-export const VcTextarea: ComponentConstructor<
-  ComponentPublicInstance<VcTextareaProps>
-> = Textarea;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcTextareaSlots = {
+  error?: () => VNode[];
+};
+
+export const VcTextarea: GlobalComponentConstructor<typeof Textarea, VcTextareaSlots> = Textarea;

package/ui/components/molecules/vc-textarea/vc-textarea.vue

@@ -7,9 +7,16 @@
     }"
   >
     <!-- Textarea label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+      >
         <span v-html="tooltip"></span>
       </template>
     </VcLabel>
@@ -26,7 +33,10 @@
       ></textarea>
     </div>
 
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-textarea__error">
         {{ errorMessage }}
       </VcHint>
@@ -37,17 +47,29 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import { VcLabel } from "./../../../components";
-import { VcTextareaProps } from "./vc-textarea-model";
 
-const props = withDefaults(defineProps<VcTextareaProps>(), {
-  placeholder: "",
-  required: false,
-  disabled: false,
+export interface Props {
+  placeholder?: string;
+  modelValue: string;
+  required?: boolean;
+  disabled?: boolean;
+  label?: string;
+  tooltip?: string;
+  name?: string;
+  maxchars?: string;
+  errorMessage?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   name: "Field",
   maxchars: "1024",
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits<Emits>();
 
 watch(
   () => props.modelValue,
@@ -57,7 +79,7 @@ watch(
 );
 
 // Handle input event to propertly validate value and emit changes
-function onInput(e: InputEvent) {
+function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:modelValue", newValue);
 }

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,12 @@
-import { ComponentPublicInstance } from "vue";
-import { VcAppProps } from "./vc-app-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import App from "./vc-app.vue";
-export const VcApp: ComponentConstructor<ComponentPublicInstance<VcAppProps>> =
-  App;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcAppSlots = {
+  appSwitcher?: () => VNode[];
+  bladeNavigation?: () => VNode[];
+  notifications?: () => VNode[];
+  passwordChange?: () => VNode[];
+};
+
+export const VcApp: GlobalComponentConstructor<typeof App, VcAppSlots> = App;

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>
 
@@ -63,6 +57,7 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from "vue";
+import { IMenuItems, IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -73,23 +68,38 @@ export default defineComponent({
 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";
+import { ExtendedComponent, IBladeElement, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
+
+export interface Props {
+  pages?: ExtendedComponent[];
+  menuItems?: IMenuItems[];
+  mobileMenuItems?: IMenuItems[];
+  toolbarItems?: IBladeToolbar[];
+  isReady?: boolean;
+  isAuthorized?: boolean;
+  logo?: string;
+  version?: string;
+  theme?: "light" | "dark";
+  bladesRefs?: IBladeElement[];
+  title?: string;
+}
+
+export interface Emits {
+  (event: "open", args: IOpenBlade): void;
+  (event: "close", index: number): void;
+  (event: "backlink:click", index: number): void;
+}
 
-withDefaults(defineProps<VcAppProps>(), {
+withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],
   mobileMenuItems: () => [],
   toolbarItems: () => [],
-  isReady: false,
-  isAuthorized: false,
-  logo: undefined,
-  version: undefined,
   theme: "light",
   bladesRefs: () => [],
 });
 
-const emit = defineEmits(["open", "close", "backlink:click"]);
+const emit = defineEmits<Emits>();
 
 console.debug("vc-app: Init vc-app");
 
@@ -100,7 +110,7 @@ const router = useRouter();
 const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler(instance?.exposed);
+    item.clickHandler(instance?.exposed as Record<string, unknown>);
   } else {
     emit("open", { parentBlade: item.component, id: 0, navigationCb });
   }
@@ -132,8 +142,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,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBladeProps } from "./vc-blade-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Blade from "./vc-blade.vue";
-export const VcBlade: ComponentConstructor<
-  ComponentPublicInstance<VcBladeProps>
-> = Blade;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcBladeSlots = {
+  actions?: () => VNode[];
+  default?: () => VNode[];
+};
+
+export const VcBlade: GlobalComponentConstructor<typeof Blade, VcBladeSlots> = Blade;

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({});