@vc-shell/framework 1.0.52 → 1.0.54

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcSliderProps } from "./vc-slider-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Slider from "./vc-slider.vue";
+export const VcSlider: ComponentConstructor<ComponentPublicInstance<VcSliderProps>> = Slider;

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

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const sliderProps = {
+  slides: {
+    type: Array as PropType<Record<string, unknown>[] | any[]>,
+    default: () => [],
+  },
+  navigation: {
+    type: Boolean,
+    default: false,
+  },
+  overflow: {
+    type: Boolean,
+    default: false,
+  },
+  slidesPerView: {
+    type: String as PropType<string | "auto">,
+    default: "auto",
+  },
+  spaceBetweenSlides: {
+    type: Number,
+    default: 10,
+  },
+};
+
+export type VcSliderProps = ExtractTypes<typeof sliderProps>;
+
+export interface VcSliderSlots {
+  default: (args: { slide: Record<string, unknown> | any }) => VNode[];
+  prevBtn: () => VNode[];
+  nextBtn: () => VNode[];
+}

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

@@ -48,34 +48,10 @@ import SwiperCore, { Navigation } from "swiper";
 import "swiper/swiper-bundle.min.css";
 import "swiper/swiper.min.css";
 import "swiper/components/navigation/navigation.min.css";
+import { sliderProps } from "./vc-slider-model";
 SwiperCore.use([Navigation]);
 
-defineProps({
-  slides: {
-    type: Array,
-    default: () => [],
-  },
-
-  navigation: {
-    type: Boolean,
-    default: false,
-  },
-
-  overflow: {
-    type: Boolean,
-    default: false,
-  },
-
-  slidesPerView: {
-    type: String,
-    default: "auto",
-  },
-
-  spaceBetweenSlides: {
-    type: Number,
-    default: 10,
-  },
-});
+defineProps(sliderProps);
 
 const buttonsList = computed(() => ({
   nextEl: ".vc-slider__next",

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

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcTextareaEmits, VcTextareaProps } from "./vc-textarea-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Textarea from "./vc-textarea.vue";
+export const VcTextarea: ComponentConstructor<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcTextareaProps, any, any, any, any, VcTextareaEmits>
+> = Textarea;

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

@@ -0,0 +1,41 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString } from "./../../../utils";
+
+export const textareaProps = {
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  modelValue: String,
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+  tooltip: String,
+  name: {
+    type: String,
+    default: "Field",
+  },
+  maxchars: {
+    type: String,
+    default: "1024",
+  },
+  errorMessage: String,
+};
+
+export const textareaEmits = {
+  "update:modelValue": (value: string) => isString(value),
+};
+
+export type VcTextareaProps = ExtractTypes<typeof textareaProps>;
+export type VcTextareaEmits = typeof textareaEmits;
+
+export interface VcTextareaSlots {
+  error: () => VNode[];
+}

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

@@ -7,9 +7,16 @@
     }"
   >
     <!-- Textarea label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
+    <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>
@@ -36,56 +46,12 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import { VcLabel } from "@/ui/components";
-
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  modelValue: {
-    type: String,
-    default: undefined,
-  },
-
-  isRequired: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  maxchars: {
-    type: String,
-    default: "1024",
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
+import { VcLabel } from "./../../../components";
+import { textareaEmits, textareaProps } from "./vc-textarea-model";
+
+const props = defineProps(textareaProps);
+
+const emit = defineEmits(textareaEmits);
 
 watch(
   () => props.modelValue,

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
@@ -82,9 +91,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
-import { IBladeToolbar } from "@/core/types";
-import { IBladeElement } from "@/shared";
+import { VcIcon } from "./../../../../../components";
+import { IBladeToolbar } from "./../../../../../../core/types";
+import { IBladeElement } from "./../../../../../../shared";
 
 export interface Props {
   logo: string;
@@ -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 }}
@@ -28,7 +37,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ExtendedComponent } from "@/shared";
+import { ExtendedComponent } from "./../../../../../../../../../shared";
 
 export interface Props {
   isActive?: boolean;

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,9 +62,10 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from "vue";
-import {ExtendedComponent, 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";
 
 export interface Props {
   sticky?: boolean;
@@ -103,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"
@@ -77,9 +83,9 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
-import { VcContainer } from "@/ui/components";
-import { IMenuItems } from "@/core/types";
-import { IMenuClickEvent } from "@/shared";
+import { VcContainer } from "./../../../../../components";
+import { IMenuItems } from "./../../../../../../core/types";
+import { IMenuClickEvent } from "./../../../../../../shared";
 
 export interface Props {
   items?: IMenuItems[];

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

@@ -0,0 +1,6 @@
+import { ComponentPublicInstance } from "vue";
+import { VcAppEmits, VcAppProps } from "./vc-app-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import App from "./vc-app.vue";
+// 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

@@ -0,0 +1,65 @@
+import { ExtendedComponent, IBladeElement, IOpenBlade } from "./../../../../shared";
+import { IBladeToolbar, IMenuItems } from "./../../../../core/types";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isObject, isNumber } from "./../../../utils";
+
+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[];
+  bladeNavigation: () => VNode[];
+  notifications: () => VNode[];
+  passwordChange: () => 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>
 
@@ -73,48 +67,12 @@ 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 { IBladeToolbar, IMenuItems } from "@/core/types";
-import {
-  IBladeElement,
-  ExtendedComponent,
-  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;
-}
+import { IMenuClickEvent } from "./../../../../shared";
+import { appEmits, appProps } from "./vc-app-model";
 
-export interface Emits {
-  (event: "onOpen", args: IOpenBlade): void;
-  (event: "onClose", index: number): void;
-  (event: "backlink:click", index: number): void;
-}
-
-withDefaults(defineProps<Props>(), {
-  pages: () => [],
-  menuItems: () => [],
-  mobileMenuItems: () => [],
-  toolbarItems: () => [],
-  isReady: false,
-  isAuthorized: false,
-  logo: undefined,
-  version: undefined,
-  theme: "light",
-  bladesRefs: () => [],
-});
+defineProps(appProps);
 
-const emit = defineEmits<Emits>();
+const emit = defineEmits(appEmits);
 
 console.debug("vc-app: Init vc-app");
 
@@ -127,7 +85,7 @@ const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   if (item.clickHandler && typeof item.clickHandler === "function") {
     item.clickHandler(instance?.exposed);
   } else {
-    emit("onOpen", { parentBlade: item.component, id: 0, navigationCb });
+    emit("open", { parentBlade: item.component, id: 0, navigationCb });
   }
 };
 
@@ -143,7 +101,7 @@ const openDashboard = async () => {
   console.debug(`openDashboard() called.`);
 
   // Close all opened pages with onBeforeClose callback
-  await emit("onClose", 0);
+  await emit("close", 0);
 
   router.push("/");
 };
@@ -157,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 {