@vc-shell/framework 1.0.56 → 1.0.59

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

@@ -1,88 +1,88 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VNode } from "vue";
-import Select from "./vc-select.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Select from "./vc-select.vue";
 
-export type VcSelectSlots = {
-  /**
-   * Custom select control
-   */
-  control?: (scope: { toggleHandler: () => void }) => VNode[];
-  /**
-   * Prepend inner field
-   */
-  "prepend-inner"?: () => VNode[];
-  /**
-   * Append to inner field
-   */
-  "append-inner"?: () => VNode[];
-  /**
-   * Prepend outer field
-   */
-  prepend?: () => VNode[];
-  /**
-   * Append outer field
-   */
-  append?: () => VNode[];
-  /**
-   * What should the menu display after filtering options and none are left to be displayed
-   * @param scope
-   */
-  "no-option"?: () => VNode[];
-  /**
-   * Slot for errors
-   */
-  error?: () => VNode[];
-  /**
-   * Slot for hint text
-   */
-  hint?: () => VNode[];
-  /**
-   * Override default selection slot
-   * @param scope
-   */
-  "selected-item"?: (scope: {
-    /**
-     * Selection index
-     */
-    index: number;
-    /**
-     * Selected option -- its value is taken from model
-     */
-    opt: any;
-    /**
-     * Always true -- passed as prop
-     */
-    selected: boolean;
-    /**
-     * Remove selected option located at specific index
-     * @param index Index at which to remove selection
-     */
-    removeAtIndex: (index: number) => void;
-  }) => VNode[];
-  /**
-   * Override default selection slot;
-   */
-  option?: (scope: {
-    /**
-     * Option index
-     */
-    index: number;
-    /**
-     * Option -- its value is taken from 'options' prop
-     */
-    opt: any;
-    /**
-     * Is option selected?
-     */
-    selected: boolean;
-    /**
-     * Add/remove option from model
-     * @param opt Option to add to model
-     */
-    toggleOption: (opt: any) => void;
-  }) => VNode[];
+export const VcSelect = _Select as typeof _Select & {
+  new (): {
+    $slots: {
+      /**
+       * Custom select control
+       */
+      control: (scope: { toggleHandler: () => void }) => VNode[];
+      /**
+       * Prepend inner field
+       */
+      "prepend-inner": () => VNode[];
+      /**
+       * Append to inner field
+       */
+      "append-inner": () => VNode[];
+      /**
+       * Prepend outer field
+       */
+      prepend: () => VNode[];
+      /**
+       * Append outer field
+       */
+      append: () => VNode[];
+      /**
+       * What should the menu display after filtering options and none are left to be displayed
+       * @param scope
+       */
+      "no-option": () => VNode[];
+      /**
+       * Slot for errors
+       */
+      error: () => VNode[];
+      /**
+       * Slot for hint text
+       */
+      hint: () => VNode[];
+      /**
+       * Override default selection slot
+       * @param scope
+       */
+      "selected-item": (scope: {
+        /**
+         * Selection index
+         */
+        index: number;
+        /**
+         * Selected option -- its value is taken from model
+         */
+        opt: any;
+        /**
+         * Always true -- passed as prop
+         */
+        selected: boolean;
+        /**
+         * Remove selected option located at specific index
+         * @param index Index at which to remove selection
+         */
+        removeAtIndex: (index: number) => void;
+      }) => VNode[];
+      /**
+       * Override default selection slot;
+       */
+      option: (scope: {
+        /**
+         * Option index
+         */
+        index: number;
+        /**
+         * Option -- its value is taken from 'options' prop
+         */
+        opt: any;
+        /**
+         * Is option selected
+         */
+        selected: boolean;
+        /**
+         * Add/remove option from model
+         * @param opt Option to add to model
+         */
+        toggleOption: (opt: any) => void;
+      }) => VNode[];
+    };
+  };
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcSelect: GlobalComponentConstructor<typeof Select, VcSelectSlots> = Select;

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

@@ -60,7 +60,7 @@
                         {{ prefix }}
                       </div>
                       <div
-                        class="tw-w-full tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
+                        class="tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
                         @click.stop="toggleDropdown"
                       >
                         <div
@@ -90,7 +90,7 @@
                                   <div
                                     class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                   >
-                                    <span>{{ getEmittingOptionValue(item.opt) }}</span>
+                                    <span>{{ getOptionLabel(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"

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

@@ -1,12 +1,13 @@
 import { VNode } from "vue";
-import Slider from "./vc-slider.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Slider from "./vc-slider.vue";
 
-export type VcSliderSlots = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default?: (args: { slide: Record<string, unknown> | any }) => VNode[];
-  prevBtn?: () => VNode[];
-  nextBtn?: () => VNode[];
+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[];
+    };
+  };
 };
-
-export const VcSlider: GlobalComponentConstructor<typeof Slider, VcSliderSlots> = Slider;

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

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Textarea from "./vc-textarea.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Textarea from "./vc-textarea.vue";
 
-export type VcTextareaSlots = {
-  error?: () => VNode[];
+export const VcTextarea = _Textarea as typeof _Textarea & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
 };
-
-export const VcTextarea: GlobalComponentConstructor<typeof Textarea, VcTextareaSlots> = Textarea;

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

@@ -26,13 +26,14 @@
       <!-- Show blades name when at least one blade is opened -->
       <div
         v-if="blades.length === 1"
-        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
       >
         {{ blades[0].title }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
       <VcLink
+        class="tw-ml-3"
         v-else-if="blades.length > 1"
         @click="$emit('backlink:click')"
       >
@@ -45,7 +46,7 @@
     </template>
 
     <!-- Additional spacer -->
-    <div class="tw-grow tw-basis-0 tw-basis-0"></div>
+    <div class="tw-grow tw-basis-0"></div>
 
     <!-- Toolbar container -->
     <div class="tw-flex tw-h-full tw-box-border">

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

@@ -4,10 +4,10 @@
       <router-link
         :to="component.url"
         custom
-        v-slot="{ isActive, navigate }"
+        v-slot="{ isExactActive, navigate }"
       >
         <vc-app-menu-link
-          :isActive="isActive"
+          :isActive="isExactActive"
           :children="children"
           :sticky="sticky"
           :icon="icon as string"
@@ -23,7 +23,6 @@
         :icon="icon as string"
         :title="title"
         @onClick="onMenuItemClick"
-        :isActive="isHomePage"
       />
 
       <!-- Nested menu items -->
@@ -61,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref } from "vue";
 import { IBladeToolbar, IMenuItems } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { NavigationFailure, useRoute } from "vue-router";
@@ -109,8 +108,6 @@ const emit = defineEmits<Emits>();
 
 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)) {
     isOpened.value = true;

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

@@ -1,12 +1,13 @@
 import { VNode } from "vue";
-import App from "./vc-app.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _App from "./vc-app.vue";
 
-export type VcAppSlots = {
-  appSwitcher?: () => VNode[];
-  bladeNavigation?: () => VNode[];
-  notifications?: () => VNode[];
-  passwordChange?: () => VNode[];
+export const VcApp = _App as typeof _App & {
+  new (): {
+    $slots: {
+      appSwitcher: () => VNode[];
+      bladeNavigation: () => VNode[];
+      notifications: () => VNode[];
+      passwordChange: () => VNode[];
+    };
+  };
 };
-
-export const VcApp: GlobalComponentConstructor<typeof App, VcAppSlots> = App;

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

@@ -90,6 +90,13 @@ export interface Emits {
   (event: "backlink:click", index: number): void;
 }
 
+// defineSlots<{
+//   appSwitcher: unknown;
+//   bladeNavigation: unknown;
+//   notifications: unknown;
+//   passwordChange: unknown;
+// }>();
+
 withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],

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

@@ -50,7 +50,7 @@
         </div>
         <div
           v-else
-          class="vc-blade-header__button"
+          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onExpand"
         >
           <VcIcon
@@ -81,11 +81,7 @@ export interface Props {
   subtitle?: string | undefined;
   icon?: string | undefined;
 }
-const props = withDefaults(defineProps<Props>(), {
-  expandable: false,
-  expanded: false,
-  closable: false,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 

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

@@ -1,10 +1,11 @@
 import { VNode } from "vue";
-import Blade from "./vc-blade.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Blade from "./vc-blade.vue";
 
-export type VcBladeSlots = {
-  actions?: () => VNode[];
-  default?: () => VNode[];
+export const VcBlade = _Blade as typeof _Blade & {
+  new (): {
+    $slots: {
+      actions: () => VNode[];
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcBlade: GlobalComponentConstructor<typeof Blade, VcBladeSlots> = Blade;

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

@@ -1,10 +1,4 @@
 import { VNode } from "vue";
-import DynamicProperty from "./vc-dynamic-property.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _DynamicProperty from "./vc-dynamic-property.vue";
 
-export type VcDynamicPropertySlots = {
-  default?: () => VNode[];
-};
-
-export const VcDynamicProperty: GlobalComponentConstructor<typeof DynamicProperty, VcDynamicPropertySlots> =
-  DynamicProperty;
+export const VcDynamicProperty = _DynamicProperty as typeof _DynamicProperty;

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

@@ -56,7 +56,11 @@
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
+      option-label="alias"
+      option-value="id"
       :multiple="true"
+      :emit-value="false"
+      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -91,6 +95,8 @@
       @search="onSearch"
       @close="onClose"
       :multiple="property.multivalue"
+      :emit-value="false"
+      :clearable="false"
     ></VcSelect>
   </Field>
 

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

@@ -10,7 +10,7 @@
   >
     <VcImage
       aspect="1x1"
-      :src="image.url"
+      :src="image['url']"
       background="contain"
     ></VcImage>
     <div class="vc-gallery-item__overlay">
@@ -23,9 +23,9 @@
         ></VcIcon>
         <div
           class="tw-truncate"
-          :title="image.name"
+          :title="image['name']"
         >
-          {{ image.name }}
+          {{ image["name"] }}
         </div>
       </div>
       <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
@@ -73,7 +73,7 @@ import { clickOutside as vClickOutside } from "./../../../../../../core/directiv
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {
-  image?: IImage | undefined;
+  image: IImage;
   readonly?: boolean | undefined;
   actions?:
     | {
@@ -87,12 +87,6 @@ export interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  image: () => ({
-    sortOrder: undefined,
-    title: undefined,
-    name: undefined,
-    url: undefined,
-  }),
   readonly: false,
   actions: () => ({
     name: undefined,
@@ -126,7 +120,7 @@ function onClose() {
   }
 
   &__move {
-    @apply tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-2;
+    @apply tw-text-[#a1c0d4] tw-cursor-move tw-mr-2;
   }
 
   &__button {

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

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Gallery from "./vc-gallery.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Gallery from "./vc-gallery.vue";
 
-export type VcGallerySlots = {
-  default?: () => VNode[];
-};
-
-export const VcGallery: GlobalComponentConstructor<typeof Gallery, VcGallerySlots> = Gallery;
+export const VcGallery = _Gallery as typeof _Gallery;