@vc-shell/framework 1.0.222 → 1.0.223

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.222",
+  "version": "1.0.223",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -60,9 +60,9 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/quill": "^2.0.14",
-    "@vc-shell/api-client-generator": "^1.0.222",
-    "@vc-shell/config-generator": "^1.0.222",
-    "@vc-shell/ts-config": "^1.0.222",
+    "@vc-shell/api-client-generator": "^1.0.223",
+    "@vc-shell/config-generator": "^1.0.223",
+    "@vc-shell/ts-config": "^1.0.223",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "shx": "^0.3.4",

package/shared/modules/dynamic/components/fields/InputCurrency.ts

@@ -1,4 +1,4 @@
-import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, h, unref } from "vue";
 import { InputCurrency } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
@@ -8,13 +8,11 @@ import { InputCurrencySchema } from "../../types";
 import { unrefNested } from "../../helpers/unrefNested";
 import { toValue } from "@vueuse/core";
 import { safeIn } from "../../helpers/safeIn";
-import { useI18n } from "vue-i18n";
 
 export default {
   name: "InputCurrency",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputCurrencySchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const options =
         toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
@@ -35,7 +33,6 @@ export default {
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             option: toValue(scopedProperty ?? contextProperty),
             optionLabel: props.element.optionLabel,
             optionValue: props.element.optionValue,

package/shared/modules/dynamic/components/fields/InputField.ts

@@ -1,11 +1,10 @@
-import { ExtractPropTypes, h, VNode, Component, computed, toValue } from "vue";
+import { ExtractPropTypes, h, VNode, Component } from "vue";
 import { InputField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { InputSchema, ControlSchema } from "../../types";
 import { nodeBuilder } from "../../helpers/nodeBuilder";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 const slotsMap = {
   append: "append",
@@ -18,14 +17,11 @@ export default {
   name: "InputField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-
     return () => {
       const field = InputField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             type: props.element.variant,
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,

package/shared/modules/dynamic/components/fields/MultivalueField.ts

@@ -1,12 +1,11 @@
 import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode, computed, toValue } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { MultivalueField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { MultivalueSchema } from "../../types";
 import { VcMultivalue } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
   Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
@@ -15,13 +14,11 @@ export default {
   name: "MultivalueField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = MultivalueField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             multivalue: props.element.multivalue,
             type: props.element.variant,
             optionValue: props.element.optionValue,

package/shared/modules/dynamic/components/fields/SelectField.ts

@@ -1,12 +1,11 @@
 import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode, computed, toValue } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { SelectField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
 import { VcSelect } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
-import { useI18n } from "vue-i18n";
 
 type TScope =
   | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
@@ -16,13 +15,11 @@ export default {
   name: "SelectField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
-    const { t } = useI18n({ useScope: "global" });
     return () => {
       const field = SelectField({
         props: Object.assign(
           {},
           {
-            hint: props.element.hint ? toValue(computed(() => t(props.element.hint ?? ""))) : undefined,
             optionValue: props.element.optionValue,
             optionLabel: props.element.optionLabel,
             emitValue: props.element.emitValue,

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -64,7 +64,7 @@ export default <Query>(args: {
   data: FilterBase | undefined;
   query: MaybeRef<Query>;
   load: AsyncAction<Query>;
-  scope: ComputedRef<Record<string, any>> | undefined;
+  scope: Record<string, any> | undefined;
 }): UseFilterBuilder => {
   const _search = args.load;
   const _data = args.data;

package/shared/modules/dynamic/composables/useToolbarReducer/index.ts

@@ -12,7 +12,6 @@ export const useToolbarReducer = (args: {
   defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
-  scope: ComputedRef<BaseBladeScope> | undefined;
 }): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[] | IBladeToolbar[] | undefined>> | undefined => {
   if (!args) return;
 
@@ -66,19 +65,6 @@ export const useToolbarReducer = (args: {
       }, [] as IBladeToolbar[]);
     }
 
-    // TODO remove redundant code if not needed
-    // if (args.scope && toValue(toValue(args.scope)?.toolbarOverrides)) {
-    //   const toolbarOverrides: BaseBladeScope["toolbarOverrides"] = toValue(toValue(args.scope)?.toolbarOverrides);
-
-    //   if (Array.isArray(toolbarOverrides)) {
-    //     return toolbarOverrides;
-    //   } else if (typeof toolbarOverrides === "function") {
-    //     return toolbarOverrides(args.context);
-    //   } else if (typeof toolbarOverrides === "object") {
-    //     return Object.values(toolbarOverrides);
-    //   }
-    // }
-
     return [];
   });
 };

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

@@ -6,6 +6,7 @@ import { AssetsHandler, IBladeToolbar, ICommonAsset } from "../../../../../core/
 import { useBladeNavigation } from "../../../../components";
 import { FormContext } from "vee-validate";
 import { Breadcrumbs } from "../../../../../ui/types";
+import { DynamicBladeForm, DynamicBladeList } from "../../pages";
 
 export type ItemId = { id: string };
 
@@ -44,7 +45,7 @@ export interface UseDetails<Item, Scope extends DetailsBaseBladeScope = DetailsB
   loading: ComputedRef<boolean>;
   item: Ref<Item | undefined>;
   validationState: ComputedRef<IValidationState<Item>>;
-  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+  scope?: Scope;
   bladeTitle?: ComputedRef<string>;
 }
 
@@ -64,7 +65,7 @@ export interface UseList<
   }>;
   load: AsyncAction<Query>;
   remove?: AsyncAction<CustomQuery>;
-  scope?: ComputedRef<UnwrapNestedRefs<Scope>>;
+  scope?: Scope;
 }
 
 export interface BaseBladeScope {
@@ -150,3 +151,19 @@ export type ListBladeExposed<Scope extends ListBaseBladeScope> = BaseBladeExpose
 export type DetailsBladeExposed<Scope extends DetailsBaseBladeScope> = BaseBladeExposed & {
   readonly settings: SettingsDetails;
 } & 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/helpers/nodeBuilder.ts

@@ -74,6 +74,13 @@ function nodeBuilder<
       ? unref(unwrapInterpolation(controlSchema.label, internalContext))
       : undefined;
 
+  const hint =
+    safeIn("hint", controlSchema) && controlSchema.hint
+      ? unref(unwrapInterpolation(controlSchema.hint, internalContext)) ??
+        (bladeContext.scope && unref(unwrapInterpolation(controlSchema.hint, bladeContext.scope))) ??
+        undefined
+      : undefined;
+
   const disabled =
     (bladeContext.scope && safeIn("disabled", bladeContext.scope) && bladeContext.scope.disabled) ||
     (safeIn("disabled", controlSchema) &&
@@ -109,6 +116,7 @@ function nodeBuilder<
   const baseProps: IControlBaseProps = reactive({
     key: `${parentId}`,
     label: computed(() => (label ? t(label) : undefined)),
+    hint: computed(() => (hint ? t(hint) : undefined)),
     disabled,
     name,
     rules,

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -37,7 +37,7 @@
               v-model="item"
               :ui-schema="form.children"
               :context="bladeContext"
-              :current-locale="scope?.multilanguage?.currentLocale"
+              :current-locale="toValue(unreffedScope)?.multilanguage?.currentLocale"
             ></SchemaRender>
           </VcForm>
         </div>
@@ -158,6 +158,7 @@ const isReady = ref(false);
 const activeWidgetExposed = ref<CoreBladeExposed>();
 const isBladeEditable = computed(() => !toValue("disabled" in toValue(scope || {}) && toValue(scope || {}).disabled));
 const settings = computed(() => props.model?.settings);
+const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 
@@ -220,24 +221,29 @@ const bladeStatus = computed(() => {
 });
 
 const bladeMultilanguage = reactiveComputed(() => {
-  if (scope && toValue(scope) && "multilanguage" in toValue(scope) && toValue(scope).multilanguage) {
+  if (
+    scope &&
+    toValue(unreffedScope) &&
+    "multilanguage" in toValue(unreffedScope) &&
+    toValue(unreffedScope).multilanguage
+  ) {
     return {
       component: () => {
         return h(VcSelect as Component, {
           name: "currentLocale",
-          modelValue: toValue(scope).multilanguage?.currentLocale,
-          options: toValue(scope).multilanguage?.localesOptions,
+          modelValue: toValue(unreffedScope).multilanguage?.currentLocale,
+          options: toValue(unreffedScope).multilanguage?.localesOptions,
           optionValue: "value",
           optionLabel: "label",
-          disabled: "disabled" in toValue(scope) && toValue(scope).disabled,
+          disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
           required: true,
           clearable: false,
           "onUpdate:modelValue": (e: string) => {
-            toValue(scope).multilanguage?.setLocale(e);
+            toValue(unreffedScope).multilanguage?.setLocale(e);
           },
         });
       },
-      currentLocale: toValue(scope).multilanguage?.currentLocale,
+      currentLocale: toValue(unreffedScope).multilanguage?.currentLocale,
     };
   }
 
@@ -304,12 +310,11 @@ const toolbarComputed =
               emit("close:blade");
             }
           },
-          disabled: computed(() => toValue(scope)?.disabled),
+          disabled: computed(() => toValue(toValue(unreffedScope)?.disabled)),
         },
       },
-      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
       context: bladeContext.value,
-      scope,
     })) ??
   [];
 
@@ -363,7 +368,7 @@ provide("isBladeEditable", isBladeEditable);
 defineExpose({
   title: bladeTitle ?? "",
   updateActiveWidgetCount,
-  ...toRefs(scope?.value ?? {}),
+  ...toRefs(toValue(unreffedScope) ?? {}),
   settings: toValue(settings),
 });
 </script>

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -10,7 +10,7 @@
     :class="{
       'tw-flex tw-flex-auto': isWidgetView,
     }"
-    :modified="unref(scope)?.modified"
+    :modified="unreffedScope?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -34,7 +34,7 @@
           'tw-p-4',
         ]"
       >
-        <VcBreadcrumbs :items="scope?.breadcrumbs" />
+        <VcBreadcrumbs :items="toValue(scope?.breadcrumbs)" />
       </div>
       <VcTable
         class="tw-grow tw-basis-0"
@@ -163,7 +163,6 @@ import {
   toRefs,
   provide,
   isRef,
-  onMounted,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
@@ -175,7 +174,7 @@ import { notification, useBladeNavigation, usePopup } from "../../../components"
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import * as _ from "lodash-es";
-import { toReactive, useMounted } from "@vueuse/core";
+import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 
 export interface Props {
@@ -289,6 +288,8 @@ if (props.isWidgetView) {
   query.value.take = 5;
 }
 
+const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
+
 const { tableTemplates } = useTableTemplates(tableData);
 
 const calculateColumns = (columns: ListContentSchema["columns"]) => {
@@ -356,11 +357,11 @@ const toolbarComputed =
           async clickHandler() {
             if (
               scope &&
-              "openDetailsBlade" in toValue(scope) &&
-              toValue(scope).openDetailsBlade &&
-              typeof toValue(scope).openDetailsBlade === "function"
+              "openDetailsBlade" in toValue(unreffedScope) &&
+              toValue(unreffedScope).openDetailsBlade &&
+              typeof toValue(unreffedScope).openDetailsBlade === "function"
             ) {
-              toValue(scope).openDetailsBlade?.();
+              toValue(unreffedScope).openDetailsBlade?.();
             } else throw new Error("openDetailsBlade method is not defined in scope");
           },
         },
@@ -377,9 +378,8 @@ const toolbarComputed =
           // isVisible: computed(() => isDesktop.value),
         },
       },
-      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
       context: bladeContext.value,
-      scope,
     })) ??
   [];
 
@@ -408,11 +408,11 @@ const openDetailsBlade = async () => {
   if (!props.isWidgetView) {
     if (
       scope &&
-      "openDetailsBlade" in toValue(scope) &&
-      toValue(scope).openDetailsBlade &&
-      typeof toValue(scope).openDetailsBlade === "function"
+      "openDetailsBlade" in toValue(unreffedScope) &&
+      toValue(unreffedScope).openDetailsBlade &&
+      typeof toValue(unreffedScope).openDetailsBlade === "function"
     ) {
-      await toValue(scope).openDetailsBlade?.();
+      await toValue(unreffedScope).openDetailsBlade?.();
     }
   } else {
     emit("add");
@@ -422,8 +422,12 @@ const openDetailsBlade = async () => {
 const onItemClick = (item: { [x: string]: any; id?: string }) => {
   if (!props.isWidgetView) {
     // TODO Add to docs
-    if (scope && safeIn("onListItemClick", toValue(scope)) && typeof toValue(scope).onListItemClick === "function") {
-      toValue(scope).onListItemClick?.({
+    if (
+      scope &&
+      safeIn("onListItemClick", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).onListItemClick === "function"
+    ) {
+      toValue(unreffedScope).onListItemClick?.({
         item,
         onOpen() {
           selectedItemId.value = item.id;
@@ -434,10 +438,10 @@ const onItemClick = (item: { [x: string]: any; id?: string }) => {
       });
     } else if (
       scope &&
-      safeIn("openDetailsBlade", toValue(scope)) &&
-      typeof toValue(scope).openDetailsBlade === "function"
+      safeIn("openDetailsBlade", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).openDetailsBlade === "function"
     ) {
-      toValue(scope).openDetailsBlade?.({
+      toValue(unreffedScope).openDetailsBlade?.({
         param: item.id,
         onOpen() {
           selectedItemId.value = item.id;
@@ -511,10 +515,10 @@ const onPaginationClick = async (page: number) => {
   if (query.value.take) {
     if (
       scope &&
-      safeIn("onPaginationClick", toValue(scope)) &&
-      typeof toValue(scope).onPaginationClick === "function"
+      safeIn("onPaginationClick", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).onPaginationClick === "function"
     ) {
-      toValue(scope).onPaginationClick?.({
+      toValue(unreffedScope).onPaginationClick?.({
         ...query.value,
         skip: (page - 1) * query.value.take,
       });
@@ -600,9 +604,10 @@ async function handleSelectAllItems(all: boolean) {
 function disabledActionHandler(disabled: { method?: string } | boolean, item: (typeof items.value)[number]): boolean {
   if (!disabled) return false;
   if (typeof disabled === "boolean") return disabled;
-  else if (disabled.method && typeof toValue(scope)?.[disabled.method] === "function")
-    return toValue(scope)?.[disabled.method]({ item });
-  else if (disabled.method && toValue(scope)?.[disabled.method]) return toValue(scope)?.[disabled.method];
+  else if (disabled.method && typeof toValue(unreffedScope)?.[disabled.method] === "function")
+    return toValue(unreffedScope)?.[disabled.method]({ item });
+  else if (disabled.method && toValue(unreffedScope)?.[disabled.method])
+    return toValue(unreffedScope)?.[disabled.method];
   return false;
 }
 
@@ -627,7 +632,7 @@ function actionBuilder(item: (typeof items.value)[number]): IActionBuilderResult
               if (toolbarItem) {
                 await toolbarItem.clickHandler?.();
               } else {
-                await toValue(scope)?.[action.method]?.(itemVal);
+                await toValue(unreffedScope)?.[action.method]?.(itemVal);
               }
               selectedIds.value = [];
             }
@@ -649,7 +654,7 @@ defineExpose({
   reload,
   title,
   updateActiveWidgetCount,
-  ...toRefs(scope?.value ?? {}),
+  ...toRefs(toValue(unreffedScope) ?? {}),
   selectedIds,
   settings: toValue(settings),
 });