@vc-shell/framework 1.0.50 → 1.0.51

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

@@ -48,15 +48,33 @@ 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 "@/ui/components/molecules/vc-slider/vc-slider-model";
 SwiperCore.use([Navigation]);
 
-withDefaults(defineProps<VcSliderProps>(), {
-  slides: () => [],
-  navigation: false,
-  overflow: false,
-  slidesPerView: "auto",
-  spaceBetweenSlides: 10,
+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,
+  },
 });
 
 const buttonsList = computed(() => ({

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

@@ -7,7 +7,7 @@
     }"
   >
     <!-- Textarea label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>
         <span v-html="tooltip"></span>
@@ -37,14 +37,52 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import { VcLabel } from "@/ui/components";
-import { VcTextareaProps } from "@/ui/components/molecules/vc-textarea/vc-textarea-model";
-
-const props = withDefaults(defineProps<VcTextareaProps>(), {
-  placeholder: "",
-  required: false,
-  disabled: false,
-  name: "Field",
-  maxchars: "1024",
+
+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"]);

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

@@ -54,10 +54,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from "vue";
-import {IBladeToolbar, IMenuItems} from "@/core/types";
+import {ExtendedComponent, 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;

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

@@ -73,10 +73,35 @@ 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 "@/ui/components/organisms/vc-app/vc-app-model";
+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;
+}
+
+export interface Emits {
+  (event: "onOpen", args: IOpenBlade): void;
+  (event: "onClose", index: number): void;
+  (event: "backlink:click", index: number): void;
+}
 
-withDefaults(defineProps<VcAppProps>(), {
+withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],
   mobileMenuItems: () => [],
@@ -89,7 +114,7 @@ withDefaults(defineProps<VcAppProps>(), {
   bladesRefs: () => [],
 });
 
-const emit = defineEmits(["open", "close", "backlink:click"]);
+const emit = defineEmits<Emits>();
 
 console.debug("vc-app: Init vc-app");
 
@@ -102,7 +127,7 @@ const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   if (item.clickHandler && typeof item.clickHandler === "function") {
     item.clickHandler(instance?.exposed);
   } else {
-    emit("open", { parentBlade: item.component, id: 0, navigationCb });
+    emit("onOpen", { parentBlade: item.component, id: 0, navigationCb });
   }
 };
 
@@ -118,7 +143,7 @@ const openDashboard = async () => {
   console.debug(`openDashboard() called.`);
 
   // Close all opened pages with onBeforeClose callback
-  await emit("close", 0);
+  await emit("onClose", 0);
 
   router.push("/");
 };

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

@@ -2,10 +2,7 @@
   <div
     class="tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:#eaedf3]"
   >
-    <div
-      v-if="icon"
-      class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3"
-    >
+    <div v-if="icon" class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3">
       <VcIcon :icon="icon" size="xxl"></VcIcon>
     </div>
 
@@ -31,7 +28,7 @@
       <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"
@@ -58,18 +55,36 @@
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
 
-export interface Props {
-  expandable?: boolean | undefined;
-  expanded?: boolean | undefined;
-  closable?: boolean | undefined;
-  title?: string | undefined;
-  subtitle?: string | undefined;
-  icon?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  expandable: false,
-  expanded: false,
-  closable: false,
+const props = defineProps({
+  expandable: {
+    type: Boolean,
+    default: false,
+  },
+
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  subtitle: {
+    type: String,
+    default: undefined,
+  },
+
+  icon: {
+    type: String,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits(["close", "expand", "collapse"]);

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

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -41,16 +41,41 @@ 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 "@/ui/components/organisms/vc-blade/vc-blade-model";
+import { IBladeToolbar } from "@/core/types";
 
-withDefaults(defineProps<VcBladeProps>(), {
-  width: "30%",
-  expanded: false,
-  closable: true,
-  toolbarItems: () => [],
-});
+defineProps({
+  icon: {
+    type: String,
+  },
+
+  title: {
+    type: String,
+  },
+
+  subtitle: {
+    type: String,
+  },
+
+  width: {
+    type: [Number, String],
+    default: "30%",
+  },
 
-defineEmits(["close"]);
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+
+  toolbarItems: {
+    type: Array as PropType<IBladeToolbar[]>,
+    default: () => [],
+  },
+});
 </script>
 
 <style lang="scss">