@vc-shell/framework 1.0.169 → 1.0.171

package/shared/modules/assets/index.ts

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

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

@@ -25,6 +25,7 @@
         :header="false"
         :footer="false"
         :item-action-builder="!readonly ? actionBuilder : undefined"
+        :enable-item-actions="!readonly"
         :multiselect="!readonly"
         class="tw-h-full tw-w-full"
         @item-click="onItemClick"
@@ -34,14 +35,21 @@
         <!-- Empty template -->
         <template #empty>
           <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
-            <VcIcon
-              icon="fas fa-cloud-upload-alt"
-              class="tw-text-[100px] tw-text-[#41afe6]"
-            ></VcIcon>
-            <div class="tw-m-4 tw-text-xl tw-font-medium">
-              {{ t("ASSETS_MANAGER.EMPTY.NO_ASSETS") }}
-            </div>
-            <VcButton @click="toggleUploader">{{ t("ASSETS_MANAGER.EMPTY.UPLOAD") }}</VcButton>
+            <template v-if="!readonly">
+              <VcIcon
+                icon="fas fa-cloud-upload-alt"
+                class="tw-text-[100px] tw-text-[#41afe6]"
+              ></VcIcon>
+              <div class="tw-m-4 tw-text-xl tw-font-medium">
+                {{ t("ASSETS_MANAGER.EMPTY.UPLOAD_ASSETS") }}
+              </div>
+              <VcButton @click="toggleUploader">{{ t("ASSETS_MANAGER.EMPTY.UPLOAD") }}</VcButton>
+            </template>
+            <template v-else>
+              <div class="tw-m-4 tw-text-xl tw-font-medium">
+                {{ t("ASSETS_MANAGER.EMPTY.NO_ASSETS") }}
+              </div>
+            </template>
           </div>
         </template>
 
@@ -73,7 +81,7 @@
           </div>
         </template>
 
-        <!-- Overide order column -->
+        <!-- Override order column -->
         <template #item_sortOrder="{ item }">
           <div>
             {{ item.sortOrder }}
@@ -176,7 +184,7 @@ const props = withDefaults(defineProps<Props>(), {
   param: undefined,
 });
 
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 
 defineOptions({
   name: "AssetsManager",
@@ -196,15 +204,6 @@ const modified = ref(false);
 const { openBlade, resolveBladeByName } = useBladeNavigation();
 
 const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "save",
-    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.SAVE")),
-    icon: "fas fa-save",
-    clickHandler() {
-      emit("close:blade");
-    },
-    disabled: computed(() => !modified.value || readonly.value),
-  },
   {
     id: "add",
     title: computed(() => t("ASSETS_MANAGER.TOOLBAR.ADD")),
@@ -213,6 +212,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
       toggleUploader();
     },
     disabled: computed(() => readonly.value),
+    isVisible: computed(() => !readonly.value),
   },
   {
     id: "delete",
@@ -224,6 +224,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
       }
     },
     disabled: computed(() => !selectedItems.value.length || readonly.value),
+    isVisible: computed(() => !readonly.value),
   },
 ]);
 
