@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/shared/composables/useModificationTracker/index.ts

@@ -1,116 +0,0 @@
-import { ref, watch, Ref, computed, DeepReadonly, unref, isRef } from "vue";
-import { cloneDeep, isEqualWith } from "lodash-es";
-
-/**
- * Custom comparator for deep equality that treats null, undefined, and ""
- * as semantically equivalent "empty" values.
- * This prevents false modification detection when APIs return null
- * but local state uses undefined or empty strings (common with language switching).
- */
-function isEmpty(value: unknown): boolean {
-  return value === null || value === undefined || value === "";
-}
-
-function semanticEqual(a: unknown, b: unknown): boolean {
-  return isEqualWith(a, b, (valA: unknown, valB: unknown) => {
-    if (isEmpty(valA) && isEmpty(valB)) return true;
-    return undefined; // fall back to default deep comparison
-  });
-}
-
-/**
- * Return values from useModificationTracker.
- * @template T Type of the tracked value.
- */
-export interface UseModificationTrackerReturn<T> {
-  /**
-   * Reactive reference to the current tracked value.
-   * It can be changed directly or through v-model.
-   */
-  currentValue: Ref<T>;
-  /**
-   * Reactive reference to the pristine value.
-   * It is a "clean" version representing the original, unmodified state.
-   */
-  pristineValue: Ref<T>;
-  /**
-   * Shows if currentValue has been modified compared to its "pristine" state.
-   * Read-only.
-   */
-  isModified: DeepReadonly<Ref<boolean>>;
-  /**
-   * Resets the modification state.
-   * The new "pristine" state will be set based on the current value of currentValue,
-   * or based on `newBaselineValue` if provided.
-   * `isModified` will become false.
-   * @param newBaselineValue Optional new value (or Ref) that will become "pristine".
-   */
-  resetModificationState: (newBaselineValue?: T | Ref<T>) => void;
-}
-
-/**
- * Composable for tracking value changes (including deeply nested objects).
- *
- * @template T Type of the tracked value.
- * @param initialValueProp Initial value or Ref to it.
- * @returns {UseModificationTrackerReturn<T>} Object with `currentValue`, `isModified` and `resetModificationState`.
- */
-export function useModificationTracker<T>(initialValueProp: T | Ref<T>): UseModificationTrackerReturn<T> {
-  const getClonedUnreffedValue = (val: T | Ref<T>): T => cloneDeep(unref(val));
-
-  const pristineValue = ref(getClonedUnreffedValue(initialValueProp)) as Ref<T>;
-  const currentValue = ref(getClonedUnreffedValue(initialValueProp)) as Ref<T>;
-  const isModified = ref(false);
-
-  if (isRef(initialValueProp)) {
-    watch(
-      initialValueProp,
-      (newExternalInitialValue) => {
-        // When the external initialValueProp (Ref) changes,
-        // we need to decide if we should update currentValue.
-        const wasModified = !semanticEqual(currentValue.value, pristineValue.value);
-
-        // Always update the "pristine" value (pristineValue), to reflect the new external source.
-        pristineValue.value = cloneDeep(newExternalInitialValue);
-
-        // If the user has not made any changes until this point,
-        // we also update currentValue.
-        // This prevents false triggering of isModified when loading data asynchronously.
-        if (!wasModified) {
-          currentValue.value = cloneDeep(newExternalInitialValue);
-        }
-        // If the user has already made changes (wasModified = true), we do not update currentValue,
-        // to not overwrite their changes. isModified will remain true, because
-        // currentValue will now be different from the new pristineValue.
-      },
-      { deep: true }, // Deep tracking, if initialValueProp is a Ref to an object/array
-    );
-  }
-
-  watch(
-    [currentValue, pristineValue], // Track changes in currentValue or pristineValue
-    ([newCurrentVal, newPristineVal]) => {
-      isModified.value = !semanticEqual(newCurrentVal, newPristineVal);
-    },
-    { deep: true },
-  );
-
-  const resetModificationState = (newBaselineValueInput?: T | Ref<T>) => {
-    if (newBaselineValueInput !== undefined) {
-      const newClonedBase = getClonedUnreffedValue(newBaselineValueInput);
-      pristineValue.value = newClonedBase;
-      currentValue.value = cloneDeep(newClonedBase); // Reset currentValue to the new baseline
-    } else {
-      pristineValue.value = cloneDeep(currentValue.value);
-    }
-    // isModified will be updated by the watcher above, but for immediate synchronization you can do this:
-    // isModified.value = false; // This will happen automatically due to the watch on [currentValue, pristineValue]
-  };
-
-  return {
-    currentValue,
-    pristineValue,
-    isModified: computed(() => isModified.value),
-    resetModificationState,
-  };
-}

