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

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

@@ -1,156 +1,133 @@
 <template>
-  <component
-    :is="isWidgetView ? 'template' : 'VcBlade'"
+  <VcBlade
     v-if="!composables"
     :expanded="expanded"
     :closable="closable"
     :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
-    :class="{
-      'tw-flex tw-flex-auto': isWidgetView,
-    }"
     :modified="unreffedScope?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
-    <template v-if="isWidgetView && $isMobile.value">
-      <slot
-        name="widget-mobile"
-        :total-count="pagination.totalCount"
-        :loading="loading"
+    <div
+      v-if="toValue(scope?.breadcrumbs)?.length"
+      class="tw-p-4"
+    >
+      <VcBreadcrumbs
+        :items="toValue(scope?.breadcrumbs)"
+        variant="light"
+        with-arrow
+      />
+    </div>
+    <VcTable
+      class="tw-grow tw-basis-0"
+      v-bind="tableConfigComputed"
+      :expanded="expanded"
+      :total-label="$t(`${localizationPrefix}.PAGES.LIST.TABLE.TOTALS`)"
+      :active-filter-count="activeFilterCount"
+      :disable-filter="filterDisable"
+    >
+      <template
+        v-if="isFilterVisible && bladeOptions.tableData?.filter"
+        #filters="{ closePanel }"
       >
-        {{ pagination.totalCount }}</slot
-      >
-    </template>
-    <template v-else>
-      <div
-        v-if="!isWidgetView && toValue(scope?.breadcrumbs)?.length"
-        :class="[
-          {
-            '-tw-mb-4': typeof tableData?.header === 'undefined' || tableData.header,
-          },
-          'tw-p-4',
-        ]"
-      >
-        <VcBreadcrumbs
-          :items="toValue(scope?.breadcrumbs)"
-          variant="light"
-          with-arrow
-        />
-      </div>
-      <VcTable
-        class="tw-grow tw-basis-0"
-        v-bind="tableConfigComputed"
-        :expanded="expanded"
-        :total-label="$t(`${localizationPrefix}.PAGES.LIST.TABLE.TOTALS`)"
-        :active-filter-count="activeFilterCount"
-        :disable-filter="filterDisable"
-      >
-        <template
-          v-if="isFilterVisible && bladeOptions.tableData?.filter"
-          #filters="{ closePanel }"
-        >
-          <filterComponent :close="closePanel" />
-        </template>
+        <filterComponent :close="closePanel" />
+      </template>
 
