@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/core/plugins/modularity/index.ts

@@ -1,43 +1,45 @@
-import { App, Component, h, watch } from "vue";
+import { App, Component, h, resolveComponent, watch } from "vue";
 import { i18n } from "./../i18n";
 import { Router } from "vue-router";
 import { BladeInstanceConstructor, BladeVNode } from "./../../../shared/components/blade-navigation/types";
 import { kebabToPascal } from "./../../utilities";
-import { useMenuService, useNotifications } from "../../composables";
+import { addMenuItem, useMenuService, useNotifications } from "../../composables";
 import * as _ from "lodash-es";
 import { notification } from "../../../shared";
 
-export const createModule = (components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) => ({
-  install(app: App): void {
-    // Register components
-    Object.entries(components).forEach(([componentName, component]) => {
-      // Check if the component is already registered
-      if (app.component(componentName)) {
-        // Remove the existing component
-        // Note: Vue does not provide a method to remove a component, so we can overwrite it
-        console.warn(
-          `Component ${componentName} is already registered. It will be overwritten with the new component.`,
-        );
-      }
-      app.component(componentName, component);
-    });
-
-    // Load locales
-    if (locales) {
-      Object.entries(locales).forEach(([key, message]) => {
-        // Merge locale messages, overwriting existing ones
-        i18n.global.mergeLocaleMessage(key, message);
+export function createModule(components: { [key: string]: BladeInstanceConstructor }, locales?: unknown) {
+  return {
+    install(app: App): void {
+      // Register components
+      Object.entries(components).forEach(([componentName, component]) => {
+        // Check if the component is already registered
+        if (app.component(componentName)) {
+          // Remove the existing component
+          // Note: Vue does not provide a method to remove a component, so we can overwrite it
+          console.warn(
+            `Component ${componentName} is already registered. It will be overwritten with the new component.`,
+          );
+        }
+        app.component(componentName, component);
       });
-    }
-  },
-});
 
-export const createAppModule = (
+      // Load locales
+      if (locales) {
+        Object.entries(locales).forEach(([key, message]) => {
+          // Merge locale messages, overwriting existing ones
+          i18n.global.mergeLocaleMessage(key, message);
+        });
+      }
+    },
+  };
+}
+
+export function createAppModule(
   pages: { [key: string]: BladeInstanceConstructor },
   locales?: { [key: string]: object },
   notificationTemplates?: { [key: string]: Component & { notifyType?: string } },
   moduleComponents?: { [key: string]: Component },
-) => {
+) {
   return {
     install(app: App, options?: { router: Router }): void {
       let routerInstance: Router;
@@ -198,12 +200,12 @@ export const createAppModule = (
 
           // Add to menu
           if (page.menuItem) {
-            const { addMenuItem } = useMenuService();
             addMenuItem({
               ...page.menuItem,
+              icon: resolveComponent(page.menuItem.icon as string),
               url: page.url,
               routeId: routeName,
-              permissions: page.permissions,
+              permissions: page.permissions || page.menuItem.permissions,
             });
           }
         }
@@ -245,7 +247,7 @@ export const createAppModule = (
       }
     },
   };
-};
+}
 
 export * from "./loader";
 export * from "./extensions-helper";

package/core/plugins/modularity/loader.ts

@@ -1,6 +1,7 @@
 import { App, Plugin } from "vue";
 import { Router } from "vue-router";
 import { ExtensionRegistry, createExtensionsHelper, registerModuleExtensions } from "./extensions-helper";
+import { DynamicModulesKey } from "../../../injection-keys";
 
 interface ModuleManifest {
   file: string;
@@ -161,7 +162,7 @@ export function useDynamicModules(
       ...(app.config.globalProperties.$dynamicModules || {}),
       ...window.VcShellDynamicModules,
     };
-    app.provide("$dynamicModules", app.config.globalProperties.$dynamicModules);
+    app.provide(DynamicModulesKey, app.config.globalProperties.$dynamicModules);
   }
 
   return {

package/core/plugins/moment/humanize.ts

@@ -1,74 +1,74 @@
-import * as _ from "lodash-es";
-import { default as moment, Duration, RelativeTimeKey } from "moment";
-
-type momentUnit = Extract<moment.RelativeTimeKey, "s" | "m" | "h" | "d" | "w" | "M" | "y">;
-
-const momentUnits: momentUnit[] = ["s", "m", "h", "d", "w", "M", "y"];
-
-const intlUnits = ["second", "minute", "hour", "day", "week", "month", "year"];
-
-const intlNumberFormats = intlUnits.map((intlUnit) =>
-  Intl?.NumberFormat(moment.locale(), {
-    style: "unit",
-    unit: intlUnit,
-    unitDisplay: "long",
-  }),
-);
-
-const getIntlNumberFormat = (unit: momentUnit) => {
-  return intlNumberFormats[momentUnits.indexOf(unit)];
-};
-
-// Workaround because of lacking precise (1 hour 42 minutes 35 seconds)
-// duration formatting in moment and Intl
-export function humanize(this: Duration & number, withSuffix?: boolean): string {
-  const localeData = moment.localeData();
-
-  const units = _.clone(momentUnits);
-  const lastUnit = units.pop();
-
-  // format string as "value unit" (e.g. "35", "ss" => "35 seconds", "1", "dd" => "1 day")
-  const humanize = (unit: momentUnit, value: number) => {
-    // Use Intl if available to get proper formatting and pluralization:
-    // Intl:   1 day, 2 days
-    // moment: a day, 2 days
-    return Intl
-      ? getIntlNumberFormat(unit).format(value)
-      : localeData.relativeTime(
-          value,
-          true,
-          value === 1 ? unit : ((unit + unit) as RelativeTimeKey), // pluralize
-          this > 0,
-        );
-  };
-
-  // convert duration to the map
-  // "1:42:35" => [{ key: "ss", value: 35 }, { key: "mm", value: 42 }, { key: "hh", value: 1 }]
-  let map = units.map((unit) => ({
-    unit,
-    value: this.get(unit),
-  }));
-  // add value of last unit as double-precision float, if it's greater than 0
-  map.push({
-    unit: lastUnit as momentUnit,
-    value: this.get(lastUnit as momentUnit) > 0 ? this.as(lastUnit as momentUnit) : 0,
-  });
-
-  // drop zero values from the beginning and the end of the array
-  // [{ y: 0 }, { m: 0 }, { d: 0 }, { h: 1 }, { m: 42 }, { s: 0 }] => [{ h: 1 }, { m: 42 }]
-  const isZeroValue = (item: { value: number }) => item.value === 0;
-  map = _.chain(map).dropWhile(isZeroValue).dropRightWhile(isZeroValue).value();
-
-  // convert map to array of formatted strings
-  // [{ key: "mm", value: 42 }, { key: "hh", value: 1 }] => ["42 minutes", "1 hour"]
-  const values = map.map((entry) => humanize(entry.unit, entry.value));
-
-  // ["42 minutes", "1 hour"] => "1 hour 42 minutes"
-  let result = values.reverse().join(" ");
-
-  if (withSuffix) {
-    result = localeData.pastFuture(this, result);
-  }
-
-  return result;
-}
+import * as _ from "lodash-es";
+import { default as moment, Duration, RelativeTimeKey } from "moment";
+
+type momentUnit = Extract<moment.RelativeTimeKey, "s" | "m" | "h" | "d" | "w" | "M" | "y">;
+
+const momentUnits: momentUnit[] = ["s", "m", "h", "d", "w", "M", "y"];
+
+const intlUnits = ["second", "minute", "hour", "day", "week", "month", "year"];
+
+const intlNumberFormats = intlUnits.map((intlUnit) =>
+  Intl?.NumberFormat(moment.locale(), {
+    style: "unit",
+    unit: intlUnit,
+    unitDisplay: "long",
+  }),
+);
+
+const getIntlNumberFormat = (unit: momentUnit) => {
+  return intlNumberFormats[momentUnits.indexOf(unit)];
+};
+
+// Workaround because of lacking precise (1 hour 42 minutes 35 seconds)
+// duration formatting in moment and Intl
+export function humanize(this: Duration & number, withSuffix?: boolean): string {
+  const localeData = moment.localeData();
+
+  const units = _.clone(momentUnits);
+  const lastUnit = units.pop();
+
+  // format string as "value unit" (e.g. "35", "ss" => "35 seconds", "1", "dd" => "1 day")
+  const humanize = (unit: momentUnit, value: number) => {
+    // Use Intl if available to get proper formatting and pluralization:
+    // Intl:   1 day, 2 days
+    // moment: a day, 2 days
+    return Intl
+      ? getIntlNumberFormat(unit).format(value)
+      : localeData.relativeTime(
+          value,
+          true,
+          value === 1 ? unit : ((unit + unit) as RelativeTimeKey), // pluralize
+          this > 0,
+        );
+  };
+
+  // convert duration to the map
+  // "1:42:35" => [{ key: "ss", value: 35 }, { key: "mm", value: 42 }, { key: "hh", value: 1 }]
+  let map = units.map((unit) => ({
+    unit,
+    value: this.get(unit),
+  }));
+  // add value of last unit as double-precision float, if it's greater than 0
+  map.push({
+    unit: lastUnit as momentUnit,
+    value: this.get(lastUnit as momentUnit) > 0 ? this.as(lastUnit as momentUnit) : 0,
+  });
+
+  // drop zero values from the beginning and the end of the array
+  // [{ y: 0 }, { m: 0 }, { d: 0 }, { h: 1 }, { m: 42 }, { s: 0 }] => [{ h: 1 }, { m: 42 }]
+  const isZeroValue = (item: { value: number }) => item.value === 0;
+  map = _.chain(map).dropWhile(isZeroValue).dropRightWhile(isZeroValue).value();
+
+  // convert map to array of formatted strings
+  // [{ key: "mm", value: 42 }, { key: "hh", value: 1 }] => ["42 minutes", "1 hour"]
+  const values = map.map((entry) => humanize(entry.unit, entry.value));
+
+  // ["42 minutes", "1 hour"] => "1 hour 42 minutes"
+  let result = values.reverse().join(" ");
+
+  if (withSuffix) {
+    result = localeData.pastFuture(this, result);
+  }
+
+  return result;
+}

package/core/plugins/moment/index.ts

@@ -1 +1 @@
-export { default as moment } from "./moment";
+export { default as moment } from "./moment";

package/core/plugins/permissions/index.ts

@@ -1,10 +1,10 @@
-import { usePermissions } from "./../../composables";
-import { App } from "vue";
-
-export const permissions = {
-  install(app: App) {
-    const { hasAccess } = usePermissions();
-    app.config.globalProperties.$hasAccess = hasAccess;
-    app.provide("$hasAccess", hasAccess);
-  },
-};
+import { usePermissions } from "./../../composables";
+import { App } from "vue";
+
+export const permissions = {
+  install(app: App) {
+    const { hasAccess } = usePermissions();
+    app.config.globalProperties.$hasAccess = hasAccess;
+    app.provide("$hasAccess", hasAccess);
+  },
+};

package/core/plugins/validation/index.ts

@@ -1 +1 @@
-export * from "./rules";
+export * from "./rules";

package/core/plugins/validation/rules.ts

@@ -1,145 +1,145 @@
-import { i18n } from "..";
-import { defineRule } from "vee-validate";
-import { all } from "@vee-validate/rules";
-
-Object.keys(all).forEach((rule: string) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  defineRule(rule, (all as Record<string, any>)[rule]);
-});
-
-/**
- * Check if an image dimension larger than a given size.
- */
-export const mindimensions = (images: HTMLInputElement, [width, height]: [string | number, string | number]) => {
-  // The field is empty so it should pass
-  if (!images?.files || !images.files?.length) {
-    return true;
-  }
-
-  const validateImage = (file: File, width: string | number, height: string | number) => {
-    const URL = window.URL || window.webkitURL;
-    return new Promise((resolve) => {
-      const image = new Image();
-      image.onerror = () => resolve(false);
-      image.onload = () => {
-        const isValid = image.width >= Number(width) && image.height >= Number(height);
-        if (isValid) {
-          resolve(true);
-        } else {
-          resolve(i18n.global.t("messages.min_dimensions.error", { width, height }));
-        }
-      };
-
-      image.src = URL.createObjectURL(file);
-    });
-  };
-  const list = [];
-  const fileList = images.files;
-  for (let i = 0; i < fileList.length; i++) {
-    if (!/\.(jpg|svg|jpeg|png|bmp|gif)$/i.test(fileList[i].name)) {
-      return Promise.resolve(i18n.global.t("messages.min_dimensions.not_image_error"));
-    }
-
-    list.push(fileList[i]);
-  }
-  return Promise.all(list.map((file) => validateImage(file, width, height))).then((res) => {
-    const isInvalid = res.find((x) => x !== true);
-    if (isInvalid === false || typeof isInvalid === "string") {
-      return isInvalid;
-    } else {
-      return true;
-    }
-  });
-};
-
-defineRule("mindimensions", mindimensions);
-
-/**
- * Check if image not exceeding a given size in kilobytes
- */
-export const fileWeight = (file: HTMLInputElement, [size]: [number]) => {
-  if (!file?.files || !file.files?.length) {
-    return true;
-  }
-
-  const maxSize = size * 1000;
-
-  const fileSizeChecker = (file: File) => {
-    return file.size > maxSize;
-  };
-
-  const list = [];
-  for (let i = 0; i < file.files.length; i++) {
-    list.push(file.files[i]);
-  }
-
-  const checker = list.map((x) => fileSizeChecker(x));
-
-  const isInvalid = checker.find((x) => x === true);
-  if (isInvalid) {
-    return i18n.global.t("messages.file_weight", { size });
-  } else {
-    return true;
-  }
-};
-
-defineRule("fileWeight", fileWeight);
-
-const compare = (
-  value: string | Date,
-  [target]: string[] | Date[],
-  comparer: (first: number, second: number) => boolean,
-  errorMessage: string,
-): boolean | string => {
-  // The field is empty so it should pass
-  if (!value || (typeof value == "string" && !value.length)) {
-    return true;
-  }
-
-  let first_date;
-  let second_date;
-  if (value instanceof Date) {
-    first_date = value;
-  }
-
-  if (target instanceof Date) {
-    second_date = target;
-  }
-
-  if (typeof value === "string") {
-    first_date = new Date(value);
-  }
-
-  if (typeof target === "string") {
-    second_date = new Date(target);
-  }
-
-  if (first_date?.getTime && first_date?.getTime() > 0 && second_date?.getTime && second_date?.getTime() > 0) {
-    if (comparer(second_date.getTime(), first_date.getTime())) {
-      return errorMessage;
-    }
-  }
-
-  return true;
-};
-
-// before
-export const before = (value: string, [target]: string[]) =>
-  compare(value, [target], (first, second) => first < second, i18n.global.t("messages.before"));
-defineRule("before", before);
-
-// after
-export const after = (value: string, [target]: string[]) =>
-  compare(value, [target], (first, second) => first > second, i18n.global.t("messages.after"));
-
-defineRule("after", after);
-
-export const bigInt = (value: string) => {
-  if (Number.isSafeInteger(parseInt(value))) {
-    return true;
-  } else {
-    return i18n.global.t("messages.bigint");
-  }
-};
-
-defineRule("bigint", bigInt);
+import { i18n } from "..";
+import { defineRule } from "vee-validate";
+import { all } from "@vee-validate/rules";
+
+Object.keys(all).forEach((rule: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defineRule(rule, (all as Record<string, any>)[rule]);
+});
+
+/**
+ * Check if an image dimension larger than a given size.
+ */
+export const mindimensions = (images: HTMLInputElement, [width, height]: [string | number, string | number]) => {
+  // The field is empty so it should pass
+  if (!images?.files || !images.files?.length) {
+    return true;
+  }
+
+  const validateImage = (file: File, width: string | number, height: string | number) => {
+    const URL = window.URL || window.webkitURL;
+    return new Promise((resolve) => {
+      const image = new Image();
+      image.onerror = () => resolve(false);
+      image.onload = () => {
+        const isValid = image.width >= Number(width) && image.height >= Number(height);
+        if (isValid) {
+          resolve(true);
+        } else {
+          resolve(i18n.global.t("messages.min_dimensions.error", { width, height }));
+        }
+      };
+
+      image.src = URL.createObjectURL(file);
+    });
+  };
+  const list = [];
+  const fileList = images.files;
+  for (let i = 0; i < fileList.length; i++) {
+    if (!/\.(jpg|svg|jpeg|png|bmp|gif)$/i.test(fileList[i].name)) {
+      return Promise.resolve(i18n.global.t("messages.min_dimensions.not_image_error"));
+    }
+
+    list.push(fileList[i]);
+  }
+  return Promise.all(list.map((file) => validateImage(file, width, height))).then((res) => {
+    const isInvalid = res.find((x) => x !== true);
+    if (isInvalid === false || typeof isInvalid === "string") {
+      return isInvalid;
+    } else {
+      return true;
+    }
+  });
+};
+
+defineRule("mindimensions", mindimensions);
+
+/**
+ * Check if image not exceeding a given size in kilobytes
+ */
+export const fileWeight = (file: HTMLInputElement, [size]: [number]) => {
+  if (!file?.files || !file.files?.length) {
+    return true;
+  }
+
+  const maxSize = size * 1000;
+
+  const fileSizeChecker = (file: File) => {
+    return file.size > maxSize;
+  };
+
+  const list = [];
+  for (let i = 0; i < file.files.length; i++) {
+    list.push(file.files[i]);
+  }
+
+  const checker = list.map((x) => fileSizeChecker(x));
+
+  const isInvalid = checker.find((x) => x === true);
+  if (isInvalid) {
+    return i18n.global.t("messages.file_weight", { size });
+  } else {
+    return true;
+  }
+};
+
+defineRule("fileWeight", fileWeight);
+
+const compare = (
+  value: string | Date,
+  [target]: string[] | Date[],
+  comparer: (first: number, second: number) => boolean,
+  errorMessage: string,
+): boolean | string => {
+  // The field is empty so it should pass
+  if (!value || (typeof value == "string" && !value.length)) {
+    return true;
+  }
+
+  let first_date;
+  let second_date;
+  if (value instanceof Date) {
+    first_date = value;
+  }
+
+  if (target instanceof Date) {
+    second_date = target;
+  }
+
+  if (typeof value === "string") {
+    first_date = new Date(value);
+  }
+
+  if (typeof target === "string") {
+    second_date = new Date(target);
+  }
+
+  if (first_date?.getTime && first_date?.getTime() > 0 && second_date?.getTime && second_date?.getTime() > 0) {
+    if (comparer(second_date.getTime(), first_date.getTime())) {
+      return errorMessage;
+    }
+  }
+
+  return true;
+};
+
+// before
+export const before = (value: string, [target]: string[]) =>
+  compare(value, [target], (first, second) => first < second, i18n.global.t("messages.before"));
+defineRule("before", before);
+
+// after
+export const after = (value: string, [target]: string[]) =>
+  compare(value, [target], (first, second) => first > second, i18n.global.t("messages.after"));
+
+defineRule("after", after);
+
+export const bigInt = (value: string) => {
+  if (Number.isSafeInteger(parseInt(value))) {
+    return true;
+  } else {
+    return i18n.global.t("messages.bigint");
+  }
+};
+
+defineRule("bigint", bigInt);

package/core/services/app-bar-menu-service.ts

@@ -0,0 +1,87 @@
+import { ref, computed, Component, ComputedRef } from "vue";
+
+export interface AppBarWidget {
+  id: string;
+  order?: number;
+  icon?: Component | string;
+  component?: Component;
+  props?: Record<string, unknown>;
+  onClick?: () => void;
+  slot?: string;
+  badge?: boolean | (() => boolean);
+}
+
+export interface registerAppBarWidgetOptions extends Omit<AppBarWidget, "id"> {
+  id?: string;
+}
+
+export interface IAppBarWidgetService {
+  register: (options: registerAppBarWidgetOptions) => string;
+  unregister: (id: string) => void;
+  items: ComputedRef<AppBarWidget[]>;
+}
+
+// Global state for pre-registering AppBar menu items
+const preregisteredAppBarMenuItems: AppBarWidget[] = [];
+const appBarMenuItems = ref<Map<string, AppBarWidget>>(new Map());
+
+/**
+ * Registers an AppBar menu item before the service is initialized
+ */
+export function addAppBarWidget(item: registerAppBarWidgetOptions): void {
+  const id = item.id || crypto.randomUUID();
+  preregisteredAppBarMenuItems.push({
+    id,
+    order: item.order ?? preregisteredAppBarMenuItems.length,
+    icon: item.icon,
+    component: item.component,
+    props: item.props,
+    onClick: item.onClick,
+    slot: item.slot,
+    badge: item.badge,
+  });
+}
+
+/**
+ * Creates an AppBar menu service
+ * Manages the registration and organization of AppBar menu items
+ */
+export function createAppBarWidgetService(): IAppBarWidgetService {
+  const register = (options: registerAppBarWidgetOptions): string => {
+    const id = options.id || crypto.randomUUID();
+    appBarMenuItems.value.set(id, {
+      id,
+      order: options.order ?? appBarMenuItems.value.size,
+      icon: options.icon,
+      component: options.component,
+      props: options.props,
+      onClick: options.onClick,
+      slot: options.slot,
+      badge: options.badge,
+    });
+    return id;
+  };
+
+  const unregister = (id: string): void => {
+    appBarMenuItems.value.delete(id);
+  };
+
+  const items = computed<AppBarWidget[]>(() => {
+    return Array.from(appBarMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  });
+
+  // Register pre-added widgets
+  preregisteredAppBarMenuItems.forEach((item) => {
+    try {
+      register(item);
+    } catch (e) {
+      console.warn(`Failed to register pre-added AppBar widget ${item.id}:`, e);
+    }
+  });
+
+  return {
+    register,
+    unregister,
+    items,
+  };
+}