@vc-shell/framework 1.0.121 → 1.0.123

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

@@ -1,7 +1,7 @@
-import { Component, ExtractPropTypes, computed, h, markRaw, reactive, ref, toRefs, toValue, unref, watch } from "vue";
+import { Component, ExtractPropTypes, computed, h, markRaw, ref, toRefs, watch } from "vue";
 import { Gallery } from "../factories";
 import componentProps from "./props";
-import { IImage } from "../../../../../core/types";
+import { ICommonAsset } from "../../../../../core/types";
 import { useBladeNavigation, usePopup } from "./../../../../components";
 import { useI18n } from "vue-i18n";
 import { default as AssetsDetails } from "../../../assets/components/assets-details/assets-details.vue";
@@ -52,31 +52,31 @@ export default {
 
     return () => {
       const imageHandlers = {
-        loading: imagesHandler.loading,
-        async edit(image: IImage) {
-          internalModel.value[props.element.property] = await imagesHandler.edit?.value?.(
-            unref(props.formData)[props.element.property] as IImage[],
-            image
-          );
-          await editImages(internalModel.value[props.element.property]);
+        loading: imagesHandler.loading ?? false,
+        async edit(image: ICommonAsset) {
+          if (!imagesHandler.edit?.value) throw new Error("Edit handler is not provided");
+          const edited = await imagesHandler.edit?.value?.([image]);
+
+          await editImages(edited);
         },
-        async upload(files: FileList | null) {
+        async upload(files: FileList | null, lastSortOrder?: number) {
+          if (!imagesHandler.upload?.value) throw new Error("Upload handler is not provided");
           if (files) {
-            internalModel.value[props.element.property] = await imagesHandler.upload?.value?.(
-              files,
-              unref(props.formData)[props.element.property] as IImage[],
-              (unref(props.formData).id as string) || (unref(props.formData).categoryId as string),
-              props.element.uploadFolder
-            );
+            const uploaded = await imagesHandler.upload?.value?.(files, lastSortOrder);
 
+            let addToExisting: ICommonAsset[];
+            if (Array.isArray(uploaded) && Array.isArray(internalModel.value[props.element.property])) {
+              addToExisting = internalModel.value[props.element.property].concat(uploaded);
+            } else {
+              addToExisting = uploaded;
+            }
             files = null;
 
-            await editImages(internalModel.value[props.element.property]);
-
-            return internalModel.value[props.element.property];
+            await editImages(addToExisting);
           }
         },
-        async remove(image: IImage) {
+        async remove(image: ICommonAsset) {
+          if (!imagesHandler.remove?.value) throw new Error("Remove handler is not provided");
           if (
             await showConfirmation(
               computed(() =>
@@ -88,17 +88,13 @@ export default {
               )
             )
           ) {
-            internalModel.value[props.element.property] = await imagesHandler.remove?.value?.(
-              unref(props.formData)[props.element.property] as IImage[],
-              image
-            );
-            await editImages(internalModel.value[props.element.property]);
+            const edited = await imagesHandler.remove?.value?.([image]);
+            await editImages(edited);
           }
-          return internalModel.value[props.element.property];
         },
       };
 
-      function onGalleryItemEdit(item: IImage) {
+      function onGalleryItemEdit(item: ICommonAsset) {
         openBlade({
           blade: markRaw(AssetsDetails),
           options: {
@@ -109,7 +105,7 @@ export default {
         });
       }
 
-      async function editImages(args: IImage[]) {
+      async function editImages(args: ICommonAsset[]) {
         if (props.fieldContext) {
           internalModel.value[props.element.property] = args;
           setModel({
@@ -134,6 +130,7 @@ export default {
           onRemove: imageHandlers.remove,
           onEdit: onGalleryItemEdit,
           onSort: editImages,
+          hideAfterUpload: props.element.hideAfterUpload,
         },
         options: props.baseOptions,
       });

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

@@ -2,7 +2,7 @@
 import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
 import { AsyncAction } from "../../../../../core/composables";
 import { SettingsSchema } from "../../types";
-import { Asset, AssetsHandler, IBladeToolbar, IImage } from "../../../../../core/types";
+import { AssetsHandler, IBladeToolbar, ICommonAsset } from "../../../../../core/types";
 import { useBladeNavigation } from "../../../../components";
 import { FormContext } from "vee-validate";
 
@@ -91,8 +91,8 @@ export interface DetailsBaseBladeScope extends BaseBladeScope {
     }) => void;
   };
   assetsHandler?: {
-    assets?: AssetsHandler<Asset>;
-    images?: AssetsHandler<IImage>;
+    assets?: AssetsHandler<ICommonAsset>;
+    images?: AssetsHandler<ICommonAsset>;
   };
 }
 

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -1,4 +1,4 @@
-import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode } from "vue";
+import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, VNode, ref } from "vue";
 import FIELD_MAP from "../components/FIELD_MAP";
 import { ControlSchema } from "../types";
 import { IControlBaseProps, IControlBaseOptions } from "../types/models";
@@ -50,17 +50,15 @@ function nodeBuilder<
   const contextProperty =
     safeIn("property", controlSchema) &&
     controlSchema.property &&
-    _.has(toValue(internalContext), controlSchema.property) &&
     getModel(controlSchema.property, toValue(internalContext));
 
   const scopedProperty =
     safeIn("property", controlSchema) &&
     controlSchema.property &&
     bladeContext.scope &&
-    _.has(bladeContext.scope, controlSchema.property) &&
     bladeContext.scope[controlSchema.property];
 
-  const modelValue = contextProperty || scopedProperty || undefined;
+  const modelValue = scopedProperty || contextProperty || undefined;
 
   const tooltip = (safeIn("tooltip", controlSchema) && controlSchema.tooltip) || undefined;
   const multilanguage = safeIn("multilanguage", controlSchema) && controlSchema.multilanguage;

package/shared/modules/dynamic/helpers/override.ts

@@ -1,5 +1,6 @@
 import * as _ from "lodash-es";
 import { DynamicSchema, OverridesSchema } from "../types";
+import "core-js/actual/array/to-spliced";
 
 export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   let schema = _.cloneDeep(schemaCopy);

package/shared/modules/dynamic/helpers/toolbarReducer.ts

@@ -2,11 +2,11 @@
 import { IBladeToolbar } from "../../../../core/types";
 import * as _ from "lodash-es";
 import { UnwrapNestedRefs, computed, ref, ComputedRef } from "vue";
-import { SettingsBase } from "../types";
+import { SettingsSchema } from "../types";
 import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../factories/types";
 
 export const toolbarReducer = (args: {
-  defaultToolbarSchema: SettingsBase["toolbar"];
+  defaultToolbarSchema: SettingsSchema["toolbar"];
   defaultToolbarBindings: BaseBladeScope["toolbarOverrides"];
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;

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

@@ -1,112 +1,129 @@
 <template>
-  <VcBlade
+  <component
+    :is="isWidgetView ? 'template' : 'VcBlade'"
     :expanded="expanded"
     :closable="closable"
     width="50%"
     :toolbar-items="toolbarComputed"
     :title="title"
+    :class="{
+      'tw-flex tw-flex-auto': isWidgetView,
+    }"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
-    <VcTable
-      class="tw-grow tw-basis-0"
-      :loading="loading"
-      :expanded="expanded"
-      :columns="(tableData?.columns as ITableColumns[])"
-      :state-key="(tableData?.id as string)"
-      :items="(itemsProxy as Record<string, any>[])"
-      :multiselect="tableData?.multiselect"
-      :header="tableData?.header"
-      :sort="sort"
-      :pages="pagination?.pages"
-      :current-page="pagination?.currentPage"
-      :search-value="searchValue"
-      :selected-item-id="selectedItemId"
-      :total-label="$t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
-      :total-count="pagination?.totalCount"
-      :active-filter-count="activeFilterCount"
-      :reorderable-rows="tableData?.reorderableRows"
-      @item-click="onItemClick"
-      @pagination-click="onPaginationClick"
-      @selection-changed="onSelectionChanged"
-      @header-click="onHeaderClick"
-      @load:change="onSearchList"
-      @scroll:ptr="reload"
-      @search:change="onSearchList"
-      @row:reorder="sortRows"
-    >
-      <template
-        v-if="isFilterVisible"
-        #filters="{ closePanel }"
+    <template v-if="isWidgetView && $isMobile.value">
+      <slot
+        name="widget-mobile"
+        :total-count="pagination.totalCount"
+        :loading="loading"
       >
-        <filterComponent :close="closePanel" />
-      </template>
-
-      <!-- Not found template -->
-      <template #notfound>
-        <template v-if="bladeOptions.notFound">
-          <component
-            :is="bladeOptions.notFound"
-            @reset="resetSearch"
-          ></component>
+        {{ pagination.totalCount }}</slot
+      >
+    </template>
+    <template v-else>
+      <VcTable
+        class="tw-grow tw-basis-0"
+        :loading="loading"
+        :expanded="expanded"
+        :columns="(tableData?.columns as ITableColumns[])"
+        :state-key="stateKey"
+        :items="(itemsProxy as Record<string, any>[])"
+        :multiselect="isWidgetView ? false : tableData?.multiselect"
+        :header="isWidgetView ? false : tableData?.header"
+        :footer="!isWidgetView"
+        :sort="sort"
+        :pages="pagination?.pages"
+        :current-page="pagination?.currentPage"
+        :search-value="searchValue"
+        :selected-item-id="selectedItemId"
+        :total-label="$t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
+        :total-count="pagination?.totalCount"
+        :active-filter-count="activeFilterCount"
+        :reorderable-rows="isWidgetView ? false : tableData?.reorderableRows"
+        :pull-to-reload="true"
+        @item-click="onItemClick"
+        @pagination-click="onPaginationClick"
+        @selection-changed="onSelectionChanged"
+        @header-click="onHeaderClick"
+        @load:change="onSearchList"
+        @scroll:ptr="reload"
+        @search:change="onSearchList"
+        @row:reorder="sortRows"
+      >
+        <template
+          v-if="isFilterVisible"
+          #filters="{ closePanel }"
+        >
+          <filterComponent :close="closePanel" />
         </template>
-        <template v-else>
-          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
-            <div class="tw-m-4 tw-text-xl tw-font-medium">
-              {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
+
+        <!-- Not found template -->
+        <template #notfound>
+          <template v-if="bladeOptions.notFound">
+            <component
+              :is="bladeOptions.notFound"
+              @reset="resetSearch"
+            ></component>
+          </template>
+          <template v-else>
+            <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+              <div class="tw-m-4 tw-text-xl tw-font-medium">
+                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
+              </div>
+              <VcButton
+                v-if="isFilterVisible"
+                @click="resetSearch"
+                >{{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
+              >
             </div>
-            <VcButton
-              v-if="isFilterVisible"
-              @click="resetSearch"
-              >{{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
-            >
-          </div>
+          </template>
         </template>
-      </template>
 
-      <!-- Empty template -->
-      <template #empty>
-        <template v-if="bladeOptions.empty">
-          <component
-            :is="bladeOptions.empty"
-            @add="openDetailsBlade"
-          ></component>
-        </template>
-        <template v-else>
-          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
-            <div class="tw-m-4 tw-text-xl tw-font-medium">
-              {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+        <!-- Empty template -->
+        <template #empty>
+          <template v-if="bladeOptions.empty">
+            <component
+              :is="bladeOptions.empty"
+              @add="openDetailsBlade"
+            ></component>
+          </template>
+          <template v-else>
+            <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+              <div class="tw-m-4 tw-text-xl tw-font-medium">
+                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+              </div>
             </div>
-          </div>
+          </template>
         </template>
-      </template>
 
-      <!-- Override table templates-->
-      <template
-        v-for="(component, key, index) in bladeOptions?.templateOverrideComponents"
-        #[`item_${key}`]="itemData"
-        :key="`template_override_${index}`"
-      >
-        <component
-          :is="component"
-          :context="itemData"
-        />
-      </template>
+        <!-- Override table templates-->
+        <template
+          v-for="(component, key, index) in bladeOptions?.templateOverrideComponents"
+          #[`item_${key}`]="itemData"
+          :key="`template_override_${index}`"
+        >
+          <component
+            :is="component"
+            :context="itemData"
+          />
+        </template>
 
-      <!-- Override table mobile view -->
+        <!-- Override table mobile view -->
 
-      <template
-        v-if="bladeOptions.mobileView"
-        #mobile-item="itemData"
-      >
-        <component
-          :is="bladeOptions.mobileView"
-          :context="itemData"
-        ></component>
-      </template>
-    </VcTable>
-  </VcBlade>
+        <template
+          v-if="bladeOptions.mobileView"
+          #mobile-item="itemData"
+        >
+          <component
+            :is="bladeOptions.mobileView"
+            :context="itemData"
+          ></component>
+        </template>
+      </VcTable>
+    </template>
+  </component>
 </template>
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -147,6 +164,7 @@ export interface Props {
   options?: unknown;
   model?: DynamicGridSchema;
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
+  isWidgetView?: boolean;
 }
 
 export interface Emits {
@@ -155,6 +173,8 @@ export interface Emits {
   (event: "collapse:blade"): void;
   (event: "expand:blade"): void;
   (event: "close:children"): void;
+  (event: "item-click", args: { param: string | undefined }): void;
+  (event: "add"): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -203,6 +223,13 @@ watch(
 );
 
 const tableData = computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
+const stateKey = computed(() => {
+  if (tableData.value?.id) {
+    return tableData.value?.id + props.isWidgetView ? "_dashboard" : "";
+  }
+
+  throw new Error('Table id is not defined. Please provide "id" property in table schema');
+});
 const table = computed(() => {
   const tableScope = {
     columns: tableData.value?.columns,
@@ -228,6 +255,10 @@ const { load, remove, items, loading, pagination, query, scope } = props.composa
   mounted: useMounted(),
 }) as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>;
 
+if (props.isWidgetView) {
+  query.value.take = 5;
+}
+
 const {
   filterComponent,
   activeFilterCount,
@@ -269,7 +300,7 @@ const toolbarComputed = toolbarReducer({
           typeof toValue(scope).openDetailsBlade === "function"
         ) {
           toValue(scope).openDetailsBlade();
-        }
+        } else throw new Error("openDetailsBlade method is not defined in scope");
       },
     },
     refresh: {
@@ -335,32 +366,40 @@ watch(
 );
 
 const openDetailsBlade = () => {
-  if (
-    scope &&
-    "openDetailsBlade" in toValue(scope) &&
-    toValue(scope).openDetailsBlade &&
-    typeof toValue(scope).openDetailsBlade === "function"
-  ) {
-    toValue(scope).openDetailsBlade();
+  if (!props.isWidgetView) {
+    if (
+      scope &&
+      "openDetailsBlade" in toValue(scope) &&
+      toValue(scope).openDetailsBlade &&
+      typeof toValue(scope).openDetailsBlade === "function"
+    ) {
+      toValue(scope).openDetailsBlade();
+    }
+  } else {
+    emit("add");
   }
 };
 
 const onItemClick = (item: { [x: string]: any; id?: string }) => {
-  if (
-    scope &&
-    "openDetailsBlade" in toValue(scope) &&
-    toValue(scope).openDetailsBlade &&
-    typeof toValue(scope).openDetailsBlade === "function"
-  ) {
-    toValue(scope).openDetailsBlade({
-      param: item.id,
-      onOpen() {
-        selectedItemId.value = item.id;
-      },
-      onClose() {
-        selectedItemId.value = undefined;
-      },
-    });
+  if (!props.isWidgetView) {
+    if (
+      scope &&
+      "openDetailsBlade" in toValue(scope) &&
+      toValue(scope).openDetailsBlade &&
+      typeof toValue(scope).openDetailsBlade === "function"
+    ) {
+      toValue(scope).openDetailsBlade({
+        param: item.id,
+        onOpen() {
+          selectedItemId.value = item.id;
+        },
+        onClose() {
+          selectedItemId.value = undefined;
+        },
+      });
+    }
+  } else {
+    emit("item-click", { param: item.id });
   }
 };
 

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

@@ -1,6 +1,6 @@
-import { VcButton, VcField, VcGallery, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
+import { VcField, VcGallery, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules } from "../../../../core/types";
-import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
+import type { ComponentProps } from "./../../../utilities/vueUtils";
 
 export type KeysOfUnion<T> = T extends T ? keyof T : never;
 
@@ -14,7 +14,7 @@ export interface DynamicGridSchema {
   /**
    * @description Blade settings
    */
-  settings: SettingsSchema;
+  settings: SettingsGrid;
   content: [ListContentSchema];
 }
 
@@ -22,25 +22,28 @@ export interface DynamicDetailsSchema {
   /**
    * @description Blade settings
    */
-  settings: SettingsSchema;
+  settings: SettingsDetails;
   /**
    * @description Blade content
    */
   content: [FormContentSchema, WidgetsSchema?];
 }
 
-export type SettingsSchema = SettingsWorkspace | SettingsDetails;
+export type SettingsSchema = SettingsGrid | SettingsDetails;
 
-export interface SettingsWorkspace extends SettingsBase {
-  isWorkspace: boolean;
+export interface SettingsGrid extends SettingsBase {
+  component: "DynamicBladeList";
 }
 
 export interface SettingsDetails extends SettingsBase {
+  component: "DynamicBladeForm";
   status?: {
     component: string;
   };
 }
 
+export type IViewComponentName = "DynamicBladeForm" | "DynamicBladeList";
+
 export interface SettingsBase {
   /**
    * Blade url
@@ -64,8 +67,12 @@ export interface SettingsBase {
   composable: string;
   /**
    * Toolbar items array
-   * @default 'save', 'delete' in {@link SettingsDetails}
-   * @default 'refresh', 'add' in {@link SettingsWorkspace}
+   *
+   *  Defaults:
+   *
+   * [`saveChanges`, `remove`] methods in `DynamicBladeForm`
+   *
+   * [`openAddBlade`, `refresh`, `removeItems`, `save`] methods in `DynamicBladeList`
    */
   toolbar: {
     id: string;
@@ -76,12 +83,20 @@ export interface SettingsBase {
   /**
    * Blade component
    */
-  component: string;
+  component: IViewComponentName;
   /**
    * Blade permissions
    */
   permissions?: string | string[];
+  /**
+   * The push notification types associated with the view.
+   */
   pushNotificationType?: string | string[];
+  /**
+   * Indicates whether the view is a workspace.
+   * This option is used to determine which view should be the default view.
+   */
+  isWorkspace?: boolean;
 }
 
 export interface ListContentSchema {
@@ -508,11 +523,6 @@ export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multila
    * @type {"vc-gallery"}
    */
   component: "vc-gallery";
-  /**
-   * Folder name for files upload.
-   * @type {string}
-   */
-  uploadFolder: string;
   /**
    * Gallery type
    * @type {"gallery" | "file-upload"}
@@ -532,6 +542,11 @@ export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multila
     }}
    */
   actions?: ComponentProps<typeof VcGallery>["itemActions"];
+  /**
+   * Whether the upload is hides after upload or not.
+   * @type {boolean}
+   */
+  hideAfterUpload?: boolean;
 }
 
 /**

package/ui/components/atoms/vc-card/vc-card.vue

@@ -31,7 +31,7 @@
     <transition name="fade">
       <div
         v-show="!isCollapsedInternal"
-        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
+        :class="[{ 'tw-flex': fill }, 'vc-card__body']"
       >
         <slot></slot>
       </div>

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -70,26 +70,23 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { IImage } from "./../../../../../../core/types";
+import { ICommonAsset } from "./../../../../../../core/types";
 import { VcImage, VcIcon } from "./../../../../";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
-  image: IImage;
+  image: ICommonAsset;
   readonly?: boolean | undefined;
-  actions?:
-    | {
-        name?: string | undefined;
-        preview: boolean | undefined;
-        edit: boolean | undefined;
-        remove: boolean | undefined;
-      }
-    | undefined;
+  actions?: {
+    preview: boolean | undefined;
+    edit: boolean | undefined;
+    remove: boolean | undefined;
+  };
   disableDrag?: boolean | undefined;
 }
 
 withDefaults(defineProps<Props>(), {
-  image: () => ({} as IImage),
+  image: () => ({} as ICommonAsset),
   readonly: false,
   actions: () => ({
     name: undefined,

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -66,11 +66,11 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
-import { IImage } from "./../../../../../../core/types";
+import { ICommonAsset } from "./../../../../../../core/types";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
-  images?: IImage[];
+  images?: ICommonAsset[];
   index: number;
 }