-        <!-- Not found template -->
-        <template #notfound>
-          <template v-if="tableTemplates?.notFound">
-            <component
-              :is="tableTemplates.notFound"
-              :context="bladeContext"
-              @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(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
-              </div>
-              <VcButton
-                v-if="isFilterVisible"
-                @click="resetSearch"
-                >{{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
-              >
-            </div>
-          </template>
+      <!-- Not found template -->
+      <template #notfound>
+        <template v-if="tableTemplates?.notFound">
+          <component
+            :is="tableTemplates.notFound"
+            :context="bladeContext"
+            @reset="resetSearch"
+          ></component>
         </template>
-
-        <!-- Empty template -->
-        <template #empty>
-          <template v-if="tableTemplates?.empty">
-            <component
-              :is="tableTemplates.empty"
-              :class="{
-                'tw-py-6': isWidgetView,
-              }"
-              :context="bladeContext"
-              @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(`${localizationPrefix}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
-              </div>
+        <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(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
             </div>
-          </template>
+            <VcButton
+              v-if="isFilterVisible"
+              @click="resetSearch"
+              >{{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
+            >
+          </div>
         </template>
+      </template>
 
-        <!-- Override table templates-->
-        <template
-          v-for="(component, key, index) in tableTemplates?.templateOverrideComponents"
-          #[`item_${key}`]="itemData"
-          :key="`template_override_${index}`"
-        >
+      <!-- Empty template -->
+      <template #empty>
+        <template v-if="tableTemplates?.empty">
           <component
-            :is="component"
-            :context="itemData"
-            :blade-context="bladeContext"
-          />
-        </template>
-
-        <!-- Override header -->
-        <template
-          v-if="tableTemplates?.header && !isWidgetView"
-          #header="headerData"
-        >
-          <component
-            :is="tableTemplates.header"
-            :context="headerData"
-            :blade-context="bladeContext"
+            :is="tableTemplates.empty"
+            :context="bladeContext"
+            @add="openDetailsBlade"
           ></component>
         </template>
-
-        <!-- Override footer -->
-        <template
-          v-if="tableTemplates?.footer && !isWidgetView"
-          #footer="footerData"
-        >
-          <component
-            :is="tableTemplates.footer"
-            :context="footerData"
-            :blade-context="bladeContext"
-          ></component>
+        <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(`${localizationPrefix}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+            </div>
+          </div>
         </template>
+      </template>
 
-        <!-- Override table mobile view -->
+      <!-- Override table templates-->
+      <template
+        v-for="(component, key, index) in tableTemplates?.templateOverrideComponents"
+        #[`item_${key}`]="itemData"
+        :key="`template_override_${index}`"
+      >
+        <component
+          :is="component"
+          :context="itemData"
+          :blade-context="bladeContext"
+        />
+      </template>
 
-        <template
-          v-if="tableTemplates?.mobileView"
-          #mobile-item="itemData"
-        >
-          <component
-            :is="tableTemplates.mobileView"
-            :context="itemData"
-            :blade-context="bladeContext"
-          ></component>
-        </template>
-      </VcTable>
-    </template>
-  </component>
+      <!-- Override header -->
+      <template
+        v-if="tableTemplates?.header"
+        #header="headerData"
+      >
+        <component
+          :is="tableTemplates.header"
+          :context="headerData"
+          :blade-context="bladeContext"
+        ></component>
+      </template>
+
+      <!-- Override footer -->
+      <template
+        v-if="tableTemplates?.footer"
+        #footer="footerData"
+      >
+        <component
+          :is="tableTemplates.footer"
+          :context="footerData"
+          :blade-context="bladeContext"
+        ></component>
+      </template>
+
+      <!-- Override table mobile view -->
+
+      <template
+        v-if="tableTemplates?.mobileView"
+        #mobile-item="itemData"
+      >
+        <component
+          :is="tableTemplates.mobileView"
+          :context="itemData"
+          :blade-context="bladeContext"
+        ></component>
+      </template>
+    </VcTable>
+  </VcBlade>
 </template>
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -168,18 +145,21 @@ import {
   toRefs,
   provide,
   isRef,
+  inject,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
 import { useFilterBuilder, useTableTemplates } from "../composables";
-import { useFunctions, useNotifications } from "../../../../core/composables";
+import { useFunctions } from "../../../../core/composables";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
-import { notification, useBladeNavigation, usePopup } from "../../../components";
+import { useBladeNavigation, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
+import { useWidgets } from "../../../../core/composables/useWidgets";
+import { BladeInstance } from "../../../../injection-keys";
 
 export interface Props {
   expanded?: boolean;
@@ -188,7 +168,6 @@ export interface Props {
   options?: unknown;
   model?: DynamicGridSchema;
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
-  isWidgetView?: boolean;
   mixinFn?: ((...args: any[]) => any)[];
 }
 
@@ -198,8 +177,6 @@ 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>(), {
@@ -211,6 +188,7 @@ const props = withDefaults(defineProps<Props>(), {
 const { t } = useI18n({ useScope: "global" });
 const { showConfirmation } = usePopup();
 const { debounce } = useFunctions();
+const widgetService = useWidgets();
 
 const emit = defineEmits<Emits>();
 
@@ -224,6 +202,7 @@ const sort = shallowRef();
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
 const isMixinReady = ref(false);
+const blade = inject(BladeInstance);
 
 const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
 
@@ -240,7 +219,7 @@ const stateKey =
   props.composables &&
   computed(() => {
     if (tableData?.value?.id) {
-      return tableData.value?.id && props.isWidgetView ? tableData.value?.id + "_dashboard" : tableData.value?.id;
+      return tableData.value?.id;
     }
 
     throw new Error('Table id is not defined. Please provide "id" property in table schema');
@@ -256,7 +235,6 @@ let { load, remove, items, loading, pagination, query, scope } = props.composabl
       emit,
       props,
       mounted: useMounted(),
-      isWidgetView: props.isWidgetView,
     }) as UseList<Record<string, any>[], Record<string, any>, ListBaseBladeScope>)
   : ({
       load: ref(true),
@@ -302,10 +280,6 @@ const selection = computed(() => {
   return [];
 });
 
-if (props.isWidgetView) {
-  query.value.take = 5;
-}
-
 sort.value = query.value.sort ?? "createdDate:DESC";
 
 const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
@@ -421,7 +395,7 @@ onBeforeMount(async () => {
     await load({
       sort: sort.value,
       ...query.value,
-      ...(props.isWidgetView ? {} : getNavigationQuery()),
+      ...getNavigationQuery(),
     });
 });
 
@@ -472,54 +446,46 @@ const onCellBlur = async (data: { row: number | undefined; field: string }) => {
 };
 
 const openDetailsBlade = async () => {
-  if (!props.isWidgetView) {
-    if (
-      scope &&
-      "openDetailsBlade" in toValue(unreffedScope) &&
-      toValue(unreffedScope).openDetailsBlade &&
-      typeof toValue(unreffedScope).openDetailsBlade === "function"
-    ) {
-      await toValue(unreffedScope).openDetailsBlade?.();
-    }
-  } else {
-    emit("add");
+  if (
+    scope &&
+    "openDetailsBlade" in toValue(unreffedScope) &&
+    toValue(unreffedScope).openDetailsBlade &&
+    typeof toValue(unreffedScope).openDetailsBlade === "function"
+  ) {
+    await toValue(unreffedScope).openDetailsBlade?.();
   }
 };
 
 const onItemClick = (item: { [x: string]: any; id?: string }) => {
-  if (!props.isWidgetView) {
-    // TODO Add to docs
-    if (
-      scope &&
-      safeIn("onListItemClick", toValue(unreffedScope)) &&
-      typeof toValue(unreffedScope).onListItemClick === "function"
-    ) {
-      toValue(unreffedScope).onListItemClick?.({
-        item,
-        onOpen() {
-          selectedItemId.value = item.id;
-        },
-        onClose() {
-          selectedItemId.value = undefined;
-        },
-      });
-    } else if (
-      scope &&
-      safeIn("openDetailsBlade", toValue(unreffedScope)) &&
-      typeof toValue(unreffedScope).openDetailsBlade === "function"
-    ) {
-      toValue(unreffedScope).openDetailsBlade?.({
-        param: item.id,
-        onOpen() {
-          selectedItemId.value = item.id;
-        },
-        onClose() {
-          selectedItemId.value = undefined;
-        },
-      });
-    }
-  } else {
-    emit("item-click", { param: item.id });
+  // TODO Add to docs
+  if (
+    scope &&
+    safeIn("onListItemClick", toValue(unreffedScope)) &&
+    typeof toValue(unreffedScope).onListItemClick === "function"
+  ) {
+    toValue(unreffedScope).onListItemClick?.({
+      item,
+      onOpen() {
+        selectedItemId.value = item.id;
+      },
+      onClose() {
+        selectedItemId.value = undefined;
+      },
+    });
+  } else if (
+    scope &&
+    safeIn("openDetailsBlade", toValue(unreffedScope)) &&
+    typeof toValue(unreffedScope).openDetailsBlade === "function"
+  ) {
+    toValue(unreffedScope).openDetailsBlade?.({
+      param: item.id,
+      onOpen() {
+        selectedItemId.value = item.id;
+      },
+      onClose() {
+        selectedItemId.value = undefined;
+      },
+    });
   }
 };
 
@@ -560,9 +526,11 @@ async function removeItems() {
         }
       }
     }
-    emit("parent:call", {
-      method: "updateActiveWidgetCount",
-    });
+    // emit("parent:call", {
+    //   method: "updateActiveWidgetCount",
+    // });
+
+    widgetService.updateActiveWidget();
     await reload();
   }
 }
@@ -658,11 +626,11 @@ function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] })
   }
 }
 
-function updateActiveWidgetCount() {
-  emit("parent:call", {
-    method: "updateActiveWidgetCount",
-  });
-}
+// function updateActiveWidgetCount() {
+//   emit("parent:call", {
+//     method: "updateActiveWidgetCount",
+//   });
+// }
 
 async function handleSelectAllItems(all: boolean) {
   allSelected.value = all;
@@ -688,7 +656,6 @@ function actionBuilder(item: (typeof items.value)[number]): IActionBuilderResult
         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) {
@@ -721,20 +688,20 @@ const tableConfig = computed(() => {
     columns: tableColsWithLocales ?? [],
     stateKey: stateKey?.value ?? "",
     items: itemsProxy.value ?? [],
-    multiselect: props.isWidgetView ? false : tableData?.value?.multiselect,
-    header: props.isWidgetView ? false : tableData?.value?.header,
+    multiselect: tableData?.value?.multiselect,
+    header: tableData?.value?.header,
     itemActionBuilder: actionBuilder,
-    editing: props.isWidgetView ? false : isBladeEditable.value,
-    enableItemActions: !!tableData?.value?.actions && !props.isWidgetView,
-    footer: props.isWidgetView ? false : tableData?.value?.footer,
+    editing: isBladeEditable.value,
+    enableItemActions: !!tableData?.value?.actions,
+    footer: tableData?.value?.footer,
     sort: sort.value,
     pages: pagination.value?.pages,
     currentPage: pagination.value?.currentPage,
     searchValue: searchValue.value,
     selectedItemId: selectedItemId.value,
     totalCount: pagination.value?.totalCount,
-    reorderableRows: props.isWidgetView ? false : tableData?.value?.reorderableRows,
-    pullToReload: !props.isWidgetView,
+    reorderableRows: tableData?.value?.reorderableRows,
+    pullToReload: true,
     selectAll: tableData?.value?.selectAll,
     paginationVariant: tableData?.value?.paginationVariant,
     selectionItems: selection.value,
@@ -777,7 +744,7 @@ provide("isBladeEditable", isBladeEditable);
 defineExpose({
   reload,
   title,
-  updateActiveWidgetCount,
+  // updateActiveWidgetCount,
   ...toRefs(toValue(unreffedScope) ?? {}),
   selectedIds,
   settings: toValue(settings),

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

@@ -166,6 +166,11 @@ export interface ListContentSchema {
           | {
               method: string;
             };
+        mobilePosition?: {
+          row: 1 | 2;
+          order: number;
+        };
+        mobileVisible?: boolean;
       }
   ) & {
     id: string;

package/shared/pages/ChangePasswordPage/components/change-password/index.ts

@@ -1,3 +1,3 @@
-import _ChangePassword from "./ChangePassword.vue";
-
-export const ChangePasswordPage = _ChangePassword as typeof _ChangePassword;
+import _ChangePassword from "./ChangePassword.vue";
+
+export const ChangePasswordPage = _ChangePassword as typeof _ChangePassword;

package/shared/pages/ChangePasswordPage/components/index.ts

@@ -1 +1 @@
-export * from "./change-password";
+export * from "./change-password";

package/shared/pages/ChangePasswordPage/index.ts

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

package/shared/pages/ChangePasswordPage/plugin.ts

@@ -1,4 +1,4 @@
-import { createModule } from "./../../../core/plugins";
-import * as components from "./components";
-
-export const ChangePasswordPage = createModule(components);
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+
+export const ChangePasswordPage = createModule(components);

package/shared/pages/InvitePage/components/index.ts

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