@vc-shell/framework 1.0.110 → 1.0.112

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -25,7 +25,7 @@ import {
   notification,
   BladePageComponent,
 } from "../../../..";
-import { bladeNavigationInstance } from "./../../plugin";
+import { bladeNavigationInstance } from "../../plugin";
 import pattern from "url-pattern";
 import { useLocalStorage } from "@vueuse/core";
 
@@ -64,11 +64,12 @@ const workspaceOptions: Ref<Record<string, any>> = ref();
 const workspaceParam: Ref<string> = ref();
 const activeBlade = ref();
 const lastBladeData = useLocalStorage<BladeData>("VC_BLADE_DATA", {});
+// const resolvedLastBlade = ref<BladePageComponent>();
 
 export function useBladeNavigation(): IUseBladeNavigation {
   const router = useRouter();
   const urlPattern = new pattern("(/:workspace(/:blade(/:param)))");
-  const { checkPermission } = usePermissions();
+  const { hasAccess } = usePermissions();
   const isPrevented = ref(false);
   const routes = router.getRoutes();
 
@@ -108,14 +109,27 @@ export function useBladeNavigation(): IUseBladeNavigation {
     const bladeComponent = unref(blade);
 
     if (!isPrevented.value) {
-      workspaceOptions.value = unref(options);
-      workspaceParam.value = unref(param);
-
-      await nextTick();
       await router.replace(bladeComponent.url);
+
+      await nextTick(() => {
+        workspaceOptions.value = unref(options);
+        workspaceParam.value = unref(param);
+      });
     }
   }
 
+  function isBladeComponent(
+    component: Omit<BladeComponentInternalInstance["vnode"]["type"], "__isFragment"> | BladeConstructor
+  ) {
+    if (!instance) {
+      warn("isBladeComponent can only be used in setup().");
+      return;
+    }
+    const foundComponent = _.find(instance.appContext.components, component);
+
+    return foundComponent && "isBladeComponent" in foundComponent && !!foundComponent.isBladeComponent;
+  }
+
   async function openBlade<Blade extends ComponentPublicInstance>(
     { blade, param, options, onOpen, onClose }: IBladeEvent<Blade>,
     isWorkspace = false
@@ -128,12 +142,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
       return;
     }
 
+    await nextTick();
+
     clearParentData();
 
     // caller blade component
-    const instanceComponent =
-      navigationInstance.bladesRefs.value.find((item) => item.active)?.blade?.blade ??
-      (instance && instance.vnode.type);
+    const instanceComponent = isBladeComponent(instance.vnode.type)
+      ? instance.vnode.type
+      : navigationInstance.bladesRefs.value.find((item) => item.active)?.blade?.blade;
 
     if (instanceComponent) {
       // Caller blade index in blades array
@@ -207,10 +223,9 @@ export function useBladeNavigation(): IUseBladeNavigation {
       await closeBlade(index);
     }
 
-    if (blade && checkPermission(blade.permissions)) {
+    if (blade && hasAccess(blade.permissions)) {
       navigationInstance.blades.value.push({
         blade: markRaw(blade),
-        ...resolveDynamicProps(blade),
         options,
         param,
         onOpen,
@@ -228,21 +243,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
     }
   }
 
-  function resolveDynamicProps(blade: BladeConstructor) {
-    const routerRoutes = router.getRoutes();
-
-    const selectedRoute = routerRoutes.find((r) => r.path === blade.url);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const selectedRouteProps = selectedRoute?.props as Record<string, () => any>;
-
-    if (selectedRouteProps && "default" in selectedRouteProps && typeof selectedRouteProps.default === "function") {
-      return selectedRouteProps.default();
-    }
-
-    return {};
-  }
-
   async function onParentCall(index: number, args: IParentCallArgs) {
     console.debug(`vc-app#onParentCall(${index}, { method: ${args.method} }) called.`);
 
@@ -312,11 +312,20 @@ export function useBladeNavigation(): IUseBladeNavigation {
     if (lastBladeData.value?.blade) {
       const blade = pages?.find((b) => b.url === lastBladeData.value?.blade);
       setParentData({ param: lastBladeData.value?.param });
-      openBlade({ blade, param: lastBladeData.value?.param });
-      clearSavedBladeData();
+
+      if (!isBladeAlreadyOpened({ blade, param: lastBladeData.value?.param })) {
+        openBlade({ blade, param: lastBladeData.value?.param });
+        clearSavedBladeData();
+      }
     }
   }
 
+  function isBladeAlreadyOpened(args: { blade: BladePageComponent; param?: string }) {
+    return navigationInstance?.blades.value.some((x) => {
+      return x.blade === args.blade && x.param === args.param;
+    });
+  }
+
   function resolveBladeByName(name: string) {
     if (!instance) {
       warn("resolveComponentByName can only be used in setup().");
@@ -325,8 +334,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
     if (!name) {
       throw new Error("blade name is required");
     }
-
-    console.log(instance.appContext.components);
     const components = instance && instance.appContext.components;
     return components[name] as BladeConstructor;
   }

package/shared/components/blade-navigation/types/index.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComponentPublicInstance, VNode, ComponentInternalInstance, VNodeTypes, Ref } from "vue";
-import { PushNotification } from "./../../../../core/api/platform";
 
-export type BladeInstanceConstructor<T extends ComponentPublicInstance = any> = {
+export type BladeInstanceConstructor<T extends ComponentPublicInstance = ComponentPublicInstance> = {
   new (...args: any[]): T & { $: ComponentInternalInstance & { exposed: CoreBladeExposed & T["$"]["exposed"] } } & {
     $props: T["$props"] & CoreBladeComponentProps;
   };
-} & CoreBladeAdditionalSettings &
+} & CoreComponentData &
+  CoreBladeAdditionalSettings &
   CoreBladeNavigationData;
 
 export type ComponentInstanceConstructor<T = any> = {
@@ -22,6 +22,10 @@ export type CoreBladeComponentProps = {
 
 export type BladePageComponent = BladeConstructor;
 
+export type CoreComponentData = {
+  isBladeComponent?: boolean;
+};
+
 export type CoreBladeAdditionalSettings = {
   url?: `/${string}`;
   permissions?: string | string[];

package/shared/components/notifications/composables/useContainer/index.ts

@@ -3,6 +3,7 @@ import { NotificationOptions } from "../../types";
 import { NotificationContainer } from "../../components";
 import { useInstance } from "../useInstance";
 import * as _ from "lodash-es";
+import { generateId } from "../../../../../core/utilities";
 
 interface PendingNotification {
   notificationId: string | number;
@@ -104,10 +105,6 @@ export function useContainer(): IUseContainer {
     });
   }
 
-  function generateNotificationId() {
-    return Math.random().toString(36).substring(2, 9);
-  }
-
   const actions = {
     add(options: NotificationOptions) {
       if (!notificationContainer.value.find((item) => item.notificationId === options.notificationId)) {
@@ -185,6 +182,6 @@ export function useContainer(): IUseContainer {
     getAllNotifications,
     appendInstance,
     getNotification,
-    generateNotificationId,
+    generateNotificationId: generateId,
   };
 }

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -28,11 +28,9 @@ export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: May
   async function open(customInstance?: UsePopupProps<unknown>) {
     let activeInstance;
     await nextTick();
-    console.log("popupInstance", popupInstance);
     if (popupInstance) {
       activeInstance = popupInstance;
     }
-    console.log("activeInstance", activeInstance);
 
     activeInstance.popups.push(rawPopup || customInstance);
   }

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -126,8 +126,8 @@ export interface Props {
   options?: {
     asset: Asset;
     disabled?: boolean;
-    assetEditHandler?: (defaultAsset: Asset) => void;
-    assetRemoveHandler?: (defaultAsset: Asset) => void;
+    assetEditHandler?: (defaultAsset: Asset) => Promise<void>;
+    assetRemoveHandler?: (defaultAsset: Asset) => Promise<void>;
   };
 }
 
@@ -170,9 +170,9 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     id: "save",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
     icon: "fas fa-save",
-    clickHandler() {
+    async clickHandler() {
       if (props.options?.assetEditHandler && typeof props.options?.assetEditHandler === "function") {
-        props.options?.assetEditHandler(defaultAsset.value);
+        await props.options?.assetEditHandler(defaultAsset.value);
         emit("close:blade");
       }
     },
@@ -182,9 +182,9 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     id: "delete",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
     icon: "fas fa-trash",
-    clickHandler() {
+    async clickHandler() {
       if (props.options?.assetRemoveHandler && typeof props.options?.assetRemoveHandler === "function") {
-        props.options?.assetRemoveHandler(defaultAsset.value);
+        await props.options?.assetRemoveHandler(defaultAsset.value);
         emit("close:blade");
       }
     },

package/shared/modules/assets/index.ts

@@ -1,4 +1,4 @@
-import { createModule } from "../../../core/plugins/modularity";
+import { createAppModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 import * as locales from "./locales";
 
@@ -9,6 +9,6 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export const AssetsDetailsModule = createModule(components, locales);
+export const AssetsDetailsModule = createAppModule(components, locales);
 
 export * from "./components";

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -10,12 +10,12 @@
     @collapse="$emit('collapse:blade')"
   >
     <div
+      v-loading="loading"
       class="tw-relative tw-h-full"
       @dragover.prevent.stop="dragOver"
       @dragleave.prevent="dragLeave"
       @drop.prevent.stop="onDrop"
     >
-      <VcLoading :active="loading"></VcLoading>
       <VcTable
         :columns="columns"
         :expanded="expanded"
@@ -145,11 +145,11 @@
 import { Asset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../../core/types";
 import { ref, computed, onMounted, unref, watch, markRaw } from "vue";
 import { useI18n } from "vue-i18n";
-import { IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import moment from "moment";
 import Assets from "./../../../assets/components/assets-details/assets-details.vue";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import * as _ from "lodash-es";
+import { IParentCallArgs, useBladeNavigation } from "../../../../components";
 
 export interface Props {
   expanded?: boolean;
@@ -340,7 +340,7 @@ function onItemClick(item: Asset) {
     options: {
       asset: unref(item),
       disabled: readonly.value,
-      assetEditHandler: (asset: Asset) => {
+      assetEditHandler: async (asset: Asset) => {
         const mutated = defaultAssets.value.map((x) => {
           if (x.id === asset.id || x.url === asset.url) {
             return asset;

package/shared/modules/assets-manager/index.ts

@@ -1,4 +1,4 @@
-import { createModule } from "../../../core/plugins/modularity";
+import { createAppModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 import * as locales from "./locales";
 
@@ -9,6 +9,6 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export const AssetsManagerModule = createModule(components, locales);
+export const AssetsManagerModule = createAppModule(components, locales);
 
 export * from "./components";

package/shared/modules/dynamic/components/FIELD_MAP.ts

@@ -0,0 +1,27 @@
+import SelectField from "./fields/SelectField";
+import Card from "./fields/Card";
+import InputField from "./fields/InputField";
+import Fieldset from "./fields/Fieldset";
+import InputCurrency from "./fields/InputCurrency";
+import Checkbox from "./fields/Checkbox";
+import DynamicProperty from "./fields/DynamicProperty";
+import EditorField from "./fields/EditorField";
+import GalleryField from "./fields/GalleryField";
+import Button from "./fields/Button";
+import StatusField from "./fields/StatusField";
+
+const FIELD_MAP = {
+  "vc-select": SelectField,
+  "vc-card": Card,
+  "vc-input": InputField,
+  "vc-fieldset": Fieldset,
+  "vc-input-currency": InputCurrency,
+  "vc-checkbox": Checkbox,
+  "vc-dynamic-properties": DynamicProperty,
+  "vc-editor": EditorField,
+  "vc-gallery": GalleryField,
+  "vc-button": Button,
+  "vc-status": StatusField,
+};
+
+export default FIELD_MAP;

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PropType, ref, toRefs, watch, ExtractPropTypes, h, VNode, defineComponent, UnwrapNestedRefs } from "vue";
+import { ControlSchema } from "../types";
+import * as _ from "lodash-es";
+import { DetailsBladeContext } from "../factories/types";
+import { nodeBuilder } from "../helpers/nodeBuilder";
+
+const schemeRenderProps = {
+  context: {
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
+    default: () => ({}),
+  },
+  modelValue: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+    default: () => ({}),
+  },
+  uiSchema: {
+    type: Array as PropType<ControlSchema[]>,
+    required: true,
+    default: () => [],
+  },
+  currentLocale: {
+    type: String,
+    default: undefined,
+  },
+};
+
+export default defineComponent({
+  name: "SchemaRender",
+  props: schemeRenderProps,
+  emits: ["update:modelValue"],
+  setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
+    const { currentLocale } = toRefs(props);
+    const internalFormData = ref();
+
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (!_.isEqual(internalFormData.value, newVal)) {
+          internalFormData.value = newVal;
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    watch(
+      internalFormData,
+      (newVal) => {
+        if (!_.isEqual(newVal, props.modelValue)) {
+          emitChange(newVal);
+        }
+      },
+      { deep: true }
+    );
+
+    function emitChange(newVal) {
+      ctx.emit("update:modelValue", newVal);
+    }
+
+    return () =>
+      h(
+        "div",
+        { class: "tw-flex tw-flex-col tw-gap-4" },
+        props.uiSchema.reduce(
+          (arr, field): VNode[] => [
+            ...arr,
+            nodeBuilder({
+              controlSchema: field,
+              parentId: field.id,
+              internalContext: internalFormData.value,
+              bladeContext: props.context,
+              currentLocale: currentLocale.value,
+              formData: internalFormData.value,
+            }),
+          ],
+          []
+        )
+      );
+  },
+});

package/shared/modules/dynamic/components/factories.ts

@@ -0,0 +1,159 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { markRaw } from "vue";
+import {
+  VcButton,
+  VcCard,
+  VcCheckbox,
+  VcDynamicProperty,
+  VcEditor,
+  VcGallery,
+  VcInput,
+  VcInputCurrency,
+  VcSelect,
+  VcStatus,
+} from "../../../../ui/components";
+import {
+  IControlBaseProps,
+  ISelectField,
+  IInputField,
+  ICardCollection,
+  IEditorField,
+  IGallery,
+  IDynamicProperties,
+  ICheckbox,
+  IButton,
+  IInputCurrency,
+  IFieldset,
+  IControlBaseOptions,
+  IStatusField,
+} from "../types/models";
+
+export const ControlBase = ({ visibility = undefined }: IControlBaseOptions): IControlBaseOptions => ({
+  visibility,
+});
+
+export const ControlBaseProps = ({
+  rules = undefined,
+  label = undefined,
+  placeholder = undefined,
+  disabled = false,
+  required = false,
+  name = undefined,
+  classNames = undefined,
+  tooltip = undefined,
+  key = undefined,
+  ...rest
+}: IControlBaseProps): IControlBaseProps => ({
+  key,
+  rules,
+  label,
+  placeholder,
+  disabled,
+  required,
+  name,
+  classNames,
+  tooltip,
+  ...rest,
+});
+
+export const SelectField = ({ props, slots, options }: Partial<ISelectField>): ISelectField => ({
+  component: markRaw(VcSelect) as any,
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+  slots,
+});
+
+export const StatusField = ({ props, slots, options }: Partial<IStatusField>): IStatusField => ({
+  component: markRaw(VcStatus),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+  slots,
+});
+
+export const InputField = ({ props, options }: Partial<IInputField>): IInputField => ({
+  component: markRaw(VcInput),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+});
+
+export const InputCurrency = ({ props, options }: Partial<IInputCurrency>): IInputCurrency => ({
+  component: markRaw(VcInputCurrency),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+});
+
+export const CardCollection = ({ props, options, slots }: Partial<ICardCollection>): ICardCollection => ({
+  component: markRaw(VcCard),
+  props: {
+    ...props,
+    ...ControlBaseProps(props),
+  },
+  options: ControlBase(options),
+  slots,
+});
+
+export const DynamicProperties = ({ props, options }: Partial<IDynamicProperties>): IDynamicProperties => ({
+  component: markRaw(VcDynamicProperty) as any,
+  props: {
+    ...props,
+    ...ControlBaseProps(props),
+  },
+  options: ControlBase(options),
+});
+
+export const EditorField = ({ props, options }: Partial<IEditorField>): IEditorField => ({
+  component: markRaw(VcEditor),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+});
+
+export const Gallery = ({ props, options }: Partial<IGallery>): IGallery => ({
+  component: markRaw(VcGallery),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+});
+
+export const Checkbox = ({ props, options, slots }: Partial<ICheckbox>): ICheckbox => ({
+  component: markRaw(VcCheckbox),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+  slots,
+});
+
+export const Button = ({ props, options, slots }: Partial<IButton>): IButton => ({
+  component: markRaw(VcButton),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  options: ControlBase(options),
+  slots,
+});
+
+export const Fieldset = ({ columns, fields, property, remove }: IFieldset): IFieldset => ({
+  columns,
+  fields,
+  property,
+  remove,
+});

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

@@ -0,0 +1,31 @@
+import { ExtractPropTypes, h, unref } from "vue";
+import { Button } from "../factories";
+import componentProps from "./props";
+import { ButtonSchema } from "../../types";
+
+export default {
+  name: "ButtonEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: ButtonSchema }) {
+    return () => {
+      const field = Button({
+        props: {
+          ...props.baseProps,
+          small: props.element.small,
+          icon: props.element?.icon,
+          iconSize: props.element?.iconSize,
+          text: props.element?.text,
+          onClick: () => {
+            unref(props.bladeContext.scope)[props.element.method]();
+          },
+        },
+        options: props.baseOptions,
+        slots: {
+          default: () => props.element.content,
+        },
+      });
+
+      return props.baseOptions.visibility ? h(field.component, field.props, field.slots) : null;
+    };
+  },
+};

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

@@ -0,0 +1,86 @@
+import { ExtractPropTypes, computed, h, toValue, VNodeChild, VNodeNormalizedChildren, watch, VNode } from "vue";
+import { CardCollection } from "../factories";
+import componentProps from "./props";
+import { CardSchema } from "../../types";
+import { nodeBuilder } from "../../helpers/nodeBuilder";
+import { useMounted } from "@vueuse/core";
+import * as _ from "lodash-es";
+
+export default {
+  name: "CardEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: CardSchema }) {
+    const isMounted = useMounted();
+
+    const commentRecursiveNodeCheck = (node: VNodeChild | VNodeNormalizedChildren) => {
+      return _.every(Array.isArray(node) ? node : [node], (nodeItem) => {
+        if (typeof nodeItem === "object") {
+          if (
+            "children" in nodeItem &&
+            nodeItem.children &&
+            Array.isArray(nodeItem.children) &&
+            !!nodeItem.children.length
+          ) {
+            return commentRecursiveNodeCheck(nodeItem.children);
+          }
+          if (
+            "el" in nodeItem &&
+            nodeItem.el &&
+            "nodeType" in (nodeItem.el as VNode["el"]) &&
+            (nodeItem.el as VNode["el"]).nodeType
+          ) {
+            return (nodeItem.el as VNode["el"]).nodeType !== 8;
+          } else return true;
+        } else return true;
+      });
+    };
+
+    const isNotEmpty = computed(() => {
+      if (isMounted.value) {
+        const fields = toValue(props.fields);
+        if (fields && Array.isArray(fields) && fields.length) {
+          return _.every(fields, (w) => commentRecursiveNodeCheck(w));
+        }
+      }
+      return true;
+    });
+
+    return () => {
+      const field = CardCollection({
+        props: {
+          ...props.baseProps,
+          header: props.element.label,
+          isCollapsable: props.element.collapsible,
+          isCollapsed: restoreCollapsed(props.element.id),
+          "onState:collapsed": (e) => handleCollapsed(props.element.id, e),
+        },
+        options: props.baseOptions,
+
+        slots: {
+          default: () => h("div", { class: "tw-flex tw-flex-col tw-p-4 tw-gap-4" }, toValue(props.fields)),
+          actions: () => {
+            const elem = nodeBuilder({
+              controlSchema: props.element.action,
+              parentId: `${props.element.id}`,
+              internalContext: props.fieldContext,
+              bladeContext: props.bladeContext,
+              currentLocale: props.currentLocale,
+              formData: props.formData,
+            });
+            return elem;
+          },
+        },
+      });
+
+      function handleCollapsed(key: string, value: boolean): void {
+        localStorage?.setItem(key, `${value}`);
+      }
+
+      function restoreCollapsed(key: string): boolean {
+        return localStorage?.getItem(key) === "true";
+      }
+
+      return props.baseOptions.visibility && isNotEmpty.value ? h(field.component, field.props, field.slots) : null;
+    };
+  },
+};