@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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/toolbarbus-service.ts

@@ -0,0 +1,34 @@
+import { shallowRef, Component, ref, markRaw, ShallowRef, Ref } from "vue";
+
+export interface ToolbarBus {
+  content: ShallowRef<Component | null>;
+  metadata: Ref<Record<string, unknown>>;
+  setContent: (content: Component | null, meta?: Record<string, unknown>) => void;
+  clearContent: () => void;
+  hasContent: () => boolean;
+}
+
+export function createToolbarBus(): ToolbarBus {
+  const content = shallowRef<Component | null>(null);
+  const metadata = ref<Record<string, unknown>>({});
+
+  const setContent = (newContent: Component | null, meta: Record<string, unknown> = {}) => {
+    content.value = newContent ? markRaw(newContent) : null;
+    metadata.value = meta;
+  };
+
+  const clearContent = () => {
+    content.value = null;
+    metadata.value = {};
+  };
+
+  const hasContent = () => content.value !== null;
+
+  return {
+    content,
+    metadata,
+    setContent,
+    clearContent,
+    hasContent,
+  };
+}

package/core/services/widget-service.ts

@@ -0,0 +1,130 @@
+import { ConcreteComponent, reactive, ref, ComponentInternalInstance, watch } from "vue";
+
+export type WidgetEventHandler = (...args: unknown[]) => void;
+
+export interface IWidgetEvents {
+  [key: string]: Set<WidgetEventHandler>;
+}
+
+export interface IWidget {
+  id: string;
+  title?: string;
+  component: ConcreteComponent;
+  props?: Record<string, unknown>;
+  events?: Record<string, unknown>;
+  onOpen?: (blade: { id: string }) => void;
+  onClose?: (blade: { id: string }) => void;
+}
+
+export interface IWidgetRegistration {
+  bladeId: string;
+  widget: IWidget;
+}
+
+export interface IWidgetService {
+  registerWidget: (widget: IWidget, bladeId: string) => void;
+  unregisterWidget: (widgetId: string, bladeId: string) => void;
+  getWidgets: (bladeId: string) => IWidget[];
+  clearBladeWidgets: (bladeId: string) => void;
+  registeredWidgets: IWidgetRegistration[];
+  isActiveWidget: (id: string) => boolean;
+  setActiveWidget: (ref: ComponentInternalInstance["exposed"]) => void;
+  updateActiveWidget: () => void;
+  isWidgetRegistered: (id: string) => boolean;
+}
+
+export function createWidgetService(): IWidgetService {
+  const widgetRegistry = reactive<Record<string, IWidget[]>>({});
+  const registeredWidgets = reactive<IWidgetRegistration[]>([]);
+  const activeWidgetRef = ref();
+  const registeredIds = reactive(new Set<string>());
+
+  const registerWidget = (widget: IWidget, bladeId: string): void => {
+    if (!widgetRegistry[bladeId]) {
+      widgetRegistry[bladeId] = [];
+    }
+
+    const existingIndex = widgetRegistry[bladeId].findIndex((w) => w.id === widget.id);
+    if (existingIndex === -1) {
+      widgetRegistry[bladeId].push(widget);
+      registeredWidgets.push({ bladeId, widget });
+      registeredIds.add(widget.id);
+    }
+  };
+
+  const unregisterWidget = (widgetId: string, bladeId: string): void => {
+    if (widgetRegistry[bladeId]) {
+      const index = widgetRegistry[bladeId].findIndex((w) => w.id === widgetId);
+      if (index !== -1) {
+        widgetRegistry[bladeId].splice(index, 1);
+        registeredIds.delete(widgetId);
+      }
+    }
+
+    const regIndex = registeredWidgets.findIndex((w) => w.bladeId === bladeId && w.widget.id === widgetId);
+    if (regIndex !== -1) {
+      registeredWidgets.splice(regIndex, 1);
+    }
+  };
+
+  const getWidgets = (bladeId: string): IWidget[] => {
+    return widgetRegistry[bladeId] || [];
+  };
+
+  const clearBladeWidgets = (bladeId: string): void => {
+    if (widgetRegistry[bladeId]) {
+      widgetRegistry[bladeId].forEach((widget) => {
+        registeredIds.delete(widget.id);
+      });
+      delete widgetRegistry[bladeId];
+    }
+
+    const indices = registeredWidgets
+      .map((w, i) => (w.bladeId === bladeId ? i : -1))
+      .filter((i) => i !== -1)
+      .reverse();
+
+    indices.forEach((index) => {
+      registeredWidgets.splice(index, 1);
+    });
+  };
+
+  const setActiveWidget = (ref: ComponentInternalInstance["exposed"]): void => {
+    activeWidgetRef.value = undefined;
+
+    activeWidgetRef.value = ref;
+
+    console.log("setActiveWidget", activeWidgetRef.value);
+  };
+
+  const updateActiveWidget = (): void => {
+    console.log("updateActiveWidget", activeWidgetRef.value);
+    if (!activeWidgetRef.value) {
+      return;
+    }
+
+    if (activeWidgetRef.value?.updateActiveWidgetCount) {
+      activeWidgetRef.value.updateActiveWidgetCount();
+    }
+  };
+
+  const isWidgetRegistered = (id: string): boolean => {
+    return registeredIds.has(id);
+  };
+
+  const isActiveWidget = (id: string): boolean => {
+    return activeWidgetRef.value?.id === id;
+  };
+
+  return {
+    registerWidget,
+    unregisterWidget,
+    getWidgets,
+    clearBladeWidgets,
+    registeredWidgets,
+    isActiveWidget,
+    setActiveWidget,
+    updateActiveWidget,
+    isWidgetRegistered,
+  };
+}