@vc-shell/framework 1.0.45 → 1.0.48

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

@@ -2,8 +2,8 @@
   <div
     class="vc-app-menu-item"
     :class="[
-      { 'vc-app-menu-item_active': isActive && !children.length },
-      { 'vc-app-menu-item_no-hover': children.length },
+      { 'vc-app-menu-item_active': isActive && !Object.keys(children).length },
+      { 'vc-app-menu-item_no-hover': Object.keys(children).length },
     ]"
     @click="$emit('onClick')"
   >
@@ -22,7 +22,7 @@
         class="vc-app-menu-item__title-icon"
         icon="fas fa-chevron-down"
         size="xs"
-        v-if="children.length"
+        v-if="Object.keys(children).length"
       ></VcIcon>
     </div>
   </div>

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

@@ -6,7 +6,7 @@
           :isActive="isActive"
           :children="children"
           :sticky="sticky"
-          :icon="icon"
+          :icon="icon as string"
           :title="title"
           @onClick="onMenuItemClick(() => navigate($event))"
         />
@@ -16,7 +16,7 @@
       <vc-app-menu-link
         :children="children"
         :sticky="sticky"
-        :icon="icon"
+        :icon="icon as string"
         :title="title"
         @onClick="onMenuItemClick"
         :isActive="isHomePage"