@@ -363,7 +364,8 @@ const actionBuilder = (): IActionBuilderResult<ICommonAsset>[] => {
   result.push({
     icon: "fas fa-edit",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.EDIT")),
-    variant: "success",
+    type: "success",
+    position: "right",
     clickHandler(item: ICommonAsset) {
       onItemClick(item);
     },
@@ -372,8 +374,8 @@ const actionBuilder = (): IActionBuilderResult<ICommonAsset>[] => {
   result.push({
     icon: "fas fa-trash",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
-    variant: "danger",
-    leftActions: true,
+    type: "danger",
+    position: "left",
     async clickHandler(item: ICommonAsset) {
       defaultAssets.value = await props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];

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

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

package/shared/modules/dynamic/composables/useToolbarReducer/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { IBladeToolbar } from "../../../../../core/types";
 import * as _ from "lodash-es";
-import { SettingsSchema } from "../../types";
+import { SettingsSchema, ToolbarSchema } from "../../types";
 import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../../factories/types";
 import { useI18n } from "vue-i18n";
 import { toValue } from "@vueuse/core";
@@ -13,7 +13,7 @@ export const useToolbarReducer = (args: {
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
   scope: ComputedRef<BaseBladeScope> | undefined;
-}): UnwrapNestedRefs<ComputedRef<IBladeToolbar[]>> | undefined => {
+}): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[]>> | undefined => {
   if (!args) return;
 
   const { t } = useI18n({ useScope: "global" });

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

@@ -79,9 +79,10 @@ import {
   type Component,
   ConcreteComponent,
   toRefs,
+  provide,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
-import { reactiveComputed, useMounted, useTemplateRefsList } from "@vueuse/core";
+import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
 import {
   DetailsBladeContext,
   DetailsBaseBladeScope,
@@ -97,6 +98,8 @@ import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import * as _ from "lodash-es";
 import { IBladeToolbar } from "../../../../core/types";
+import { useNotifications } from "../../../../core/composables";
+import { notification } from "../../../components";
 
 interface Props {
   expanded?: boolean;
@@ -150,6 +153,25 @@ const { loading, item, validationState, scope, load, remove, saveChanges, bladeT
 const title = ref();
 const isReady = ref(false);
 const activeWidgetExposed = ref<CoreBladeExposed>();
+const settings = computed(() => props.model?.settings);
+
+const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
+
+watch(
+  moduleNotifications,
+  (newVal) => {
+    newVal.forEach((message) => {
+      if (message.title && props.composables) {
+        notification.success(message.title, {
+          onClose() {
+            markAsRead(message);
+          },
+        });
+      }
+    });
+  },
+  { deep: true },
+);
 
 watch(
   () => bladeTitle?.value,
@@ -172,8 +194,6 @@ const validated = computed(() => {
 
 useBeforeUnload(validated);
 
-const settings = computed(() => props.model?.settings);
-
 const form = computed(
   (): FormContentSchema => props.model?.content.find((x) => x?.component === "vc-form") as FormContentSchema,
 );
@@ -337,6 +357,8 @@ onBeforeClose(async () => {
   }
 });
 
+provide("bladeContext", toReactive(bladeContext));
+
 defineExpose({
   title: bladeTitle ?? "",
   updateActiveWidgetCount,

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

@@ -44,6 +44,8 @@
         :items="itemsProxy as Record<string, any>[]"
         :multiselect="isWidgetView ? false : tableData?.multiselect"
         :header="isWidgetView ? false : tableData?.header"
+        :item-action-builder="actionBuilder"
+        :enable-item-actions="!!tableData?.actions"
         :footer="!isWidgetView"
         :sort="sort"
         :pages="pagination?.pages"
@@ -55,6 +57,7 @@
         :active-filter-count="activeFilterCount"
         :reorderable-rows="isWidgetView ? false : tableData?.reorderableRows"
         :pull-to-reload="!isWidgetView"
+        :select-all="tableData?.selectAll"
         @item-click="onItemClick"
         @pagination-click="onPaginationClick"
         @selection-changed="onSelectionChanged"
@@ -63,6 +66,7 @@
         @scroll:ptr="reload"
         @search:change="onSearchList"
         @row:reorder="sortRows"
+        @select:all="handleSelectAllItems"
       >
         <template
           v-if="isFilterVisible"
@@ -76,6 +80,7 @@
           <template v-if="tableTemplates?.notFound">
             <component
               :is="tableTemplates.notFound"
+              :context="bladeContext"
               @reset="resetSearch"
             ></component>
           </template>
@@ -101,6 +106,7 @@
               :class="{
                 'tw-py-6': isWidgetView,
               }"
+              :context="bladeContext"
               @add="openDetailsBlade"
             ></component>
           </template>
@@ -156,19 +162,21 @@ import {
   ComputedRef,
   onBeforeMount,
   toRefs,
+  provide,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
+import { DynamicGridSchema, ListContentSchema, SettingsSchema, ToolbarSchema } from "../types";
 import { useFilterBuilder, useTableTemplates } from "../composables";
 import { useFunctions, useNotifications } from "../../../../core/composables";
-import { ITableColumns } from "../../../../core/types";
+import { IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../core/types";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { notification, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import * as _ from "lodash-es";
-import { useMounted } from "@vueuse/core";
+import { toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
+import { isRef } from "vue";
 
 export interface Props {
   expanded?: boolean;
@@ -209,7 +217,6 @@ const searchValue = ref();
 const selectedItemId = shallowRef();
 const sort = shallowRef("createdDate:DESC");
 const selectedIds = shallowRef<string[]>([]);
-const isDesktop = inject("isDesktop") as Ref<boolean>;
 const itemsProxy = ref<Record<string, any>[]>();
 const modified = shallowRef(false);
 
@@ -357,7 +364,7 @@ const toolbarComputed =
             await removeItems();
           },
           disabled: computed(() => !selectedIds.value?.length),
-          isVisible: isDesktop.value,
+          // isVisible: computed(() => isDesktop.value),
         },
       },
       customToolbarConfig: toValue(scope)?.toolbarOverrides,
@@ -586,6 +593,42 @@ function updateActiveWidgetCount() {
   });
 }
 
+async function handleSelectAllItems(all: boolean) {
+  allSelected.value = all;
+}
+
+// TODO add to documentation
+function actionBuilder(): IActionBuilderResult[] | undefined {
+  const result = tableData?.value?.actions?.map((action) => {
+    return {
+      icon: action.icon,
+      title: computed(() => t(action.title)),
+      type: action.type,
+      position: action.position,
+      clickHandler: async (itemVal: (typeof items.value)[number]) => {
+        try {
+          if (isRef(toolbarComputed) && toolbarComputed.value && toolbarComputed.value.length > 0) {
+            const toolbarItem = toolbarComputed.value.find((x) => x.method === action.method);
+            selectedIds.value = [itemVal.id];
+            if (toolbarItem) {
+              await toolbarItem.clickHandler?.();
+            } else {
+              await toValue(scope)?.[action.method]?.(itemVal);
+            }
+            selectedIds.value = [];
+          }
+        } catch (error) {
+          throw new Error(`Method ${action.method} is not defined in scope or toolbarOverrides`);
+        }
+      },
+    };
+  });
+
+  return result;
+}
+
+provide("bladeContext", toReactive(bladeContext));
+
 defineExpose({
   reload,
   title,

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

@@ -58,7 +58,7 @@ export interface SettingsDetails extends SettingsBase {
 
 export type IViewComponentName = "DynamicBladeForm" | "DynamicBladeList";
 
-type ToolbarSchema = {
+export type ToolbarSchema = {
   id: string;
   title: string;
   icon: string;
@@ -162,6 +162,14 @@ export interface ListContentSchema {
         };
   })[];
   reorderableRows?: boolean;
+  // TODO Add to documentation
+  selectAll?: boolean;
+  // TODO Add to documentation
+  actions?: (ToolbarSchema & {
+    position: "right" | "left";
+    type: "danger" | "success";
+    method: string;
+  })[];
   mobileTemplate?: {
     component: string;
   };

package/shared/pages/LoginPage/components/login/Login.vue

@@ -7,14 +7,13 @@
     <template v-if="isLogin">
       <VcForm @submit.prevent="login">
         <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="t('LOGIN.FIELDS.LOGIN.LABEL')"
           name="username"
           :model-value="form.username"
           rules="required"
         >
           <VcInput
-            v-bind="field"
             ref="loginField"
             v-model="form.username"
             class="tw-mb-4 tw-mt-1"
@@ -27,14 +26,13 @@
           />
         </Field>
         <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="t('LOGIN.FIELDS.PASSWORD.LABEL')"
           name="password"
           :model-value="form.password"
           rules="required"
         >
           <VcInput
-            v-bind="field"
             ref="passwordField"
             v-model="form.password"
             class="tw-mb-4"
@@ -78,6 +76,7 @@
         <div
           class="tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--separator)] after:tw-ml-2"
         >
+          <!-- TODO add to localization -->
           OR
         </div>
         <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2">
@@ -198,7 +197,7 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 
-useForm({ validateOnMount: false });
+const { setFieldError, resetForm, setErrors, validateField } = useForm({ validateOnMount: false });
 const { uiSettings, loading: customizationLoading } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;
@@ -253,6 +252,7 @@ const forgotPasswordForm = reactive({
 
 const login = async () => {
   if (isValid.value) {
+    signInResult.value.error = "";
     signInResult.value = (await signIn(form.username, form.password)) as SignInResult & {
       status?: number;
       error?: any;
@@ -264,6 +264,8 @@ const login = async () => {
       if (signInResult.value.status) {
         if (signInResult.value.status === 401) {
           signInResult.value.error = "The login or password is incorrect.";
+          form.password = "";
+          validateField("password");
         } else {
           signInResult.value.error = "Authentication error (code: " + signInResult.value.status + ").";
         }
@@ -288,6 +290,7 @@ const forgot = async () => {
 
 const togglePassRequest = () => {
   isLogin.value = !isLogin.value;
+  signInResult.value.error = "";
   if (isLogin.value) {
     forgotPasswordRequestSent.value = false;
     forgotPasswordForm.loginOrEmail = "";

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

@@ -19,15 +19,18 @@
       }"
     >
       <div
+        v-if="usePtr && dist > 0"
         class="vc-container__overscroll"
         :class="{ 'vc-container__overscroll_passed': status === 'loosing' }"
         :style="{ height: dist ? `${dist}px` : '0px' }"
       >
         <VcIcon
-          icon="fas fa-spinner"
-          :style="{ 'tw-font-size': `${dist / 2}px` }"
-          class="vc-container__overscroll-icon"
+          :icon="status === 'pulling' ? 'fas fa-arrow-down' : 'fas fa-sync'"
+          :class="[iconClass]"
+          :style="{ transform: status === 'pulling' ? `rotate(${dist * 3}deg)` : '' }"
         ></VcIcon>
+        <span v-if="status === 'pulling'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
+        <span v-else-if="status === 'loosing'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
       </div>
       <slot></slot>
     </div>
@@ -73,6 +76,15 @@ onMounted(() => {
 
 const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
 
+const iconClass = computed(() => {
+  if (status.value === "loosing") {
+    return "vc-container__overscroll-icon_refresh";
+  } else if (status.value === "pulling") {
+    return "vc-container__overscroll-icon_pulling";
+  }
+  return "vc-container__overscroll-icon";
+});
+
 const scrollTop = () => {
   if (component.value) {
     component.value.scroll(0, 0);
@@ -178,15 +190,27 @@ defineExpose({
   }
 
   &__overscroll {
-    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden;
+    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden tw-gap-2;
 
-    &-icon {
-      @apply tw-text-[color:#a1c0d4] tw-animate-spin;
+    &_passed {
+      @apply tw-text-[#43b0e6];
     }
+  }
 
-    &_passed &-icon {
-      @apply tw-text-[#43b0e6];
+  &__overscroll-icon {
+    @apply tw-text-[color:#a1c0d4];
+
+    &_pulling {
+      @apply tw-text-[color:#a1c0d4];
     }
+
+    &_refresh {
+      animation: tw-spin 2s linear infinite;
+    }
+  }
+
+  &__overscroll span {
+    @apply tw-mb-2 tw-text-sm tw-text-gray-500;
   }
 
   &__inner {
@@ -214,4 +238,13 @@ defineExpose({
     @apply tw-p-0;
   }
 }
+
+@keyframes tw-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

package/ui/components/atoms/vc-icon/index.ts

@@ -1,3 +1 @@
-import _Icon from "./vc-icon.vue";
-
-export const VcIcon = _Icon as typeof _Icon;
+export { default as VcIcon } from "./vc-icon.vue";

package/ui/components/molecules/vc-slider/vc-slider.vue

@@ -25,16 +25,16 @@
     <div v-show="navigation">
       <div class="vc-slider__prev tw-left-0">
         <slot name="prevBtn">
-          <div class="vc-slider__btn">
+          <button class="vc-slider__btn">
             <VcIcon icon="fas fa-chevron-left"></VcIcon>
-          </div>
+          </button>
         </slot>
       </div>
       <div class="vc-slider__next tw-right-0">
         <slot name="nextBtn">
-          <div class="vc-slider__btn">
+          <button class="vc-slider__btn">
             <VcIcon icon="fas fa-chevron-right"></VcIcon>
-          </div>
+          </button>
         </slot>
       </div>
     </div>

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -66,7 +66,8 @@ import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon, VcPopup } from "./../../";
+import { VcButton, VcIcon } from "./../../";
+import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
 
 export interface Props {
   icon?: string;
@@ -102,14 +103,12 @@ const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } =
 const { t } = useI18n({ useScope: "global" });
 
 const { open } = usePopup({
-  component: VcPopup,
+  component: vcPopupError,
   props: {
-    type: "error",
-    variant: "small",
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    default: computed(() => error?.value),
+    content: computed(() => error?.value),
   },
 });
 </script>