@vc-shell/framework 1.1.6 → 1.1.8

package/shared/modules/dynamic/factories/types/index.ts

@@ -1,229 +1,228 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
-import { AsyncAction } from "../../../../../core/composables";
-import { SettingsDetails, SettingsGrid, SettingsSchema } from "../../types";
-import {
-  AssetsHandler,
-  IActionBuilderResult,
-  IBladeToolbar,
-  ICommonAsset,
-  ITableColumns,
-} from "../../../../../core/types";
-import { useBladeNavigation } from "../../../../components";
-import { FormContext } from "vee-validate";
-import { Breadcrumbs } from "../../../../../ui/types";
-import { DynamicBladeForm, DynamicBladeList } from "../../pages";
-
-export type ItemId = { id: string };
-
-export interface IPagination {
-  currentPage: number;
-  totalCount: number;
-  pageSize: number;
-  pages: number;
-}
-
-export interface IValidationState<Item> {
-  valid: boolean;
-  /**
-   * @deprecated `dirty` - use `modified` instead
-   */
-  dirty: boolean;
-  disabled: boolean;
-  modified: boolean;
-  validated: boolean;
-  cachedValue: Item | undefined;
-  setFieldError: FormContext["setFieldError"];
-  setFieldValue: FormContext["setFieldValue"];
-  setValues: FormContext["setValues"];
-  setErrors: FormContext["setErrors"];
-  resetModified: (
-    data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>,
-    updateInitial?: MaybeRef<boolean>,
-  ) => void;
-  resetValidationState: () => void;
-  validate: FormContext["validate"];
-  errorBag: Partial<Record<string, string[]>>;
-  setModifiedState: (value: boolean) => void;
-}
-
-export type CustomQuery = { ids: string[] | null; allSelected?: boolean };
-
-export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope> {
-  load: AsyncAction<ItemId>;
-  saveChanges: AsyncAction<Item, Item | void>;
-  remove?: AsyncAction<ItemId | Item>;
-  loading: ComputedRef<boolean>;
-  item: Ref<Item | undefined>;
-  validationState: ComputedRef<IValidationState<Item>>;
-  scope?: Scope;
-  bladeTitle?: ComputedRef<string>;
-}
-
-export interface UseList<
-  Items extends Record<string, any>[],
-  Query,
-  Scope extends ListBaseBladeScope<Items[number]> = ListBaseBladeScope<Items[number]>,
-> {
-  items: ComputedRef<Items>;
-  query: Ref<Query>;
-  loading: ComputedRef<boolean>;
-  pagination: ComputedRef<{
-    currentPage: number;
-    totalCount: number;
-    pageSize: number;
-    pages: number;
-  }>;
-  load: AsyncAction<Query>;
-  remove?: AsyncAction<CustomQuery>;
-  scope?: Scope;
-}
-
-export interface ITableConfig {
-  loading?: boolean;
-  columns?: ITableColumns[];
-  stateKey?: string;
-  items?: Record<string, any>[];
-  multiselect?: boolean;
-  header?: boolean;
-  itemActionBuilder?: (item: Record<string, any>) => IActionBuilderResult[] | undefined;
-  editing?: boolean;
-  enableItemActions?: boolean;
-  footer?: boolean;
-  sort?: string;
-  pages?: number;
-  currentPage?: number;
-  searchValue?: string;
-  selectedItemId?: string | undefined;
-  totalCount?: number;
-  reorderableRows?: boolean;
-  pullToReload?: boolean;
-  selectAll?: boolean;
-  paginationVariant?: "default" | "minimal" | undefined;
-  selectionItems?: Record<string, any>[];
-  onItemClick?: (item: Record<string, any>) => void;
-  onPaginationClick?: (page: number) => void;
-  onSelectionChanged?: (items: Record<string, any>[]) => void;
-  onHeaderClick?: (item: ITableColumns) => void;
-  "onScroll:ptr"?: () => void;
-  "onSearch:change"?: (keyword: string | undefined) => void;
-  "onRow:reorder"?: (event: { dragIndex: number; dropIndex: number; value: any[] }) => void;
-  "onSelect:all"?: (all: boolean) => void;
-  onEditComplete?: (data: { event: { field: string; value: any }; index: number }) => void;
-  onCellBlur?: (data: { row: number | undefined; field: string }) => void;
-  disableItemCheckbox?: (item: Record<string, any> | undefined) => boolean;
-  columnSelector?: "auto" | "defined" | MaybeRef<ITableColumns[]> | (() => ITableColumns[]);
-}
-
-export interface BaseBladeScope {
-  [x: string]: any;
-  toolbarOverrides?:
-    | MaybeRef<{ [x: string]: IBladeToolbar | IBladeToolbar[] | MaybeRef<IBladeToolbar> | MaybeRef<IBladeToolbar[]> }>
-    | ((...args: any[]) => any)
-    | MaybeRef<IBladeToolbar[]>;
-}
-
-export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<string, any>> extends BaseBladeScope {
-  openDetailsBlade?: (
-    args?: Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">,
-  ) => Promise<void> | void;
-  onListItemClick?: (
-    args: { item?: Item } & Omit<
-      Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"],
-      "blade" | "param" | "options"
-    >,
-  ) => void;
-  onPaginationClick?: (query: Query) => void;
-  breadcrumbs?: ComputedRef<Breadcrumbs[]>;
-  modified?: ComputedRef<boolean> | Ref<boolean> | boolean;
-  tableConfig?: (initialTableConfig: ITableConfig) => ITableConfig;
-}
-
-export type TOpenBladeArgs = Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">;
-export type TListItemClickArgs<Item extends Record<string, any> = Record<string, any>> = Omit<
-  Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"],
-  "blade" | "param" | "options"
-> & { item?: Item | undefined };
-
-export interface DetailsBaseBladeScope<Item = Record<string, any>> extends BaseBladeScope {
-  disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined> | boolean;
-  multilanguage?: {
-    loading: ComputedRef<boolean>;
-    currentLocale: Ref<string>;
-    languages: Ref<string[]>;
-    setLocale: (locale: string) => void;
-    localesOptions: Ref<{ label: string | undefined; value: string }[]>;
-    getLanguages: AsyncAction<void, void>;
-  };
-  dynamicProperties?: {
-    loading: ComputedRef<boolean>;
-    loadDictionaries: (
-      propertyId: string,
-      keyword?: string,
-      locale?: string,
-    ) => Promise<Record<string, any>[] | undefined>;
-    getPropertyValue: (property: Record<string, any>, locale: string) => any;
-    setPropertyValue: (data: {
-      property: Record<string, any>;
-      value: string | Record<string, any>[];
-      dictionary?: Record<string, any>[];
-      locale?: string;
-      initialProp?: Record<string, any>;
-    }) => void;
-  };
-  assetsHandler?: {
-    assets?: AssetsHandler<ICommonAsset>;
-    images?: AssetsHandler<ICommonAsset>;
-  };
-  selection?: Item[];
-}
-
-export interface DetailsBladeContext<
-  Item extends Record<string, any> = Record<string, any>,
-  Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope,
-> extends UseDetails<Item, Scope> {
-  settings: ComputedRef<SettingsSchema>;
-}
-
-export interface ListBladeContext<
-  Items extends Record<string, any>[] = Record<string, any>[],
-  Query = Record<string, any>,
-  Scope extends ListBaseBladeScope = ListBaseBladeScope,
-> extends UseList<Items, Query, Scope> {
-  settings: ComputedRef<SettingsSchema>;
-  selectedIds: ComputedRef<string[]>;
-}
-
-export interface BaseBladeExposed {
-  updateActiveWidgetCount: () => void;
-  readonly title: MaybeRef<string>;
-}
-
-export type ListBladeExposed<Scope extends ListBaseBladeScope> = BaseBladeExposed & {
-  readonly selectedIds: string[];
-  reload: () => void;
-  readonly settings: SettingsGrid;
-} & UnwrapNestedRefs<Scope>;
-
-export type DetailsBladeExposed<Scope extends DetailsBaseBladeScope> = BaseBladeExposed & {
-  readonly settings: SettingsDetails;
-  readonly item: Record<string, any>;
-  readonly validationState: IValidationState<Record<string, any>>;
-} & UnwrapNestedRefs<Scope>;
-
-export type DetailsComposableArgs<
-  Props extends Omit<InstanceType<typeof DynamicBladeForm>["$props"], "composables"> = Record<string, any>,
-> = {
-  props: InstanceType<typeof DynamicBladeForm>["$props"] & Props;
-  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
-  mounted: Ref<boolean>;
-};
-
-export type ListComposableArgs<
-  Props extends Omit<InstanceType<typeof DynamicBladeList>["$props"], "composables"> = Record<string, any>,
-> = {
-  readonly props: InstanceType<typeof DynamicBladeList>["$props"] & Props;
-  readonly emit: InstanceType<typeof DynamicBladeList>["$emit"];
-  readonly mounted: Ref<boolean>;
-  readonly isWidgetView: boolean;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
+import { AsyncAction } from "../../../../../core/composables";
+import { SettingsDetails, SettingsGrid, SettingsSchema } from "../../types";
+import {
+  AssetsHandler,
+  IActionBuilderResult,
+  IBladeToolbar,
+  ICommonAsset,
+  ITableColumns,
+} from "../../../../../core/types";
+import { useBladeNavigation } from "../../../../components";
+import { FormContext } from "vee-validate";
+import { Breadcrumbs } from "../../../../../ui/types";
+import { DynamicBladeForm, DynamicBladeList } from "../../pages";
+
+export type ItemId = { id: string };
+
+export interface IPagination {
+  currentPage: number;
+  totalCount: number;
+  pageSize: number;
+  pages: number;
+}
+
+export interface IValidationState<Item> {
+  valid: boolean;
+  /**
+   * @deprecated `dirty` - use `modified` instead
+   */
+  dirty: boolean;
+  disabled: boolean;
+  modified: boolean;
+  validated: boolean;
+  cachedValue: Item | undefined;
+  setFieldError: FormContext["setFieldError"];
+  setFieldValue: FormContext["setFieldValue"];
+  setValues: FormContext["setValues"];
+  setErrors: FormContext["setErrors"];
+  resetModified: (
+    data: MaybeRef<Item | undefined> | ComputedRef<Item | undefined>,
+    updateInitial?: MaybeRef<boolean>,
+  ) => void;
+  resetValidationState: () => void;
+  validate: FormContext["validate"];
+  errorBag: Partial<Record<string, string[]>>;
+  setModifiedState: (value: boolean) => void;
+}
+
+export type CustomQuery = { ids: string[] | null; allSelected?: boolean };
+
+export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope> {
+  load: AsyncAction<ItemId>;
+  saveChanges: AsyncAction<Item, Item | void>;
+  remove?: AsyncAction<ItemId | Item>;
+  loading: ComputedRef<boolean>;
+  item: Ref<Item | undefined>;
+  validationState: ComputedRef<IValidationState<Item>>;
+  scope?: Scope;
+  bladeTitle?: ComputedRef<string>;
+}
+
+export interface UseList<
+  Items extends Record<string, any>[],
+  Query,
+  Scope extends ListBaseBladeScope<Items[number]> = ListBaseBladeScope<Items[number]>,
+> {
+  items: ComputedRef<Items>;
+  query: Ref<Query>;
+  loading: ComputedRef<boolean>;
+  pagination: ComputedRef<{
+    currentPage: number;
+    totalCount: number;
+    pageSize: number;
+    pages: number;
+  }>;
+  load: AsyncAction<Query>;
+  remove?: AsyncAction<CustomQuery>;
+  scope?: Scope;
+}
+
+export interface ITableConfig {
+  loading?: boolean;
+  columns?: ITableColumns[];
+  stateKey?: string;
+  items?: Record<string, any>[];
+  multiselect?: boolean;
+  header?: boolean;
+  itemActionBuilder?: (item: Record<string, any>) => IActionBuilderResult[] | undefined;
+  editing?: boolean;
+  enableItemActions?: boolean;
+  footer?: boolean;
+  sort?: string;
+  pages?: number;
+  currentPage?: number;
+  searchValue?: string;
+  selectedItemId?: string | undefined;
+  totalCount?: number;
+  reorderableRows?: boolean;
+  pullToReload?: boolean;
+  selectAll?: boolean;
+  paginationVariant?: "default" | "minimal" | undefined;
+  selectionItems?: Record<string, any>[];
+  onItemClick?: (item: Record<string, any>) => void;
+  onPaginationClick?: (page: number) => void;
+  onSelectionChanged?: (items: Record<string, any>[]) => void;
+  onHeaderClick?: (item: ITableColumns) => void;
+  "onScroll:ptr"?: () => void;
+  "onSearch:change"?: (keyword: string | undefined) => void;
+  "onRow:reorder"?: (event: { dragIndex: number; dropIndex: number; value: any[] }) => void;
+  "onSelect:all"?: (all: boolean) => void;
+  onEditComplete?: (data: { event: { field: string; value: any }; index: number }) => void;
+  onCellBlur?: (data: { row: number | undefined; field: string }) => void;
+  disableItemCheckbox?: (item: Record<string, any> | undefined) => boolean;
+  columnSelector?: "auto" | "defined" | MaybeRef<ITableColumns[]> | (() => ITableColumns[]);
+}
+
+export interface BaseBladeScope {
+  [x: string]: any;
+  toolbarOverrides?:
+    | MaybeRef<{ [x: string]: IBladeToolbar | IBladeToolbar[] | MaybeRef<IBladeToolbar> | MaybeRef<IBladeToolbar[]> }>
+    | ((...args: any[]) => any)
+    | MaybeRef<IBladeToolbar[]>;
+}
+
+export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<string, any>> extends BaseBladeScope {
+  openDetailsBlade?: (
+    args?: Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">,
+  ) => Promise<void> | void;
+  onListItemClick?: (
+    args: { item?: Item } & Omit<
+      Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"],
+      "blade" | "param" | "options"
+    >,
+  ) => void;
+  onPaginationClick?: (query: Query) => void;
+  breadcrumbs?: ComputedRef<Breadcrumbs[]>;
+  modified?: ComputedRef<boolean> | Ref<boolean> | boolean;
+  tableConfig?: (initialTableConfig: ITableConfig) => ITableConfig;
+}
+
+export type TOpenBladeArgs = Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">;
+export type TListItemClickArgs<Item extends Record<string, any> = Record<string, any>> = Omit<
+  Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"],
+  "blade" | "param" | "options"
+> & { item?: Item | undefined };
+
+export interface DetailsBaseBladeScope<Item = Record<string, any>> extends BaseBladeScope {
+  disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined> | boolean;
+  multilanguage?: {
+    loading: ComputedRef<boolean>;
+    currentLocale: Ref<string>;
+    languages: Ref<string[]>;
+    setLocale: (locale: string) => void;
+    localesOptions: Ref<{ label: string | undefined; value: string }[]>;
+    getLanguages: AsyncAction<void, void>;
+  };
+  dynamicProperties?: {
+    loading: ComputedRef<boolean>;
+    loadDictionaries: (
+      propertyId: string,
+      keyword?: string,
+      locale?: string,
+    ) => Promise<Record<string, any>[] | undefined>;
+    getPropertyValue: (property: Record<string, any>, locale: string) => any;
+    setPropertyValue: (data: {
+      property: Record<string, any>;
+      value: string | Record<string, any>[];
+      dictionary?: Record<string, any>[];
+      locale?: string;
+      initialProp?: Record<string, any>;
+    }) => void;
+  };
+  assetsHandler?: {
+    assets?: AssetsHandler<ICommonAsset>;
+    images?: AssetsHandler<ICommonAsset>;
+  };
+  selection?: Item[];
+}
+
+export interface DetailsBladeContext<
+  Item extends Record<string, any> = Record<string, any>,
+  Scope extends DetailsBaseBladeScope = DetailsBaseBladeScope,
+> extends UseDetails<Item, Scope> {
+  settings: ComputedRef<SettingsSchema>;
+}
+
+export interface ListBladeContext<
+  Items extends Record<string, any>[] = Record<string, any>[],
+  Query = Record<string, any>,
+  Scope extends ListBaseBladeScope = ListBaseBladeScope,
+> extends UseList<Items, Query, Scope> {
+  settings: ComputedRef<SettingsSchema>;
+  selectedIds: ComputedRef<string[]>;
+}
+
+export interface BaseBladeExposed {
+  updateActiveWidgetCount: () => void;
+  readonly title: MaybeRef<string>;
+}
+
+export type ListBladeExposed<Scope extends ListBaseBladeScope> = BaseBladeExposed & {
+  readonly selectedIds: string[];
+  reload: () => void;
+  readonly settings: SettingsGrid;
+} & UnwrapNestedRefs<Scope>;
+
+export type DetailsBladeExposed<Scope extends DetailsBaseBladeScope> = BaseBladeExposed & {
+  readonly settings: SettingsDetails;
+  readonly item: Record<string, any>;
+  readonly validationState: IValidationState<Record<string, any>>;
+} & UnwrapNestedRefs<Scope>;
+
+export type DetailsComposableArgs<
+  Props extends Omit<InstanceType<typeof DynamicBladeForm>["$props"], "composables"> = Record<string, any>,
+> = {
+  props: InstanceType<typeof DynamicBladeForm>["$props"] & Props;
+  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
+  mounted: Ref<boolean>;
+};
+
+export type ListComposableArgs<
+  Props extends Omit<InstanceType<typeof DynamicBladeList>["$props"], "composables"> = Record<string, any>,
+> = {
+  readonly props: InstanceType<typeof DynamicBladeList>["$props"] & Props;
+  readonly emit: InstanceType<typeof DynamicBladeList>["$emit"];
+  readonly mounted: Ref<boolean>;
+};

package/shared/modules/dynamic/types/index.ts

@@ -843,7 +843,10 @@ export interface CardSchema
 
 export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator" | "permissions"> {
   component: "vc-widgets";
-  children: string[] | { id: string; visibility?: { method: string } }[];
+  children:
+    | string[]
+    | { id: string; visibility?: { method: string } }[]
+    | (string | { id: string; visibility?: { method: string } })[];
 }
 
 export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "placeholder" | "onBlur"> {

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

@@ -249,7 +249,7 @@ export const DotIndicator: Story = {
         <div class="tw-flex tw-gap-4">
           <div v-for="variant in variants" :key="variant" class="tw-flex tw-flex-col tw-items-center tw-gap-2">
             <VcBadge :isDot="true" :variant="variant">
-              <div class="tw-w-10 tw-h-10 tw-bg-gray-200 tw-rounded tw-flex tw-items-center tw-justify-center">
+              <div class="tw-w-5 tw-h-5 tw-bg-gray-200 tw-rounded tw-flex tw-items-center tw-justify-center">
                 <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                 </svg>
@@ -463,7 +463,7 @@ export const UseCases: Story = {
               :variant="example.variant"
               :isDot="example.isDot"
             >
-              <div class="tw-w-12 tw-h-12 tw-bg-gray-200 tw-rounded tw-flex tw-items-center tw-justify-center">
+              <div class="tw-w-8 tw-h-8 tw-bg-gray-200 tw-rounded tw-flex tw-items-center tw-justify-center">
                 <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-6 tw-w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="example.icon" />
                 </svg>

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

@@ -11,7 +11,7 @@
       <slot name="default"></slot>
 
       <div
-        v-if="typeof content !== 'undefined'"
+        v-if="typeof content !== 'undefined' || isDot"
         ref="badge"
         class="vc-badge__badge"
         :class="[

package/ui/components/index.ts

@@ -6,5 +6,3 @@ export * from "./molecules";
 
 /* Organisms */
 export * from "./organisms";
-
-export { default as VcSkeleton } from './atoms/vc-skeleton/vc-skeleton.vue';

package/ui/components/molecules/index.ts

@@ -14,3 +14,4 @@ export * from "./vc-multivalue";
 export * from "./vc-field";
 export * from "./vc-radio-button";
 export * from "./vc-checkbox";
+export * from "./vc-input-dropdown";

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -47,7 +47,7 @@
 <script lang="ts" setup>
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { unref, watch } from "vue";
-import { VcInputDropdown } from "./../../";
+import { VcInputDropdown } from "./../../molecules/vc-input-dropdown";
 import { OptionProp } from "../vc-select/vc-select.vue";
 
 export interface Props {
@@ -214,9 +214,11 @@ watch(numberValue, (value) => {
 });
 
 function updateModel(value: string | number | Date | null | undefined) {
-  inputRef.value.value = value as string;
-  numberValue.value = value as number | null;
-  emit("update:model-value", value as number);
+  if (inputRef.value) {
+    inputRef.value.value = value as string;
+  }
+  numberValue.value = typeof value === "number" ? value : value === null ? null : parseFloat(String(value)) || null;
+  emit("update:model-value", numberValue.value);
 }
 
 function handleBlur(event: Event) {

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue

@@ -96,7 +96,7 @@ export interface Props {
   /**
    * Model of the input component
    */
-  modelValue: unknown;
+  modelValue: string | number | Date | null | undefined;
   /**
    * Input label text
    */
@@ -195,11 +195,11 @@ export interface Props {
    * Type of the input field
    * Default: text
    */
-  inputType?: string;
+  inputType?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
 }
 
 export interface Emits {
-  (event: "update:model-value", value: unknown): void;
+  (event: "update:model-value", value: string | number | Date | null | undefined): void;
   (event: "update:option", value: unknown): void;
   (event: "change", value: unknown): void;
   (event: "blur", value: Event): void;
@@ -241,10 +241,10 @@ defineSlots<{
    * Slot for custom input control
    */
   control: (scope: {
-    placeholder: string;
-    focused: boolean;
-    modelValue: unknown;
-    emitValue: (value: unknown) => void;
+    placeholder?: string;
+    focused?: boolean;
+    modelValue: string | number | Date | null | undefined;
+    emitValue: (value: string | number | Date | null) => void;
   }) => unknown;
 }>();
 

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

@@ -130,7 +130,9 @@ const visibleItems = computed(() => {
     .filter(
       (item) =>
         hasAccess(item.permissions) &&
-        (item.isVisible === undefined || item.isVisible) &&
+        (typeof item.isVisible === "function"
+          ? item.isVisible(blade.value)
+          : item.isVisible === undefined || item.isVisible) &&
         (isMobile.value ? !item.disabled : true),
     )
     .sort((a, b) => {

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-mobile.vue

@@ -51,22 +51,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, inject } from "vue";
 import { useAdaptiveItems } from "../../../../../../composables/useAdaptiveItems";
 
 import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
 import { VcIcon, ChevronUpIcon } from "../../../../..";
 import { IWidget } from "../../../../../../../core/services";
+import { BladeInstance } from "../../../../../../../injection-keys";
+import { IBladeInstance } from "../../../../../../../shared/components/blade-navigation/types";
 
 interface Props {
   widgets: IWidget[];
+  bladeId: string;
 }
 
 const props = defineProps<Props>();
 const containerRef = ref<HTMLElement | null>(null);
 const showToolbar = ref(false);
+const bladeInstance = inject<IBladeInstance>(BladeInstance);
 
-const isAnyVisible = computed(() => props.widgets.some((widget) => widget.isVisible));
+const isAnyVisible = computed(() =>
+  props.widgets.some((widget) => {
+    if (typeof widget.isVisible === "function") {
+      return widget.isVisible(bladeInstance);
+    } else if (typeof widget.isVisible === "boolean") {
+      return widget.isVisible;
+    }
+    return widget.isVisible;
+  }),
+);
 
 const { visibleItems, showMoreButton, recalculate, hiddenItems, updateObserver } = useAdaptiveItems<IWidget>({
   containerRef,

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/vc-widget-container.vue

@@ -14,9 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toValue } from "vue";
+import { computed, toValue, inject } from "vue";
 import { useWidgets } from "../../../../../../core/composables/useWidgets";
 import { WidgetContainerDesktop, WidgetContainerMobile } from "./_internal";
+import { BladeInstance } from "../../../../../../injection-keys";
+import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
 
 interface Props {
   bladeId: string;
@@ -25,11 +27,12 @@ interface Props {
 const props = defineProps<Props>();
 const widgetService = useWidgets();
 const widgets = computed(() => widgetService.getWidgets(props.bladeId));
+const bladeInstance = inject<IBladeInstance>(BladeInstance);
 
 const visibleWidgets = computed(() =>
   widgets.value.filter((widget) => {
     if (typeof widget.isVisible === "function") {
-      return widget.isVisible();
+      return widget.isVisible(bladeInstance);
     } else if (typeof widget.isVisible === "boolean") {
       return widget.isVisible;
     }