package/shared/composables/useTableSelection.ts

@@ -1,151 +0,0 @@
-import { ref, computed, Ref, ComputedRef } from "vue";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("use-table-selection");
-
-export interface UseTableSelectionOptions<T> {
-  /**
-   * The field to use for extracting IDs from items.
-   * Can be a key of T or a function that extracts the ID.
-   * @default 'id'
-   */
-  idField?: keyof T | ((item: T) => string | undefined);
-}
-
-export interface UseTableSelectionReturn<T> {
-  /**
-   * Array of currently selected item objects.
-   */
-  selectedItems: Ref<T[]>;
-
-  /**
-   * Computed array of IDs extracted from selected items.
-   */
-  selectedIds: ComputedRef<string[]>;
-
-  /**
-   * Whether "select all" across pagination is active.
-   */
-  allSelected: Ref<boolean>;
-
-  /**
-   * Number of currently selected items.
-   */
-  selectionCount: ComputedRef<number>;
-
-  /**
-   * Whether any items are currently selected.
-   */
-  hasSelection: ComputedRef<boolean>;
-
-  /**
-   * Handler for VcTable's @selection-changed event.
-   */
-  handleSelectionChange: (items: T[]) => void;
-
-  /**
-   * Handler for VcTable's @select:all event.
-   */
-  handleSelectAll: (selected: boolean) => void;
-
-  /**
-   * Clears all selection state.
-   */
-  resetSelection: () => void;
-
-  /**
-   * Checks if a specific item is selected.
-   */
-  isSelected: (item: T) => boolean;
-
-  /**
-   * Programmatically select items.
-   */
-  selectItems: (items: T[]) => void;
-
-  /**
-   * Deselect items by their IDs.
-   */
-  deselectByIds: (ids: string[]) => void;
-}
-
-export function useTableSelection<T extends object>(
-  options?: UseTableSelectionOptions<T>
-): UseTableSelectionReturn<T> {
-  const idField = options?.idField ?? ("id" as keyof T);
-
-  const getItemId = (item: T): string | undefined => {
-    if (typeof idField === "function") {
-      return idField(item);
-    }
-    const value = item[idField as keyof T];
-    return typeof value === "string" ? value : undefined;
-  };
-
-  const selectedItems = ref<T[]>([]) as Ref<T[]>;
-  const allSelected = ref(false);
-
-  const selectedIds = computed<string[]>(() => {
-    return selectedItems.value.flatMap((item) => {
-      const id = getItemId(item);
-      return id ? [id] : [];
-    });
-  });
-
-  const selectionCount = computed(() => selectedItems.value.length);
-  const hasSelection = computed(() => selectedItems.value.length > 0);
-  const selectedIdSet = computed(() => new Set(selectedIds.value));
-
-  const handleSelectionChange = (items: T[]): void => {
-    selectedItems.value = items;
-    if (items.length === 0) {
-      allSelected.value = false;
-    }
-    logger.debug("Selection changed", { count: items.length });
-  };
-
-  const handleSelectAll = (selected: boolean): void => {
-    allSelected.value = selected;
-    if (!selected) {
-      selectedItems.value = [];
-    }
-    logger.debug("Select all changed", { selected });
-  };
-
-  const resetSelection = (): void => {
-    selectedItems.value = [];
-    allSelected.value = false;
-    logger.debug("Selection reset");
-  };
-
-  const isSelected = (item: T): boolean => {
-    const id = getItemId(item);
-    return id ? selectedIdSet.value.has(id) : false;
-  };
-
-  const selectItems = (items: T[]): void => {
-    selectedItems.value = items;
-  };
-
-  const deselectByIds = (ids: string[]): void => {
-    const idsToRemove = new Set(ids);
-    selectedItems.value = selectedItems.value.filter((item) => {
-      const id = getItemId(item);
-      return id ? !idsToRemove.has(id) : true;
-    });
-  };
-
-  return {
-    selectedItems,
-    selectedIds,
-    allSelected,
-    selectionCount,
-    hasSelection,
-    handleSelectionChange,
-    handleSelectAll,
-    resetSelection,
-    isSelected,
-    selectItems,
-    deselectByIds,
-  };
-}

