@vc-shell/framework 1.0.53 → 1.0.54

package/shared/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -33,17 +33,12 @@
 <script lang="ts" setup>
 import { computed, onBeforeUpdate, ref } from "vue";
 import { useRoute } from "vue-router";
-import {
-  IBladeContainer,
-  IBladeElement,
-  IBladeEvent,
-  IParentCallArgs,
-} from "./../../../../shared";
+import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../shared";
 
 export interface Props {
   blades: IBladeContainer[];
   parentBladeOptions: Record<string, unknown>;
-  parentBladeParam: string;
+  parentBladeParam?: string | undefined;
 }
 
 export interface Emits {

package/shared/blade-navigation/composables/index.ts

@@ -1 +1 @@
-export {default as useBladeNavigation} from './useBladeNavigation'
+export { default as useBladeNavigation } from "./useBladeNavigation";

package/shared/blade-navigation/composables/useBladeNavigation/index.ts

@@ -2,13 +2,7 @@ import { computed, ref, unref, watch, Ref } from "vue";
 import { isEqual } from "lodash-es";
 import { useRouter, useRoute, NavigationFailure } from "vue-router";
 import { usePermissions } from "./../../../../core/composables";
-import {
-  ExtendedComponent,
-  IBladeContainer,
-  IBladeElement,
-  IBladeEvent,
-  IParentCallArgs,
-} from "./../../../../shared";
+import { ExtendedComponent, IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../shared";
 
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
@@ -16,14 +10,7 @@ interface IUseBladeNavigation {
   readonly parentBladeParam: Ref<string>;
   bladesRefs: Ref<IBladeElement[]>;
   openBlade: (
-    {
-      parentBlade,
-      component,
-      param,
-      bladeOptions,
-      onOpen,
-      onClose,
-    }: IBladeEvent,
+    { parentBlade, component, param, bladeOptions, onOpen, onClose }: IBladeEvent,
     index?: number,
     navigationCb?: () => Promise<void | NavigationFailure>
   ) => void;
@@ -61,14 +48,7 @@ export default (): IUseBladeNavigation => {
   );
 
   async function openBlade(
-    {
-      parentBlade,
-      component: blade,
-      param,
-      bladeOptions,
-      onOpen,
-      onClose,
-    }: IBladeEvent,
+    { parentBlade, component: blade, param, bladeOptions, onOpen, onClose }: IBladeEvent,
     index?: number,
     navigationCb?: () => Promise<void | NavigationFailure>
   ) {
@@ -102,9 +82,7 @@ export default (): IUseBladeNavigation => {
       if (existingChild === undefined) {
         child.idx = index + 1;
       } else if (existingChild) {
-        await closeBlade(
-          blades.value.findIndex((x) => x.idx === existingChild.idx)
-        );
+        await closeBlade(blades.value.findIndex((x) => x.idx === existingChild.idx));
         child.idx = existingChild.idx;
       }
 
@@ -118,10 +96,7 @@ export default (): IUseBladeNavigation => {
 
       isPrevented.value = false;
       for (let i = 0; i < children.length; i++) {
-        if (
-          children[i]?.onBeforeClose &&
-          typeof children[i].onBeforeClose === "function"
-        ) {
+        if (children[i]?.onBeforeClose && typeof children[i].onBeforeClose === "function") {
           const result = await children[i].onBeforeClose();
           if (result === false) {
             isPrevented.value = true;
@@ -172,18 +147,14 @@ export default (): IUseBladeNavigation => {
   }
 
   async function onParentCall(index: number, args: IParentCallArgs) {
-    console.debug(
-      `vc-app#onParentCall(${index}, { method: ${args.method} }) called.`
-    );
+    console.debug(`vc-app#onParentCall(${index}, { method: ${args.method} }) called.`);
 
     if (index >= 0) {
       const currentParent = unref(bladesRefs.value[index]);
 
       if (currentParent) {
         if (args.method && typeof currentParent[args.method] === "function") {
-          const method = currentParent[args.method] as (
-            args: unknown
-          ) => Promise<unknown>;
+          const method = currentParent[args.method] as (args: unknown) => Promise<unknown>;
           const result = await method(args.args);
           if (typeof args.callback === "function") {
             args.callback(result);

package/shared/blade-navigation/index.ts

@@ -1,15 +1,8 @@
-import { App } from "vue";
+import { createModule } from "../../core/plugins/modularity";
 import * as components from "./components";
 
-export default {
-    install(app: App): void {
-        // Register exported pages
-        Object.entries(components).forEach(([componentName, component]) => {
-            app.component(componentName, component);
-        });
-    },
-};
+export default createModule(components);
 
 export * from "./components";
 export * from "./composables";
-export * from './types'
+export * from "./types";

package/shared/index.ts

@@ -1,15 +1,13 @@
 import { App } from "vue";
-import { default as AssetsDetails } from "./assets";
-import { default as VcAppSwitcher } from "./app-switcher";
-import { default as VcBladeNavigation } from "./blade-navigation";
-
-const components = [AssetsDetails, VcAppSwitcher, VcBladeNavigation];
-
-export function init(app: App): App {
-  components.forEach((component) => app.use(component));
-
-  return app;
-}
+import { default as AssetsDetailsModule } from "./assets";
+import { default as VcAppSwitcherModule } from "./app-switcher";
+import { default as VcBladeNavigationModule } from "./blade-navigation";
+
+export default {
+  install(app: App): void {
+    app.use(AssetsDetailsModule).use(VcAppSwitcherModule).use(VcBladeNavigationModule);
+  },
+};
 
 export * from "./assets";
 export * from "./app-switcher";

package/ui/components/atoms/vc-badge/index.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcBadgeProps } from "./vc-badge-model";
+import { VcBadgeEmits, VcBadgeProps } from "./vc-badge-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Badge from "./vc-badge.vue";
-export const VcBadge: ComponentConstructor<
-  ComponentPublicInstance<VcBadgeProps>
-> = Badge;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcBadge: ComponentConstructor<ComponentPublicInstance<VcBadgeProps, any, any, any, any, VcBadgeEmits>> =
+  Badge;

package/ui/components/atoms/vc-badge/vc-badge-model.ts

@@ -1,20 +1,27 @@
+import { ExtractTypes } from "./../../../types/ts-helpers";
 import { VNode } from "vue";
 
-export interface VcBadgeProps {
-  /**
-   * Badge active state
-   * */
-  active?: boolean | undefined;
-  /**
-   * Put component in disabled state
-   * */
-  disabled?: boolean | undefined;
-  /**
-   * Is badge clickable?
-   * */
-  clickable?: boolean | undefined;
-  onClick?: (event: "click") => void;
-}
+export const badgeProps = {
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const badgeEmits = {
+  click: () => true,
+};
+
+export type VcBadgeProps = ExtractTypes<typeof badgeProps>;
+export type VcBadgeEmits = typeof badgeEmits;
 
 export interface VcBadgeSlots {
   /**

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -16,16 +16,11 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  VcBadgeProps,
-} from "./vc-badge-model";
-
-const props = withDefaults(defineProps<VcBadgeProps>(), {
-  active: false,
-  disabled: false,
-  clickable: true,
-});
-const emit = defineEmits(["click"]);
+import { badgeProps, badgeEmits } from "./vc-badge-model";
+
+const props = defineProps(badgeProps);
+
+const emit = defineEmits(badgeEmits);
 
 function onClick(): void {
   if (props.clickable && !props.disabled) {

package/ui/components/atoms/vc-button/index.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcButtonProps } from "./vc-button-model";
+import { VcButtonEmits, VcButtonProps } from "./vc-button-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Button from "./vc-button.vue";
-export const VcButton: ComponentConstructor<
-  ComponentPublicInstance<VcButtonProps>
-> = Button;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcButton: ComponentConstructor<ComponentPublicInstance<VcButtonProps, any, any, any, any, VcButtonEmits>> =
+  Button;

package/ui/components/atoms/vc-button/vc-button-model.ts

@@ -1,21 +1,36 @@
-import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { VNode, PropType } from "vue";
 
-export interface VcButtonProps {
-  icon?: string | undefined;
-  variant?:
-    | "primary"
-    | "secondary"
-    | "special"
-    | "danger"
-    | "widget"
-    | "onlytext"
-    | undefined;
-  disabled?: boolean | undefined;
-  small?: boolean | undefined;
-  outline?: boolean | undefined;
-  selected?: boolean | undefined;
-  onClick?: () => void;
-}
+export const buttonProps = {
+  icon: String,
+  variant: {
+    type: String as PropType<"primary" | "secondary" | "special" | "danger" | "widget" | "onlytext">,
+    default: "primary",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const buttonEmits = {
+  click: () => true,
+};
+
+export type VcButtonProps = ExtractTypes<typeof buttonProps>;
+export type VcButtonEmits = typeof buttonEmits;
 
 export interface VcButtonSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-button/vc-button.vue

@@ -18,7 +18,10 @@
       :icon="icon"
       :size="small ? 'xs' : 's'"
     ></VcIcon>
-    <span v-if="$slots['default']" class="vc-button__title">
+    <span
+      v-if="$slots['default']"
+      class="vc-button__title"
+    >
       <slot></slot>
     </span>
   </button>
@@ -26,22 +29,14 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { VcButtonProps } from "./vc-button-model";
-
-const props = withDefaults(defineProps<VcButtonProps>(), {
-  variant: "primary",
-  disabled: false,
-  small: false,
-  outline: false,
-  selected: false,
-});
-
-const emit = defineEmits(["click"]);
+import { buttonProps, buttonEmits } from "./vc-button-model";
 
+const props = defineProps(buttonProps);
+const emit = defineEmits(buttonEmits);
 function onClick(e: Event): void {
   if (!props.disabled) {
     e.preventDefault();
-    emit("click", e);
+    emit("click");
   }
 }
 </script>

package/ui/components/atoms/vc-card/index.ts

@@ -1,7 +1,6 @@
 import { ComponentPublicInstance } from "vue";
-import { VcCardProps } from "./vc-card-model";
+import { VcCardEmits, VcCardProps } from "./vc-card-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Card from "./vc-card.vue";
-export const VcCard: ComponentConstructor<
-  ComponentPublicInstance<VcCardProps>
-> = Card;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcCard: ComponentConstructor<ComponentPublicInstance<VcCardProps, any, any, any, any, VcCardEmits>> = Card;

package/ui/components/atoms/vc-card/vc-card-model.ts

@@ -1,15 +1,35 @@
-import { VNode } from "vue";
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isBoolean } from "./../../../utils";
 
-export interface VcCardProps {
-  header?: string | undefined;
-  icon?: string | undefined;
-  isCollapsable?: boolean | undefined;
-  isCollapsed?: boolean | undefined;
-  fill?: boolean | undefined;
-  variant?: "default" | "success" | "danger" | undefined;
-  "onHeader:click"?: () => void;
-  "onState:collapsed"?: (isCollapsedState: boolean) => void;
-}
+export const cardProps = {
+  header: String,
+  icon: String,
+  isCollapsable: {
+    type: Boolean,
+    default: false,
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String as PropType<"default" | "success" | "danger">,
+    default: "default",
+  },
+};
+
+export const cardEmits = {
+  "header:click": () => true,
+  "state:collapsed": (isCollapsedState: boolean) => isBoolean(isCollapsedState),
+};
+
+export type VcCardProps = ExtractTypes<typeof cardProps>;
+export type VcCardEmits = typeof cardEmits;
 
 export interface VcCardSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-card/vc-card.vue

@@ -3,10 +3,22 @@
     class="vc-card"
     :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
   >
-    <div class="vc-card__header" v-if="header" @click="onHeaderClick">
-      <VcIcon v-if="icon" class="vc-card__icon" :icon="icon" size="xl"></VcIcon>
+    <div
+      class="vc-card__header"
+      v-if="header"
+      @click="onHeaderClick"
+    >
+      <VcIcon
+        v-if="icon"
+        class="vc-card__icon"
+        :icon="icon"
+        size="xl"
+      ></VcIcon>
       <div class="vc-card__title">{{ header }}</div>
-      <div v-if="$slots['actions']" class="vc-card__actions">
+      <div
+        v-if="$slots['actions']"
+        class="vc-card__actions"
+      >
         <slot name="actions"></slot>
       </div>
       <VcIcon
@@ -29,14 +41,11 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcCardProps } from "./vc-card-model";
-const props = withDefaults(defineProps<VcCardProps>(), {
-  isCollapsable: false,
-  isCollapsed: false,
-  fill: false,
-  variant: "default",
-});
-const emit = defineEmits(["header:click", "state:collapsed"]);
+import { cardProps, cardEmits } from "./vc-card-model";
+
+const props = defineProps(cardProps);
+
+const emit = defineEmits(cardEmits);
 const isCollapsedInternal = ref(props.isCollapsed);
 
 function onHeaderClick() {

package/ui/components/atoms/vc-checkbox/index.ts

@@ -1,7 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcCheckboxProps } from "./vc-checkbox-model";
+import { VcCheckboxEmits, VcCheckboxProps } from "./vc-checkbox-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Checkbox from "./vc-checkbox.vue";
 export const VcCheckbox: ComponentConstructor<
-    ComponentPublicInstance<VcCheckboxProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcCheckboxProps, any, any, any, any, VcCheckboxEmits>
 > = Checkbox;

package/ui/components/atoms/vc-checkbox/vc-checkbox-model.ts

@@ -1,13 +1,33 @@
 import { VNode } from "vue";
+import { isBoolean } from "./../../../utils";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcCheckboxProps {
-  modelValue?: boolean | undefined;
-  disabled?: boolean | undefined;
-  required?: boolean | undefined;
-  name?: string | undefined;
-  errorMessage?: string | undefined;
-  "onUpdate:modelValue"?: (value: boolean) => void;
-}
+export const checkboxProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: "Field",
+  },
+  errorMessage: String,
+};
+
+export const checkboxEmits = {
+  "update:modelValue": (value: boolean) => isBoolean(value),
+};
+
+export type VcCheckboxProps = ExtractTypes<typeof checkboxProps>;
+export type VcCheckboxEmits = typeof checkboxEmits;
 
 export interface VcCheckboxSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-checkbox/vc-checkbox.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="vc-checkbox" :class="{ 'vc-checkbox_disabled': disabled }">
+  <div
+    class="vc-checkbox"
+    :class="{ 'vc-checkbox_disabled': disabled }"
+  >
     <label class="vc-checkbox__label">
       <input
         type="checkbox"
@@ -9,7 +12,10 @@
         @change="onChange"
       />
       <span class="vc-checkbox__checkmark"></span>
-      <span v-if="$slots['default']" class="tw-ml-2">
+      <span
+        v-if="$slots['default']"
+        class="tw-ml-2"
+      >
         <slot></slot>
       </span>
       <span
@@ -19,7 +25,10 @@
       >
     </label>
 
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-checkbox__error tw-mt-1">
         {{ errorMessage }}
       </VcHint>
@@ -29,15 +38,10 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import { VcCheckboxProps } from "./vc-checkbox-model";
+import { checkboxProps, checkboxEmits } from "./vc-checkbox-model";
 
-const props = withDefaults(defineProps<VcCheckboxProps>(), {
-  modelValue: false,
-  disabled: false,
-  required: false,
-  name: "Field",
-});
-const emit = defineEmits(["update:modelValue"]);
+const props = defineProps(checkboxProps);
+const emit = defineEmits(checkboxEmits);
 
 watch(
   () => props.modelValue,

package/ui/components/atoms/vc-col/index.ts

@@ -2,5 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcColProps } from "./vc-col-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Col from "./vc-col.vue";
-export const VcCol: ComponentConstructor<ComponentPublicInstance<VcColProps>> =
-  Col;
+export const VcCol: ComponentConstructor<ComponentPublicInstance<VcColProps>> = Col;

package/ui/components/atoms/vc-col/vc-col-model.ts

@@ -1,8 +1,14 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcColProps {
-  size?: string | undefined;
-}
+export const colProps = {
+  size: {
+    type: String,
+    default: "1",
+  },
+};
+
+export type VcColProps = ExtractTypes<typeof colProps>;
 
 export interface VcColSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-col/vc-col.vue

@@ -8,11 +8,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcColProps } from "./vc-col-model";
+import { colProps } from "./vc-col-model";
 
-withDefaults(defineProps<VcColProps>(), {
-  size: "1",
-});
+defineProps(colProps);
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-container/index.ts

@@ -1,7 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcContainerProps } from "./vc-container-model";
+import { VcContainerEmits, VcContainerProps } from "./vc-container-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Container from "./vc-container.vue";
 export const VcContainer: ComponentConstructor<
-  ComponentPublicInstance<VcContainerProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcContainerProps, any, any, any, any, VcContainerEmits>
 > = Container;

package/ui/components/atoms/vc-container/vc-container-model.ts

@@ -1,12 +1,28 @@
-import {VNode} from "vue";
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcContainerProps {
-    shadow?: boolean | undefined
-    noPadding?: boolean | undefined
-    usePtr?: boolean | undefined
-    "onScroll:ptr"?: () => void
-}
+export const containerProps = {
+  shadow: {
+    type: Boolean,
+    default: false,
+  },
+  noPadding: {
+    type: Boolean,
+    default: false,
+  },
+  usePtr: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const containerEmits = {
+  "scroll:ptr": () => true,
+};
+
+export type VcContainerProps = ExtractTypes<typeof containerProps>;
+export type VcContainerEmits = typeof containerEmits;
 
 export interface VcContainerSlots {
-    default: () => VNode[];
+  default: () => VNode[];
 }