@vc-shell/framework 1.0.54 → 1.0.57

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

@@ -1,5 +1,13 @@
-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;
+import { VNode } from "vue";
+import _Slider from "./vc-slider.vue";
+
+export const VcSlider = _Slider as typeof _Slider & {
+  new (): {
+    $slots: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      default: (args: { slide: Record<string, unknown> | any }) => VNode[];
+      prevBtn: () => VNode[];
+      nextBtn: () => VNode[];
+    };
+  };
+};

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

@@ -48,10 +48,22 @@ 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(sliderProps);
+export interface Props {
+  slides?: Record<string, unknown>[] | unknown[];
+  navigation?: boolean;
+  overflow?: boolean;
+  slidesPerView?: string | "auto";
+  spaceBetweenSlides?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  slides: () => [],
+  slidesPerView: "auto",
+  spaceBetweenSlides: 10,
+});
+
+SwiperCore.use([Navigation]);
 
 const buttonsList = computed(() => ({
   nextEl: ".vc-slider__next",

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

@@ -1,8 +1,10 @@
-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;
+import { VNode } from "vue";
+import _Textarea from "./vc-textarea.vue";
+
+export const VcTextarea = _Textarea as typeof _Textarea & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
+};

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

@@ -47,11 +47,29 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import { VcLabel } from "./../../../components";
-import { textareaEmits, textareaProps } from "./vc-textarea-model";
 
-const props = defineProps(textareaProps);
+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(textareaEmits);
+const emit = defineEmits<Emits>();
 
 watch(
   () => props.modelValue,
@@ -61,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/index.ts

@@ -1,6 +1,13 @@
-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;
+import { VNode } from "vue";
+import _App from "./vc-app.vue";
+
+export const VcApp = _App as typeof _App & {
+  new (): {
+    $slots: {
+      appSwitcher: () => VNode[];
+      bladeNavigation: () => VNode[];
+      notifications: () => VNode[];
+      passwordChange: () => VNode[];
+    };
+  };
+};

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

@@ -57,6 +57,7 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from "vue";
+import { IMenuItems, IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -67,12 +68,45 @@ 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 { appEmits, appProps } 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;
+}
 
-defineProps(appProps);
+// defineSlots<{
+//   appSwitcher: unknown;
+//   bladeNavigation: unknown;
+//   notifications: unknown;
+//   passwordChange: unknown;
+// }>();
+
+withDefaults(defineProps<Props>(), {
+  pages: () => [],
+  menuItems: () => [],
+  mobileMenuItems: () => [],
+  toolbarItems: () => [],
+  theme: "light",
+  bladesRefs: () => [],
+});
 
-const emit = defineEmits(appEmits);
+const emit = defineEmits<Emits>();
 
 console.debug("vc-app: Init vc-app");
 
@@ -83,7 +117,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 });
   }

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

@@ -1,7 +1,11 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBladeEmits, VcBladeProps } from "./vc-blade-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Blade from "./vc-blade.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcBlade: ComponentConstructor<ComponentPublicInstance<VcBladeProps, any, any, any, any, VcBladeEmits>> =
-  Blade;
+import { VNode } from "vue";
+import _Blade from "./vc-blade.vue";
+
+export const VcBlade = _Blade as typeof _Blade & {
+  new (): {
+    $slots: {
+      actions: () => VNode[];
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -44,11 +45,29 @@ 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 { bladeEmits, bladeProps } from "./vc-blade-model";
 
-defineProps(bladeProps);
+export interface Props {
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  width?: number | string;
+  expanded?: boolean;
+  closable?: boolean;
+  toolbarItems?: IBladeToolbar[];
+  onClose?: () => void;
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  width: "30%",
+  closable: true,
+  toolbarItems: () => [],
+});
 
-defineEmits(bladeEmits);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

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