package/shared/composables/useTableSort.ts

@@ -1,107 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// framework/composables/useTableSort.ts
-import { ref, computed, Ref, WritableComputedRef } from "vue";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("use-table-sort");
-
-export type ITableSortDirection = "ASC" | "DESC";
-
-export interface TableSortState {
-  property: string | null;
-  direction: ITableSortDirection | null;
-}
-
-export interface UseTableSortOptions {
-  initialProperty?: string;
-  initialDirection?: ITableSortDirection;
-}
-
-export type SortParam = string;
-
-export interface UseTableSortReturn {
-  // State exposed as writable computed or refs for direct v-model or manipulation if needed
-  // Though direct manipulation is less common, usually via handleSortChange
-  currentSort: WritableComputedRef<TableSortState>;
-  sortExpression: Ref<string | undefined>; // e.g., "name:ASC"
-  handleSortChange: (sortParam: SortParam) => void;
-  resetSort: () => void;
-}
-
-export function useTableSort(options?: UseTableSortOptions): UseTableSortReturn {
-  const currentSortProperty = ref<string | null>(options?.initialProperty || null);
-  const currentSortDirection = ref<ITableSortDirection | null>(options?.initialDirection || null);
-
-  const currentSort: WritableComputedRef<TableSortState> = computed({
-    get: () => ({
-      property: currentSortProperty.value,
-      direction: currentSortDirection.value,
-    }),
-    set: (newState: TableSortState) => {
-      currentSortProperty.value = newState.property;
-      currentSortDirection.value = newState.direction;
-    },
-  });
-
-  const sortExpression = computed<string | undefined>(() => {
-    if (currentSortProperty.value && currentSortDirection.value) {
-      return `${currentSortProperty.value}:${currentSortDirection.value}`;
-    }
-    return undefined;
-  });
-
-  const handleSortChange = (sortParam: SortParam) => {
-    let newSortProperty: string | undefined = undefined;
-    let newSortDirection: ITableSortDirection | undefined = undefined;
-
-    const parts = sortParam.split(":");
-    if (parts.length === 2) {
-      newSortProperty = parts[0];
-      const dir = parts[1].toUpperCase();
-      if (dir === "ASC" || dir === "DESC") {
-        newSortDirection = dir as ITableSortDirection;
-      }
-    } else {
-      newSortProperty = sortParam; // Assume it's just the property name
-    }
-
-    if (newSortProperty) {
-      if (currentSortProperty.value === newSortProperty) {
-        // Clicked on the same column, toggle direction (3-state: ASC → DESC → none)
-        if (newSortDirection) {
-          // If table provided a new direction (e.g. explicit sort)
-          currentSortDirection.value = newSortDirection;
-        } else {
-          // Toggle existing: ASC → DESC → clear
-          if (currentSortDirection.value === "ASC") {
-            currentSortDirection.value = "DESC";
-          } else if (currentSortDirection.value === "DESC") {
-            // Third click - clear sort
-            currentSortProperty.value = null;
-            currentSortDirection.value = null;
-          } else {
-            currentSortDirection.value = "ASC";
-          }
-        }
-      } else {
-        // Clicked on a new column
-        currentSortProperty.value = newSortProperty;
-        currentSortDirection.value = newSortDirection || "ASC"; // Default to ASC if no direction provided
-      }
-    } else {
-      logger.warn("Could not determine valid sort property from sortParam:", sortParam);
-    }
-  };
-
-  const resetSort = () => {
-    currentSortProperty.value = options?.initialProperty || null;
-    currentSortDirection.value = options?.initialDirection || null;
-  };
-
-  return {
-    currentSort,
-    sortExpression,
-    handleSortChange,
-    resetSort,
-  };
-}

package/shared/index.ts