@@ -54,7 +54,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from "vue";
-import { ExtendedComponent, 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";
 
@@ -64,9 +64,9 @@ export interface Props {
   component?: ExtendedComponent;
   bladeOptions?: Record<string, unknown>;
   clickHandler?: () => void;
-  icon: string;
-  title: string;
-  children?: IMenuItems[];
+  icon?: string | (() => string);
+  title?: string;
+  children?: IBladeToolbar[];
   isCollapsed?: boolean;
 }
 
@@ -90,8 +90,6 @@ const props = withDefaults(defineProps<Props>(), {
   component: undefined,
   bladeOptions: () => ({}),
   clickHandler: undefined,
-  icon: "",
-  title: "",
   children: () => [],
   isCollapsed: true,
 });

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

@@ -46,6 +46,8 @@
             <VcAppMenuItem
               v-if="item.isVisible === undefined || item.isVisible"
               v-bind="item"
+              :isVisible="item.isVisible as boolean"
+              :title="item.title as string"
               @click="
                 (navigationCb) => {
                   $emit('item:click', { item, navigationCb });

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

@@ -17,7 +17,11 @@
       :blades="bladesRefs"
       :buttons="toolbarItems"
       @toolbarbutton:click="onToolbarButtonClick"
-      @menubutton:click="$refs.menu.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"

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -3,13 +3,13 @@
     class="vc-blade-toolbar-button"
     :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
     @click="onClick"
-    :title="title"
+    :title="title as string"
   >
     <div ref="dropButtonRef">
       <div class="vc-blade-toolbar-button__wrap" ref="bladeDropToggle">
         <VcIcon
           class="vc-blade-toolbar-button__icon"
-          :icon="icon"
+          :icon="icon as string"
           size="m"
         ></VcIcon>
         <div v-if="isExpanded" class="vc-blade-toolbar-button__title">
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType, ref } from "vue";
+import { defineComponent, nextTick, ref } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -51,40 +51,26 @@ export default defineComponent({
 <script lang="ts" setup>
 import { VcIcon } from "@/ui/components";
 import { createPopper, Instance } from "@popperjs/core";
-import { IBladeDropdownItem } from "@/core/types";
-
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  isExpanded: {
-    type: Boolean,
-    default: true,
-  },
-
-  icon: {
-    type: String,
-    default: "fas fa-question-circle",
-  },
-
-  title: {
-    type: String,
-    default: undefined,
-  },
-
-  dropdownItems: {
-    type: Array as PropType<IBladeDropdownItem[]>,
-    default: () => [],
-  },
-
-  clickHandler: {
-    type: Function,
-    default: undefined,
-  },
+import { IBladeDropdownItem, IBladeToolbar } from "@/core/types";
+
+export interface Props extends IBladeToolbar {
+  isExpanded: boolean;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  isExpanded: true,
+  icon: "fas fa-question-circle",
+  title: undefined,
+  dropdownItems: () => [],
+  clickHandler: undefined,
 });
-const emit = defineEmits(["click"]);
+
+const emit = defineEmits<Emits>();
 
 const popper = ref<Instance>();
 const isWaiting = ref(false);

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

@@ -24,14 +24,16 @@
 </template>
 
 <script lang="ts" setup>
+import { IBladeToolbar } from "@/core/types";
 import { ref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
-  },
+export interface Props {
+  items: IBladeToolbar[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
 });
 
 const isExpanded = ref(true);

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

@@ -1,8 +1,11 @@
 <template>
   <div
-    class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden  tw-transition-[width]  tw-duration-200"
+    class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[$attrs.class, { '!tw-w-full tw-shrink': $isMobile.value || expanded }]"
+    :class="[
+      $attrs.class,
+      { '!tw-w-full !tw-shrink': $isMobile.value || expanded },
+    ]"
   >
     <!-- Init blade header -->
     <VcBladeHeader

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -3,7 +3,7 @@
     v-if="
       (property.dictionary || property.isDictionary) && !property.multivalue
     "
-    v-slot="{ field, errorMessage, handleChange, errors }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.displayName || property.name"
     :modelValue="getter(property, true)"
     :rules="rules"
@@ -38,7 +38,7 @@
       property.multivalue &&
       !(property.dictionary || property.isDictionary)
     "
-    v-slot="{ field, errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange }"
     :name="property.name"
     :modelValue="property.values"
     :rules="rules"
@@ -96,7 +96,7 @@
 
   <Field
     v-else-if="property.valueType === 'ShortText'"
-    v-slot="{ field, errorMessage, handleChange, errors }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.displayName || property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -122,14 +122,13 @@
 
   <Field
     v-else-if="property.valueType === 'Number' && property.multivalue"
-    v-slot="{ field, errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :modelValue="property.values"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
-      :error-message="errorMessage"
       :label="handleDisplayName"
       :modelValue="property.values"
       @update:modelValue="
@@ -142,12 +141,18 @@
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
-    ></VcMultivalue>
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :options="items"
+      option-value="id"
+      :option-label="handleDisplayProperty"
+      multiple
+    ></VcSelect>
   </Field>
 
   <Field
     v-else-if="property.valueType === 'Number'"
-    v-slot="{ field, errorMessage, handleChange, errors }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -174,7 +179,7 @@
 
   <Field
     v-else-if="property.valueType === 'Integer'"
-    v-slot="{ field, errorMessage, handleChange, errors }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -202,7 +207,7 @@
 
   <Field
     v-else-if="property.valueType === 'DateTime'"
-    v-slot="{ field, errorMessage, handleChange, errors }"
+    v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -228,7 +233,7 @@
 
   <Field
     v-else-if="property.valueType === 'LongText'"
-    v-slot="{ field, errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange }"
     :name="property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -252,7 +257,7 @@
 
   <Field
     v-else-if="property.valueType === 'Boolean'"
-    v-slot="{ field, errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -277,7 +282,7 @@
 
   <Field
     v-else-if="property.valueType === 'Html'"
-    v-slot="{ field, errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :modelValue="getter(property)"
     :rules="rules"
@@ -307,12 +312,12 @@ import { ref, onMounted, computed } from "vue";
 import { useI18n } from "@/core/composables";
 import { Field } from "vee-validate";
 
-interface IValidationRules {
+type IValidationRules = {
   required?: boolean;
   min?: number;
   max?: number;
   regex?: RegExp;
-}
+};
 
 interface IDisplayName {
   languageCode: string;

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -7,7 +7,9 @@
         <span>)</span>
       </div>
     </template>
-    <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center">
+    <div
+      class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center"
+    >
       <div class="tw-box-border p-5 tw-grow tw-basis-0 tw-w-full">
         <div
           class="bg-contain tw-bg-no-repeat tw-bg-center tw-w-full tw-h-full tw-box-border"
@@ -55,21 +57,20 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { VcPopup } from "@/ui/components";
+import { IImage } from "@/core/types";
 
-const props = defineProps({
-  images: {
-    type: Array,
-    default: () => [],
-  },
+export interface Props {
+  images?: IImage[];
+  index: number;
+}
 
-  index: {
-    type: Number,
-    default: 0,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  images: () => [],
+  index: 0,
 });
 
 const localIndex = ref(props.index);
-const currentImage = computed(() => props.images[localIndex.value] || {});
+const currentImage = computed(() => props.images[localIndex.value]);
 
 const copyLink = (link: string) => {
   if (link.charAt(0) === "/") {