@@ -1,24 +0,0 @@
-import { Router } from "vue-router";
-import { App } from "vue";
-import { AssetsDetailsModule } from "@shared/modules/assets";
-import { VcAppSwitcherComponent } from "@shared/components/app-switcher";
-import { VcBladeNavigationComponent } from "@shared/components/blade-navigation";
-import { AssetsManagerModule } from "@shared/modules/assets-manager";
-import { VcPopupHandler } from "@shared/components/popup-handler";
-
-export const SharedModule = {
-  install(app: App, args: { router: Router }): void {
-    app
-      .use(AssetsDetailsModule)
-      .use(AssetsManagerModule)
-      .use(VcBladeNavigationComponent, { router: args.router })
-      .use(VcAppSwitcherComponent)
-      .use(VcPopupHandler);
-  },
-};
-
-export * from "@shared/modules";
-export * from "@shared/components";
-export * from "@shared/pages";
-export * from "@shared/composables";
-export * from "@shared/utilities";

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

@@ -1,238 +0,0 @@
-<template>
-  <VcBlade
-    :title="options?.asset?.name"
-    :subtitle="t('ASSETS.PAGES.DETAILS.SUBTITLE')"
-    :expanded="expanded"
-    :closable="closable"
-    :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <!-- Blade contents -->
-    <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[--assets-details-border]">
-      <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
-        <VcContainer :no-padding="true">
-          <div class="tw-p-4">
-            <VcForm>
-              <VcRow class="tw-mb-4 !tw-flex">
-                <template v-if="isImage(defaultAsset.name)">
-                  <VcImage
-                    :src="defaultAsset.url"
-                    size="xl"
-                    :bordered="true"
-                    class="tw-shrink-0"
-                  ></VcImage>
-                </template>
-                <template v-else>
-                  <VcIcon
-                    :icon="getFileThumbnail(defaultAsset.name)"
-                    class="tw-text-[color:var(--assets-details-thumbnail-color)] tw-text-[128px] tw-shrink-0"
-                  ></VcIcon>
-                </template>
-                <VcCol class="tw-ml-6">
-                  <VcCol>
-                    <VcCol>
-                      <VcLabel>{{ t("ASSETS.PAGES.DETAILS.FIELDS.SIZE") }}</VcLabel>
-                      <VcHint class="tw-text-s">{{ readableSize(defaultAsset.size) }}</VcHint>
-                    </VcCol>
-                    <VcCol>
-                      <VcLabel>{{ t("ASSETS.PAGES.DETAILS.FIELDS.CREATED_DATE") }}</VcLabel>
-                      <VcHint class="tw-text-s">{{
-                        formatDateRelative(defaultAsset.createdDate) || "N/A"
-                      }}</VcHint>
-                    </VcCol>
-                    <VcCol class="tw-w-full">
-                      <VcLabel>{{ t("ASSETS.PAGES.DETAILS.FIELDS.URL") }}</VcLabel>
-                      <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-                        <div class="tw-truncate">
-                          <VcLink
-                            class="vc-link tw-text-s tw-truncate tw-w-full"
-                            @click="openLink(defaultAsset.url)"
-                            >{{ props.options?.asset.name }}</VcLink
-                          >
-                        </div>
-                        <VcButton
-                          icon="material-content_copy"
-                          icon-size="m"
-                          class="tw-ml-2"
-                          text
-                          :title="t('ASSETS.PAGES.DETAILS.FIELDS.COPY')"
-                          @click="copyLink(defaultAsset.url)"
-                        ></VcButton>
-                      </div>
-                    </VcCol>
-                  </VcCol>
-                </VcCol>
-              </VcRow>
-
-              <Field
-                v-if="!options?.hiddenFields?.includes('name')"
-                v-slot="{ errorMessage, handleChange, errors }"
-                :label="t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
-                name="asset_name"
-                rules="required"
-                :model-value="defaultAsset.name"
-              >
-                <VcInput
-                  v-model="assetNameClean"
-                  class="tw-mb-4"
-                  :label="t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
-                  clearable
-                  required
-                  :error="!!errors.length"
-                  :error-message="errorMessage"
-                  :placeholder="t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')"
-                  :disabled="readonly"
-                  @update:model-value="handleChange"
-                ></VcInput>
-              </Field>
-              <VcInput
-                v-if="assetType === 'Image' && !options?.hiddenFields?.includes('altText')"
-                v-model="defaultAsset.altText"
-                class="tw-mb-4"
-                :label="t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
-                clearable
-                :placeholder="t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
-                :tooltip="t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
-                :disabled="readonly"
-              ></VcInput>
-              <VcTextarea
-                v-if="!options?.hiddenFields?.includes('description')"
-                v-model="defaultAsset.description"
-                class="tw-mb-4"
-                :label="t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
-                :placeholder="t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')"
-                :disabled="readonly"
-              ></VcTextarea>
-            </VcForm>
-          </div>
-        </VcContainer>
-      </div>
-    </div>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { ICommonAsset, IBladeToolbar } from "@core/types";
-import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { VcBlade } from "@ui/components/organisms/vc-blade";
-import { VcContainer } from "@ui/components/atoms/vc-container";
-import { VcForm } from "@ui/components/molecules/vc-form";
-import { VcImage } from "@ui/components/atoms/vc-image";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { VcTextarea } from "@ui/components/molecules/vc-textarea";
-import { isImage, getFileThumbnail, readableSize } from "@shared/utilities/assets";
-import { formatDateRelative } from "@core/utilities/date";
-import { useIsFormValid, Field, useForm, useIsFormDirty } from "vee-validate";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  options?: {
-    asset: ICommonAsset;
-    disabled?: boolean;
-    hiddenFields?: string[];
-    assetEditHandler?: (defaultAsset: ICommonAsset) => void;
-    assetRemoveHandler?: (defaultAsset: ICommonAsset) => Promise<void>;
-  };
-}
-
-export interface Emits {
-  (event: "close:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "collapse:blade"): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-const emit = defineEmits<Emits>();
-
-defineOptions({
-  name: "AssetsDetails",
-});
-
-useForm({ validateOnMount: false });
-const isValid = useIsFormValid();
-const isDirty = useIsFormDirty();
-const { t } = useI18n({ useScope: "global" });
-const defaultAsset = ref<ICommonAsset>({ ...props.options?.asset });
-
-const readonly = computed(() => props.options?.disabled);
-
-const assetNameClean = computed({
-  get() {
-    return defaultAsset.value.name?.split(".").shift();
-  },
-  set(value) {
-    const fileExtension = defaultAsset.value.name?.split(".").pop();
-    defaultAsset.value.name = value + "." + fileExtension;
-  },
-});
-
-const isDisabled = computed(() => {
-  return !isDirty.value || !isValid.value;
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "save",
-    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
-    icon: "material-save",
-    async clickHandler() {
-      if (props.options?.assetEditHandler && typeof props.options?.assetEditHandler === "function") {
-        await props.options?.assetEditHandler(defaultAsset.value);
-        emit("close:blade");
-      }
-    },
-    disabled: computed(() => isDisabled.value || readonly.value),
-  },
-  {
-    id: "delete",
-    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
-    icon: "material-delete",
-    async clickHandler() {
-      if (props.options?.assetRemoveHandler && typeof props.options?.assetRemoveHandler === "function") {
-        await props.options?.assetRemoveHandler(defaultAsset.value);
-        emit("close:blade");
-      }
-    },
-    disabled: computed(() => readonly.value),
-  },
-]);
-
-const assetType = computed(() => defaultAsset.value?.typeId);
-
-function copyLink(link: string | undefined) {
-  if (!link) {
-    return;
-  }
-  if (link.charAt(0) === "/") {
-    navigator.clipboard?.writeText(`${location.origin}${link}`);
-  } else {
-    navigator.clipboard?.writeText(link);
-  }
-}
-
-function openLink(link: string | undefined) {
-  if (!link) {
-    return;
-  }
-  location.href = link;
-}
-
-defineExpose({
-  title: defaultAsset.value.name,
-});
-</script>
-
-<style lang="scss">
-:root {
-  --assets-details-border: var(--neutrals-200);
-  --assets-details-thumbnail-color: var(--secondary-500);
-}
-</style>

package/shared/modules/assets/components/assets-details/index.ts

@@ -1,3 +0,0 @@
-import _AssetsDetails from "@shared/modules/assets/components/assets-details/assets-details.vue";
-
-export const AssetsDetails = _AssetsDetails as typeof _AssetsDetails;

package/shared/modules/assets/components/index.ts

@@ -1 +0,0 @@
-export * from "@shared/modules/assets/components/assets-details";

package/shared/modules/assets/index.ts

@@ -1,12 +0,0 @@
-import { createAppModule } from "@core/plugins/modularity";
-import * as components from "@shared/modules/assets/components";
-
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    AssetsDetails: (typeof components)["AssetsDetails"];
-  }
-}
-
-export const AssetsDetailsModule = createAppModule(components);
-
-export default components;